目次
ボタン
btn btn-***
<button>ボタン要素や <a>アンカー要素のクラスに.btn .btn-***を指定することでボタンを表示することができます。
基本
<!-- Default -->
<button type="button" class="btn btn-default">Default</button>
<!-- Primary -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Success -->
<button type="button" class="btn btn-success">Success</button>
<!-- Info -->
<button type="button" class="btn btn-info">Info</button>
<!-- Warning -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Danger -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Link -->
<button type="button" class="btn btn-link">Link</button>ボタンのサイズ
btn-lg、btn-sm、btn-xs
.btn-lg .btn-sm .btn-xs を指定することでボタンのサイズを変更することができます。
btn-lg通常サイズ
btn-smbtn-xs<!-- Large button -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
<!-- Default button -->
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
<!-- Small button -->
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
<!-- Extra small button -->
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>btn-block
.btn-blockを使うと幅いっぱいまで広がるブロックレベルのボタンにできます。
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>アクティブ状態
active
.activeを指定するとボタンを押した状態、アクティブ状態のボタンになります。
ボタン要素の場合
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>アンカー要素の場合
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>不可状態
disabled
.disabledを指定すると無効化状態のボタンになります。
ボタン要素の場合
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>アンカー要素の場合
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
あわせて読みたい
Bootstrap4に用意されているクラス【ボタン編】
ボタン btn btn-*** 基本 <button>ボタン要素や <a>アンカー要素のクラスに.btn .btn-***を指定することでボタンを表示することができます。 Bootstrap4で...