最新のWeb開発のチュートリアル
 

Bootstrap Buttons

❮前 次の章❯

ボタンのスタイル

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>
»それを自分で試してみてください

ボタンクラスは上で使用することができ<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">
»それを自分で試してみてください

なぜ我々は入れない#にhrefリンクの属性？

我々はにリンクするための任意のページを持っていない、と私たちは取得する必要はありませんので"404"メッセージを、我々は入れて#リンクとして。 実際の生活ではもちろん「検索」ページへの実際のURLとなって必要があります。

ボタンのサイズ

ブートストラップは、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>
»それを自分で試してみてください

ブロックレベルのボタン

ブロックレベルのボタンは、親要素の幅全体に及びます。

クラスの追加.btn-blockのブロック・レベルのボタンを作成するために：

例

<button type="button" class="btn btn-primary btn-block">Button 1</button>
»それを自分で試してみてください

アクティブ/無効ボタン

ボタンがアクティブ（押さ表示されます）または無効（unclickable）状態に設定することができます。

クラス.active表示されますが、押されたボタンを作成し、クラス.disabledボタンがunclickableになります：

例

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
»それを自分で試してみてください

練習で自分自身をテスト！

演習1» 演習2» 演習3» 演習4»

完全なブートストラップボタンのリファレンス

すべてのボタンクラスの完全なリファレンスについては、当社の完全に行くブートストラップボタンのリファレンス 。


❮前 次の章❯