ブートストラップCSSボタンリファレンス
ボタンの色
ボタンのサイズ
アクティブ/無効ボタン
ブロックレベルのボタン
ボタングループ
ボタンクラス
以下のクラスを使用して、任意の<a>、<button>、または<input>要素のスタイルを設定できます。
Class | Description | Example |
---|---|---|
.btn | Adds basic styling to any button | |
.btn-default | Indicates a default/standard button | |
.btn-primary | Provides extra visual weight and identifies the primary action in a set of buttons | |
.btn-success | Indicates a successful or positive action | |
.btn-info | Contextual button for informational alert messages | |
.btn-warning | Indicates caution should be taken with this action | |
.btn-danger | Indicates a dangerous or potentially negative action | |
.btn-link | Makes a button look like a link (will still have button behavior) | |
.btn-lg | Makes a large button | |
.btn-sm | Makes a small button | |
.btn-xs | Makes an extra small button | |
.btn-block | Makes a block-level button (spans the full width of the parent element) | |
.active | Makes the button appear pressed | |
.disabled | Makes the button disabled | |
.navbar-btn | Vertically aligns a button inside a navbar |
ボタングループクラス
以下のクラスを使用して、任意の<a>、<button>、または<input>要素のスタイルを設定できます。
Class | Description | Example |
---|---|---|
.btn-group | Groups buttons together on a single line | |
.btn-group-justified | Makes a group of buttons span the entire width of the screen | |
.btn-group-lg | Large button group (makes all buttons in a button group larger - increased font-size and padding) | |
.btn-group-sm | Small button group (makes all buttons in a button group smaller) | |
.btn-group-xs | Extra small button group (makes all buttons in a button group extra small) | |
.btn-group-vertical | Makes a button group appear vertically stacked |