コンポーネント

Bootstrap には、ナビゲーション、アラート、ポップオーバーなどを提供するために、何十もの再利用可能なコンポーネントが組み込まれています。

ボタングループ

ボタン グループを使用して、複数のボタンを 1 つの複合コンポーネントとして結合します。一連の<a>または<button>要素でそれらを構築します。

ベストプラクティス

ボタン グループとツールバーを使用する場合は、次のガイドラインに従うことをお勧めします。

  • 1 つのボタン グループ、<a>またはで常に同じ要素を使用します<button>
  • 同じボタン グループに異なる色のボタンを混在させないでください。
  • テキストに加えて、またはテキストの代わりにアイコンを使用しますが、必要に応じて代替テキストとタイトル テキストを必ず含めてください。

ドロップダウン (以下を参照) を持つ関連するボタン グループは、個別に呼び出す必要があり、意図した動作を示すドロップダウン キャレットを常に含める必要があります。

デフォルトの例

アンカー タグ ボタンで構築された標準ボタン グループを HTML がどのように検索するかを次に示します。

  1. <div class = "btn-group" >
  2. <ボタンクラス= "btn" > 1 </ボタン>
  3. <ボタンクラス= "btn" > 2 </ボタン>
  4. <ボタンクラス= "btn" > 3 </ボタン>
  5. </div>

ツールバーの例

のセットをに結合<div class="btn-group">して<div class="btn-toolbar">、より複雑なコンポーネントを作成します。

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

チェックボックスとラジオのフレーバー

ボタン グループは、1 つのボタンのみをアクティブにできるラジオ、または任意の数のボタンをアクティブにできるチェックボックスとしても機能します。そのための Javascript ドキュメントを表示します。

JavaScript を入手 »

ボタン グループのドロップダウン

注意喚起!ドロップダウンのあるボタンは、適切にレンダリング.btn-groupするために、 内で個別にラップする必要があります。.btn-toolbar

ボタンのドロップダウン

マークアップの例

ボタン グループと同様に、私たちのマークアップは通常のボタン マークアップを使用しますが、スタイルを改良し、Bootstrap のドロップダウン jQuery プラグインをサポートするためにいくつか追加しています。

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. アクション
  4. <span class = "キャレット" ></span>
  5. </a>
  6. <ul class = "ドロップダウンメニュー" >
  7. <!-- ドロップダウン メニュー リンク -->
  8. </ul>
  9. </div>

すべてのボタン サイズに対応

ボタンのドロップダウンは任意のサイズで機能します。ボタンのサイズを.btn-large.btn-small、またはに変更し.btn-miniます。

JavaScriptが必要です

ボタン ドロップダウンが機能するには、Bootstrap ドロップダウン プラグインが必要です。

モバイルなど、場合によっては、ドロップダウン メニューがビューポートの外側に拡張されます。配置を手動で解決するか、カスタム JavaScript で解決する必要があります。


分割ボタンのドロップダウン

概要と例

ボタン グループのスタイルとマークアップに基づいて、分割ボタンを簡単に作成できます。分割ボタンは、左側に標準アクション、右側にコンテキスト リンク付きのドロップダウン トグルを備えています。

サイズ

サイジングには、追加のボタン クラス、、、.btn-miniまたは.btn-smallを使用します。.btn-large

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- ドロップダウン メニュー リンク -->
  5. </ul>
  6. </div>

マークアップの例

通常のボタン ドロップダウンを拡張して、別のドロップダウン トリガーとして動作する 2 番目のボタン アクションを提供します。

  1. <div class = "btn-group" >
  2. <ボタンクラス= "btn" >アクション</ボタン>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "キャレット" ></span>
  5. </ボタン>
  6. <ul class = "ドロップダウンメニュー" >
  7. <!-- ドロップダウン メニュー リンク -->
  8. </ul>
  9. </div>

ドロップアップ メニュー

ドロップダウン メニューは、1 つのクラスを の直接の親に追加することによって、ボトムアップで切り替えることもできます.dropdown-menu。の方向を反転し.caret、メニュー自体を再配置して、上からではなく下から上に移動します。

  1. <div class = "btn-group ドロップアップ" >
  2. <buttonクラス= "btn" >ドロップアップ</button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "キャレット" ></span>
  5. </ボタン>
  6. <ul class = "ドロップダウンメニュー" >
  7. <!-- ドロップダウン メニュー リンク -->
  8. </ul>
  9. </div>

マルチコンページのページネーション

いつ使用するか

アプリや検索結果に最適な、Rdio にインスパイアされた非常に単純化された最小限のスタイルのページネーション。大きなブロックは見逃しにくく、簡単に拡張でき、大きなクリック領域を提供します。

ステートフル ページ リンク

リンクはカスタマイズ可能で、適切なクラスのさまざまな状況で機能します。.disabledクリックできないリンクと.active現在のページ。

柔軟な配置

ページネーション リンクの配置を変更するには、2 つのオプション クラスのいずれかを追加します:.pagination-centered.pagination-right.

デフォルトのページネーション コンポーネントは柔軟で、さまざまなバリエーションで機能します。

マークアップ

でラップされ<div>、ページネーションは単なる<ul>.

  1. <divクラス= "ページネーション" >
  2. <ul>
  3. <li><a href = "#" >前へ</a></li>
  4. <liクラス= "アクティブ" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4​​ </a></li>
  10. <li><a href = "#" >次へ</a></li>
  11. </ul>
  12. </div>

ページャー前と次のリンクを素早く表示

ページャについて

pager コンポーネントは、軽いマークアップとさらに軽いスタイルを使用した単純なページネーションの実装のための一連のリンクです。ブログや雑誌などのシンプルなサイトに最適です。

オプションの無効状態

ページャー リンクも.disabled、ページネーションの一般的なクラスを使用します。

デフォルトの例

デフォルトでは、ページャーはリンクを中央に配置します。

  1. <ul class = "ポケットベル" >
  2. <リ>
  3. <a href = "#" >前へ</a>
  4. </li>
  5. <リ>
  6. <a href = "#" >次へ</a>
  7. </li>
  8. </ul>

位置合わせされたリンク

または、各リンクを左右に揃えることもできます。

  1. <ul class = "ポケットベル" >
  2. <li class = "previous" >
  3. <a href = "#" > 古い</a>
  4. </li>
  5. <liクラス= "次" >
  6. <a href = "#" >新しい → </a>
  7. </li>
  8. </ul>
ラベル マークアップ
デフォルト <span class="label">Default</span>
成功 <span class="label label-success">Success</span>
警告 <span class="label label-warning">Warning</span>
重要 <span class="label label-important">Important</span>
情報 <span class="label label-info">Info</span>
<span class="label label-inverse">Inverse</span>

バッジは、インジケーターまたは何らかの種類のカウントを表示するための小さくて単純なコンポーネントです。これらは、Mail.app などの電子メール クライアントや、プッシュ通知用のモバイル アプリでよく見られます。

利用可能なクラス

名前 マークアップ
デフォルト 1 <span class="badge">1</span>
成功 2 <span class="badge badge-success">2</span>
警告 4 <span class="badge badge-warning">4</span>
重要 6 <span class="badge badge-important">6</span>
情報 8 <span class="badge badge-info">8</span>
10 <span class="badge badge-inverse">10</span>

ヒーローユニット

Bootstrap は、サイトでコンテンツを紹介するための、ヒーロー ユニットと呼ばれる軽量で柔軟なコンポーネントを提供します。マーケティングやコンテンツの多いサイトでうまく機能します。

マークアップ

divコンテンツを次のようにラップします。

  1. <divクラス= "ヒーローユニット" >
  2. <h1>見出し</h1>
  3. <p>キャッチフレーズ</p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. もっと詳しく知る
  7. </a>
  8. </p>
  9. </div>

こんにちは世界!

これは単純なヒーロー ユニットであり、注目のコンテンツや情報に特別な注意を引くための単純なジャンボトロン スタイルのコンポーネントです。

もっと詳しく知る

ページヘッダー

h1ページ上のコンテンツのセクションを適切に間隔を空けてセグメント化するための単純なシェル。h1のデフォルトのsmall, 要素だけでなく、他のほとんどのコンポーネント (追加のスタイルを使用)も利用できます。

  1. <divクラス= "ページヘッダー" >
  2. <h1>ページ ヘッダーの例</h1>
  3. </div>

デフォルトのサムネイル

デフォルトでは、Bootstrap のサムネイルは、必要最小限のマークアップでリンクされた画像を表示するように設計されています。

高度にカスタマイズ可能

マークアップを少し追加するだけで、見出し、段落、ボタンなど、あらゆる種類の HTML コンテンツをサムネイルに追加できます。

  • サムネイル ラベル

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    アクション アクション

  • サムネイル ラベル

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    アクション アクション

サムネイルを使用する理由

サムネイル (以前.media-gridは v1.4 まで) は、写真やビデオのグリッド、画像検索結果、小売製品、ポートフォリオなどに最適です。リンクまたは静的コンテンツにすることができます。

シンプルで柔軟なマークアップ

サムネイル マークアップは単純です。ul任意の数のli要素を使用するだけで十分です。また、非常に柔軟で、コンテンツをラップするためのマークアップを少し追加するだけで、あらゆるタイプのコンテンツを使用できます。

グリッドの列サイズを使用

最後に、サムネイル コンポーネントは既存のグリッド システム クラス (.span2や など) を使用して.span3、サムネイルの寸法を制御します。

マークアップ

前述のように、サムネイルに必要なマークアップは軽くて簡単です。リンクされた画像のデフォルト設定は次のとおりです。

  1. <ul class = "サムネイル" >
  2. <li class = "span3" >
  3. <a href = "#" class = "サムネイル" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

サムネイルのカスタム HTML コンテンツの場合、マークアップがわずかに変更されます。どこでもブロック レベルのコンテンツを許可するには、を次<a><div>ように交換します。

  1. <ul class = "サムネイル" >
  2. <li class = "span3" >
  3. <divクラス= "サムネイル" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5>サムネイル ラベル</h5>
  6. <p>ここにサムネイルのキャプション... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

その他の例

利用可能なさまざまなグリッド クラスを使用して、すべてのオプションを調べてください。また、異なるサイズを組み合わせて使用​​することもできます。

軽量のデフォルト

書き直された基底クラス

Bootstrap 2 では、基本クラスを簡素化しました:.alertの代わりに.alert-message. <p>また、最低限必要なマークアップを削減しました。デフォルトでは必要ありません。outerのみです<div>

単一のアラート メッセージ

より少ないコードでより耐久性のあるコンポーネントを実現するために、ブロック アラートの差別化された外観、より多くのパディングと通常はより多くのテキストが付属するメッセージを削除しました。クラスも に変更されました.alert-block


JavaScript と相性抜群

Bootstrap には、アラート メッセージをサポートする優れた jQuery プラグインが付属しており、アラート メッセージをすばやく簡単に閉じることができます。

プラグインを入手 »

アラートの例

シンプルなクラスを使用して、メッセージとオプションの閉じるアイコンを div にラップします。

警告!自分でチェックするのが一番です、あなたはあまり見栄えがよくありません。
  1. <divクラス= "アラート" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong>警告!</strong>自分で確認してください。あなたはあまり格好良くありません。
  4. </div>

注意喚起!iOS デバイスではhref="#"、アラートを解除するために が必要です。それと、アンカーの閉じるアイコンの data 属性を必ず含めてください。<button>または、ドキュメントで選択した data 属性を持つ要素を使用することもできます。を使用する場合は、フォームを<button>含める必要があります。含めtype="button"ないと、フォームが送信されない場合があります。

.alert-block追加のパディングとテキスト コントロール、および.alert-heading一致する見出しの2 つのオプション クラスを���用して、標準のアラート メッセージを簡単に拡張します。

警告!

自分でチェックするのが一番です、あなたはあまり見栄えがよくありません。Nulla vitae elit libero、pharetra augue。Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <divクラス= "アラート アラート ブロック" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" >警告! </h4>
  4. 自分で確認してください、あなたはそうではありません...
  5. </div>

状況に応じた代替オプションのクラスを追加して、アラートの意味を変更します

エラーまたは危険

ああスナップ!いくつか変更して、もう一度送信してみてください。
  1. <divクラス= "アラート アラート エラー" >
  2. ...
  3. </div>

成功

素晴らしい!この重要な警告メッセージを読みました。
  1. <divクラス= "アラート アラート-成功" >
  2. ...
  3. </div>

情報

注意喚起!このアラートには注意が必要ですが、それほど重要ではありません。
  1. <divクラス= "アラート アラート情報" >
  2. ...
  3. </div>

例とマークアップ

基本

垂直グラデーションのデフォルトの進行状況バー。

  1. <divクラス= "進捗" >
  2. <divクラス= "バー"
  3. スタイル= ": 60 %; " ></div>
  4. </div>

ストライプ

グラデーションを使用して縞模様の効果を作成します (IE なし)。

  1. <div class = "progress progress-striped" >
  2. <divクラス= "バー"
  3. スタイル= ": 20 %; " ></div>
  4. </div>

アニメーション

ストライプの例を取り上げてアニメーション化します (IE なし)。

  1. <div class = "progress 進行状況ストライプ
  2. アクティブ" >
  3. <divクラス= "バー"
  4. スタイル= ": 40 %; " ></div>
  5. </div>

オプションとブラウザのサポート

追加の色

プログレス バーは、一貫したスタイルを実現するために、同じボタン クラスとアラート クラスの一部を使用します。

縞模様のバー

単色と同様に、さまざまな縞模様のプログレス バーがあります。

行動

プログレス バーは CSS3 トランジションを使用しているため、javascript で幅を動的に調整すると、スムーズにサイズ変更されます。

.activeこのクラスを使用すると、.progress-stripedプログレス バーのストライプが左から右にアニメーション化されます。

ブラウザのサポート

プログレス バーは、CSS3 グラデーション、トランジション、およびアニメーションを使用して、すべての効果を実現します。これらの機能は、IE7-9 以前のバージョンの Firefox ではサポートされていません。

現時点では、Opera と IE はアニメーションをサポートしていません。

ウェルズ

要素に挿入効果を与える単純な効果としてウェルを使用します。

ほら、私は井戸の中にいる!
  1. <divクラス= "まあ" >
  2. ...
  3. </div>

閉じるアイコン

モーダルやアラートなどのコンテンツを閉じるには、一般的な閉じるアイコンを使用します。

  1. <ボタンクラス= "閉じる" > × </ボタン>

アンカーを使用する場合、iOS デバイスではクリック イベントに href="#" が必要です。

  1. <a class = "close" href = "#" > × </a>