83

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

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

事前定義されたクラスを使用してこれを行う「正しい」方法はありますか、または次のように手動で指定する必要があります。

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

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

4

9 に答える 9

68

私はそれがあなたが探しているものだと思います: 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 では、使用できる mixin が 4 つあります...

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

または、トップ 4 を使用して独自の mixin を作成し、一発で行うこともできます。

.border-radius(@radius){
    .border-top-radius(@radius);
    .border-right-radius(@radius);
    .border-bottom-radius(@radius);
    .border-left-radius(@radius);
}
于 2012-08-23T03:00:17.473 に答える
17

Bootstrapは、大きくて便利でありながらシンプルなCSSファイルであり、フレームワークやオーバーライドできないものではありません。多くの開発者がBSクラスに固執し、怠惰な「I-ca n't-write-CSS-code-anymore」コーダーになっていることに気付いたので、これを言います[もちろんこれはあなたのケースではありません！]。

必要な機能を備えている場合は、Bootstrapクラスを使用します。機能していない場合は、追加のコードを古き良きもので記述しますstyle.css。

両方の長所を活かすために、LESSで独自の宣言を記述し、必要に応じてすべてを再コンパイルして、ボーナスとしてサーバー要求を最小限に抑えることができます。

于 2012-08-23T03:18:54.570 に答える
10

ブートストラップ 3.0 のドキュメントに従って。divタグの角丸 クラスまたはIDはありません。

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

<img class="img-circle">

または、css でカスタムborder-radiuscss3 プロパティを使用するだけです

底の丸みを帯びたコーナーのみの場合は、次のように使用します

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

レスポンシブな循環divが必要な場合は、これを試してください

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

于 2013-09-30T14:38:02.887 に答える
8

以下がなければ、与えられた div に対して単に ans :

css で:

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

html で:

 <div class="footer">
        <p>blablabla</p>
      </div>
于 2014-04-18T15:42:21.347 に答える
0

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">

上記の例では、ブートストラップの自動マージンを左右に使用して画像を中央に配置しています。

于 2018-09-21T15:14:49.633 に答える