Buttons

Bootstrapのボタンスタイルを適用します。
ここではボタンスタイルに関する説明だけですので、ドロップダウンボタンやボタングループ等はComponentsの各説明をご覧ください。

サンプル01－ボタン表示（ボタンスタイル指定）
サンプル02－ボタン表示（色指定）
サンプル03－ボタン表示（サイズ指定）
サンプル04－ボタン表示（ボタン状態指定）

サンプル01－ボタン表示（ボタンスタイル指定）

Link

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

コーディング

01-04行目: <a>・<button>・<input>に.btnを指定し、Bootstrapのボタンスタイルを適用します

サンプル02－ボタン表示（色指定）

<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>

機能

数種類のボタン色が定義されています
場面に応じて指定してください

コーディング

01-06行目: <button>に場面に応じたボタン色.btn-default～dangerを指定します
07行目: .btn-linkは外枠及び背景色が透過になっていますが、ボタン反応する範囲は他のボタンと同じです

サンプル03－ボタン表示（サイズ指定）

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</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>
<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>

<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>

機能

数種類のボタンサイズが定義されています
場面に応じて指定してください

コーディング

01-06行目: <button>に場面に応じたボタンサイズ.btn-lg～xsを指定します
10-11行目: .btn-blockはブロックサイズのボタンとなります
横幅目一杯のボタンを表示したい時に指定してください

サンプル04－ボタン表示（ボタン状態指定）

Primary link Link

<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>

<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>

機能

ボタン状態を指定します

コーディング

01-04行目: ボタンを押されている状態にする場合、<button>や<a>に.activeを指定します
06-07行目: ボタンを無効にする場合、<button>でボタン表示している時はdisabled属性にdisabledを指定します
08-09行目: ボタンを無効にする場合、<a>でボタン表示している時は.disabledを指定します