コンポーネント

ナビゲーション、アラート、ポップオーバーなどを提供するために構築された多数の再利用可能なコンポーネント。

2 つの基本的なオプションと、より��体的な 2 つのバリエーション。

シングルボタングループ

一連のボタンを.btninでラップし.btn-groupます。

  1. <div class = "btn-group" >
  2. <button class = "btn" ></button>
  3. <ボタンクラス= "btn" >ミドル</button>
  4. <button class = "btn" ></button>
  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. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

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

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

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

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

概要と例

任意のボタンを使用してドロップダウン メニューをトリガーします。ドロップダウン メニューを 内に配置し.btn-group、適切なメニュー マークアップを提供します。

  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 で解決する必要があります。


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

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

  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>

サイズ

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

  1. <div class = "btn-group" >
  2. <buttonクラス= "btn btn-mini" >アクション</button>
  3. <button class = "btn btn-mini 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 にインスパイアされたシンプルなページネーション。大きなブロックは見逃しにくく、簡単に拡張でき、大きなクリック領域を提供します。

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

オプション

無効状態とアクティブ状態

リンクはさまざまな状況に合わせてカスタマイズできます。.disabledクリックできないリンクに使用し.active、現在のページを示します。

  1. <divクラス= "ページネーション" >
  2. <ul>
  3. <li class = "disabled" ><a href = "#" > « </a></li>
  4. <li class = "active" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

オプションで、スパンのアクティブまたは無効なアンカーを交換して、意図したスタイルを維持しながらクリック機能を削除できます。

  1. <divクラス= "ページネーション" >
  2. <ul>
  3. <li class = "disabled" ><スパン> « </span></li>
  4. <li class = "active" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

サイズ

ページネーションを大きくしたり小さくしたりしたいですか?追加.pagination-largeのサイズについては、、、.pagination-smallまたはを追加します。.pagination-mini

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <divクラス= "ページネーション" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

アライメント

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

  1. <div class = "pagination pagination-centered" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

ページャ

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

デフォルトの例

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

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

位置合わせされたリンク

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

  1. <ul class = "ポケットベル" >
  2. <li class = "previous" >
  3. <a href = "#" > 古い</a>
  4. </li>
  5. <liクラス= "次" >
  6. <a href = "#" >新しい → </a>
  7. </li>
  8. </ul>

オプションの無効状態

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

  1. <ul class = "ポケットベル" >
  2. <li class = "以前の無効" >
  3. <a href = "#" > 古い</a>
  4. </li>
  5. ...
  6. </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>

バッジ

名前 マークアップ
デフォルト 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>

簡単に折りたためます

実装を簡単にするために、:emptyコンテンツが存在しない場合、ラベルとバッジは (CSS のセレクターを介して) 単純に折りたたまれます。

ヒーローユニット

サイトの重要なコンテンツを紹介する軽量で柔軟なコンポーネント。マーケティングやコンテンツの多いサイトでうまく機能します。

こんにちは世界!

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

もっと詳しく知る

  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>ページ ヘッダーの例<small>ヘッダーのサブテキスト</small></h1>
  3. </div>

デフォルトのサムネイル

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

高度にカスタマイズ可能

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

  • 300×200

    サムネイル ラベル

    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.

    アクション アクション

  • 300×200

    サムネイル ラベル

    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.

    アクション アクション

  • 300×200

    サムネイル ラベル

    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 = "span4" >
  3. <a href = "#" class = "サムネイル" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "サムネイル" >
  2. <li class = "span4" >
  3. <divクラス= "サムネイル" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3>サムネイル ラベル</h3>
  6. <p>サムネイルのキャプション... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

その他の例

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

デフォルトのアラート

.alert基本的な警告アラート メッセージには、任意のテキストとオプションの閉じるボタンをラップします。

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

ボタンを閉じる

モバイル Safari およびモバイル オペラ ブラウザーでは、data-dismiss="alert"属性に加えて、タグhref="#"を使用するときにアラートを却下するためにが必要です。<a>

  1. <a href = "#" class = "close" data-dismiss = "alert" > × </a>

<button>または、ドキュメントで選択した data 属性を持つ要素を使用することもできます。を使用する場合は、フォームを<button>含める必要があります。含めtype="button"ないと、フォームが送信されない場合があります。

  1. <button type = "button" class = "close" data-dismiss = "alert" > × </ボタン>

JavaScript でアラートを無視する

アラート jQuery プラグインを使用して、アラートをすばやく簡単に破棄します。


オプション

より長いメッセージの場合は、アラート ラッパーの上部と下部のパディングを追加して増やします.alert-block

警告!

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

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

文脈上の選択肢

オプションのクラスを追加して、アラートの意味を変更します。

エラーまたは危険

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

成功

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

情報

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

例とマークアップ

基本

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

  1. <divクラス= "進捗" >
  2. <div class = "bar" style = " width : 60 %; " ></div>
  3. </div>

ストライプ

グラデーションを使用してストライプ効果を作成します。IE7-8 では使用できません。

  1. <div class = "progress progress-striped" >
  2. <div class = "bar" style = " width : 20 %; " ></div>
  3. </div>

アニメーション

を追加.active.progress-stripedて、ストライプを右から左にアニメーション化します。IE のすべてのバージョンで使用できるわけではありません。

  1. <div class = "progress progress-striped active" >
  2. <div class = "bar" style = " width : 40 %; " ></div>
  3. </div>

積み上げ

複数のバーを同じ.progressものに配置して積み重ねます。

  1. <divクラス= "進捗" >
  2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " ></div>
  5. </div>

オプション

追加の色

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

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

縞模様のバー

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

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success progress-striped" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger progress-striped" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

ブラウザのサポート

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

Internet Explorer 10 および Opera 12 より前のバージョンは、アニメーションをサポートしていません。

さまざまなタイプのコンポーネント (ブログ コメント、ツイートなど) を構築するための抽象オブジェクト スタイルで、テキスト コンテンツの横に左揃えまたは右揃えの画像を配置します。

デフォルトの例

デフォルトのメディアでは、コンテンツ ブロックの左または右にメディア オブジェクト (画像、ビデオ、オーディオ) を配置できます。

64x64

メディアの見出し

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputate の前庭, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ファウシバスのドネクラシニア・コンゲ・フェリス。
64x64

メディアの見出し

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputate の前庭, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ファウシバスのドネクラシニア・コンゲ・フェリス。
64x64

メディアの見出し

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputate の前庭, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ファウシバスのドネクラシニア・コンゲ・フェリス。
  1. <divクラス= "メディア" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <divクラス= "メディア本体" >
  6. <h4 class = "media-heading" >メディアの見出し</h4>
  7. ...
  8.  
  9. <!-- ネストされたメディア オブジェクト -->
  10. <divクラス= "メディア" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

メディア一覧

少しマークアップを追加すると、リスト内でメディアを使用できます (コメント スレッドや記事リストに役立ちます)。

  • 64x64

    メディアの見出し

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputate の前庭, tempus viverra turpis.

    64x64

    ネストされたメディアの見出し

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputate の前庭, tempus viverra turpis.
    64x64

    ネストされたメディアの見出し

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputate の前庭, tempus viverra turpis.
    64x64

    ネストされたメディアの見出し

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputate の前庭, tempus viverra turpis.
  • 64x64

    メディアの見出し

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputate の前庭, tempus viverra turpis.
  1. <ul class = "media-list" >
  2. <liクラス= "メディア" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <divクラス= "メディア本体" >
  7. <h4 class = "media-heading" >メディアの見出し</h4>
  8. ...
  9.  
  10. <!-- ネストされたメディア オブジェクト -->
  11. <divクラス= "メディア" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

ウェルズ

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

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

オプションクラス

2 つのオプションの修飾子クラスを使用して、パディングと丸みを帯びた角を制御します。

ほら、私は井戸の中にいる!
  1. <div class = "十分に大きい" >
  2. ...
  3. </div>
ほら、私は井戸の中にいる!
  1. <div class = "まあまあ小さい" >
  2. ...
  3. </div>

閉じるアイコン

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

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

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

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

ヘルパー クラス

小さな表示または動作の微調整のためのシンプルで焦点を絞ったクラス。

.プルレフト

要素を左にフロート

  1. class = "プルレフト"
  1. . プル-{
  2. フロート:;
  3. }

.プルライト

要素を右にフロート

  1. クラス= "プルライト"
  1. . プル-{
  2. フロート:;
  3. }

.ミュート

要素の色を#999

  1. クラス= 「ミュート」
  1. . ミュート{
  2. : #999;
  3. }

.clearfix

float任意の要素をクリア

  1. クラス= "クリアフィックス"
  1. . クリアフィックス{
  2. *ズーム: 1 ;
  3. &:前に
  4. &: {の
  5. 表示:テーブル;
  6. 内容: 「」;
  7. }
  8. &: {の
  9. クリア:両方;
  10. }
  11. }