web-dev-qa-db-ja.com

Twitterで角を丸くする正しい方法Bootstrap

Twitter Bootstrapで始めたばかりで、ここに1つの質問があります。

カスタム<header>ブロックを作成していますが、下隅を丸くしたいです。

定義済みのクラスを使用してこれを行う「正しい」方法はありますか、または手動で指定する必要があります：

border-radius: 10px;               // and all that cross-browser trumpery

今のところ、cssスタイルを使用しています。その問題にはlessを使用した方が良いでしょうか？

csstwitter-bootstraplesscss3
78
Edward Ruchevits

私はそれがあなたが探しているものだと思います： http://blogsh.de/tag/bootstrap-less/

@import 'bootstrap.less';
div.my-class {
    .border-radius( 5px );
}

Mixinがあるので使用できます：

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

Bootstrap 3には、使用できるミックスインが4つあります...

.border-top-radius(@radius);
.border-right-radius(@radius);
.border-bottom-radius(@radius);
.border-left-radius(@radius);

または、トップ4を使用して独自のミックスインを作成し、1回で実行できます。

.border-radius(@radius){
    .border-top-radius(@radius);
    .border-right-radius(@radius);
    .border-bottom-radius(@radius);
    .border-left-radius(@radius);
}
65
Danil Speransky

<div class="img-rounded">は角を丸くします。

93
Swade

ブートストラップは、大きくて便利でありながらシンプルですCSSファイル-フレームワークやオーバーライドできないものではありません。これは、多くの開発者がBSクラスに固執し、怠zyな「CSSコードをもう記述できない」コーダーになっていることに気づいたためです（もちろん、これはあなたのケースではありません！）。

必要な機能がある場合は、Bootstrapクラスを使用してください。そうでない場合は、追加コードを古き良きstyle.cssで記述してください。

両方の長所を最大限に活用するには、LESSで独自の宣言を記述し、必要に応じて全体を再コンパイルし、サーバー要求を最小限に抑えることができます。

17
moonwave99

必要なのはBootstrap panel です。 panelクラスを追加するだけで、ヘッダーは均一になります。クラスpanel panel-info、panel panel-successなどを追加することもできます。ほとんどのブロック要素で機能し、<header>で機能するはずですが、ほとんどの場合<div>sで使用されると思います。

10
Michael Scheper

bootstrap 3.0ドキュメントによる。角丸classまたはidfor div tag。

を使用して画像に円の動作を使用できます

<img class="img-circle">

または、CSSでカスタムborder-radius css3プロパティを使用します

底が丸い円錐の場合のみ使用

border-bottom-left-radius:25%; // i use percentage  u can use pix.
border-bottom-right-radius:25%;// i use percentage  u can use pix.

responsive円形divが必要な場合 試行する

レスポンシブCSSサークル からの参照

10
Sanket Shembekar

少なくても、単に与えられたdivのans：

CSSで：

.footer {
background-color: #ab0000;
padding-top: 40px;
padding-bottom: 10px;
border-radius:5px;
}

Htmlで：

 <div class="footer">
        <p>blablabla</p>
      </div>
7
mcbjam

Bootstrap4を使用すると、次のように簡単に実行できます。

class="rounded"

または

class="rounded-circle"
4
Natesh bhat

Bootstrap 4では、要素を区切る正しい方法は、要素のクラスリストで次のように名前を付けることです。

For a slight rounding effect on all corners; class="rounded"
For a slight rounding on the left; class="rounded-left"
For a slight rounding on the top; class="rounded-top"
For a slight rounding on the right; class="rounded-right"
For a slight rounding on the bottom; class="rounded-bottom" 
For a circle rounding, i.e. your element is made circular; class="rounded-circle"
And to remove rounding effects; class="rounded-0"

Bootstrap 4 cssファイルを使用するには、単にCDNを使用し、HTMLファイルの次のリンクを使用します。

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

これにより、Bootstrap 4の基本が提供されます。ただし、ツールチップ、ポップオーバー、ドロップダウンなど、Bootstrap 4コンポーネントの大部分を使用する場合は、代わりに次のコードを使用してください。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

または、NPMまたはBowerを使用してBootstrapをインストールし、そこにあるファイルにリンクすることもできます。

* 3つの下のタグは、最初のリンクパスの最初のタグと同じであることに注意してください。

完全な作業例は次のとおりです。

<img src="path/to/my/image/image.jpg" width="150" height="150" class="rounded-circle mx-auto">

上記の例では、左右のBootstrap自動マージンを使用して、画像の中央を揃えています。

0
cmprogram