35

アンドレ・ザ・ジャイアントでも簡単にタップできるほど大きなボタンを含む、非常にシンプルなUIを備えたいモバイルフレンドリーなWebアプリを開発しています。

問題は、ブートストラップ ボタンの幅や高さをパーセンテージやピクセル数に設定したり、単純にコンテナーを埋めたりして、明示的にサイズを変更する簡単な方法が見つからないことです。「btn btn-small」または「btn btn-large」クラスを使用する以外に、ボタンを大幅に拡大する標準的な方法はありますか?それとも、これは悪い習慣と見なされますか?

4

2 に答える 2

61

Bootstrap は優れたフレームワークですが、すべてを網羅しているわけではありません。OOCSS の原則を使用して、ニーズに合わせて拡張する必要があることを認識しています。

Bootstrap コンポーネント自体を適合させる場合、通常bootstrap-extensions.css、特大ボタンなどの基本コンポーネントの拡張機能を格納するファイルを作成します。

以下は、1 つの拡張クラスがフレームワークにボタンの新しいファミリを追加する方法の実装例です。.btn-blockこの例には、既にフレームワークに含まれているの使用例も含まれています。

CSS:

/**
 * Extra large button extensions. Extends `.btn`.
 */
.btn-xlarge {
    padding: 18px 28px;
    font-size: 22px;
    line-height: normal;
    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
    }

デモ: http://jsfiddle.net/Pspb9/

于 2012-10-28T20:41:45.443 に答える