[解決済み] Twitter Bootstrapで角丸を作成する正しい方法

質問

を始めたばかりです。 Twitter Bootstrap を使い始めたところですが、ここで一つ質問があります。

私はカスタム <header> ブロックを作成しており、その底の角を丸くしたいのです。

定義済みのクラスを使用してこれを行うには、quot;正しい"方法はありますか、私はのように手動でそれを指定する必要があります。

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

今のところ、私は css スタイルを使用しています。もしかしたら less を使ったほうがいいかもしれません。

どのように解決するのですか？

あなたが探しているものだと思います。 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;
}

Bootstrap3では、4つのMixinを使用することができます...

.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);
}