web-dev-qa-db-ja.com

Twitter-Bootstrapのボタンのサイズ変更

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

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

csstwitter-bootstrapbutton
35
Chazu

ブートストラップは優れたフレームワークですが、すべてを網羅しているわけではありません。 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/

61
amustill

@amustillの答えはBootstrap 3.1.0に簡単に適応できます：

.btn-xl {
    padding: 18px 28px;
    font-size: 22px;
    border-radius: 8px;
}

jsFiddle： http://jsfiddle.net/Abdull/2rkkJ/

この適応により、自動的に:hover darkeningおよび:activeシャドウの設定。

24
Abdull