Bootstrap は、7 種類のボタンを提供します：
上記のボタンスタイルを達成するために、Bootstrap には以下のクラスがあります：
.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link次の例は、さまざまなボタンスタイルのコードを示しています：
<button type="button" class="btn btn-default">Default</button>
<button
type="button" class="btn btn-primary">Primary</button>
<button
type="button" class="btn btn-success">Success</button>
<button
type="button" class="btn btn-info">Info</button>
<button type="button"
class="btn btn-warning">Warning</button>
<button type="button" class="btn
btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
Try it Yourself »
ボタンクラスは、<a>、<button>、
<input> 要素で使用することができます：
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input
type="submit" class="btn btn-info" value="Submit Button">
Try it Yourself »
なぜリンクの href 属性に # を付けるのですか？
リンクするためのページがないことと、「404」メッセージを表示したくないために、リンクに # を指定しています。
実際には、もちろん「検索」するページの実際の URL にする必要があります。
Bootstrap には、4 種類のボタンサイズが用意されています：
いろいろなサイズを定義するクラスは次の通りです：
.btn-lg.btn-md.btn-sm.btn-xs次の例は、さまざまなボタンサイズのコードを示しています：
<button
type="button" class="btn btn-primary btn-lg">Large</button>
<button
type="button" class="btn btn-primary btn-md">Medium</button>
<button
type="button" class="btn btn-primary btn-sm">Small</button>
<button
type="button" class="btn btn-primary btn-xs">XSmall</button>
Try it Yourself »
ブロック・レベル・ボタンは、親要素の幅全体に広がります。
ブロック・レベル・ボタンを作成するためには、クラス .btn-block を追加します：
ボタンを、active（押せるようになる）または disabled（クリックできない）状態に設定することができます：
クラス .active は、ボタンを押せるようにし、
クラス .disabled は、ボタンをクリックできなくします：
<button
type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled
Primary</button>
Try it Yourself »
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
すべてのボタンクラスの完全なリファレンスについては、 Bootstrap ボタン・リファレンスをご覧ください。