Bootstrap には、ナビゲーション、アラート、ポップオーバーなどを提供するために、何十もの再利用可能なコンポーネントが組み込まれています。
アプリや検索結果に最適な、Rdio にインスパイアされた非常に単純化された最小限のスタイルのページネーション。大きなブロックは見逃しにくく、簡単に拡張でき、大きなクリック領域を提供します。
リンクはカスタマイズ可能で、適切なクラスのさまざまな状況で機能します。.disabled
クリックできないリンクと.active
現在のページ。
ページネーション リンクの配置を変更するには、2 つのオプション クラスのいずれかを追加します:.pagination-centered
と.pagination-right
.
でラップされ<div>
、ページネーションは単なる<ul>
.
- <divクラス= "ページネーション" >
- <ul>
- <li><a href = "#" >前へ</a></li>
- <li class = "active" >
- <a href = "#" > 1 </a>
- </li>
- <li><a href = "#" > 2 </a></li>
- <li><a href = "#" > 3 </a></li>
- <li><a href = "#" > 4 </a></li>
- <li><a href = "#" >次へ</a></li>
- </ul>
- </div>
pager コンポーネントは、軽いマークアップとさらに軽いスタイルを使用した単純なページネーションの実装のための一連のリンクです。ブログや雑誌などのシンプルなサイトに最適です。
デフォルトでは、ページャーはリンクを中央に配置します。
- <ul class = "ポケットベル" >
- <リ>
- <a href = "#" >前へ</a>
- </li>
- <リ>
- <a href = "#" >次へ</a>
- </li>
- </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> |
Bootstrap は、サイトでコンテンツを紹介するための、ヒーロー ユニットと呼ばれる軽量で柔軟なコンポーネントを提供します。マーケティングやコンテンツの多いサイトでうまく機能します。
div
コンテンツを次のようにラップします。
- <divクラス= "ヒーローユニット" >
- <h1>見出し</h1>
- <p>キャッチフレーズ</p>
- <p>
- <a class = "btn btn-primary btn-large" >
- もっと詳しく知る
- </a>
- </p>
- </div>
h1
ページ上のコンテンツのセクションを適切に間隔を空けてセグメント化するための単純なシェル。h1
のデフォルトのsmall
, 要素だけでなく、他のほとんどのコンポーネント (追加のスタイルを使用)も利用できます。
- <div class = "page-haeder" >
- <h1>ページ ヘッダーの例</h1>
- </div>
マークアップを少し追加するだけで、見出し、段落、ボタンなど、あらゆる種類の HTML コンテンツをサムネイルに追加できます。
サムネイル (以前.media-grid
は v1.4 まで) は、写真やビデオのグリッド、画像検索結果、小売製品、ポートフォリオなどに最適です。リンクまたは静的コンテンツにすることができます。
サムネイル マークアップは単純です。ul
任意の��のli
要素を使用するだけで十分です。また、非常に柔軟で、コンテンツをラップするためのマークアップを少し追加するだけで、あらゆるタイプのコンテンツを使用できます。
.span2
最後に、サムネイル コンポーネントは、またはのような既存のグリッド システム クラスを使用して.span3
、サムネイルの寸法を制御します。
前述のように、サムネイルに必要なマークアップは軽くて簡単です。リンクされた画像のデフォルト設定は次のとおりです。
- <ul class = "サムネイル" >
- <li class = "span3" >
- <a href = "#" class = "サムネイル" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
サムネイルのカスタム HTML コンテンツの場合、マークアップがわずかに変更されます。どこでもブロック レベルのコンテンツを許可するには、を次<a>
の<div>
ように交換します。
- <ul class = "サムネイル" >
- <li class = "span3" >
- <divクラス= "サムネイル" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5>サムネイル ラベル</h5>
- <p>ここにサムネイルのキャプション... </p>
- </div>
- </li>
- ...
- </ul>
Bootstrap 2 では、基本クラスを簡素化しました:.alert
の代わりに.alert-message
. <p>
また、最低限必要なマークアップを削減しました。デフォルトでは必要ありません。outerのみです<div>
。
より少ないコードでより耐久性のあるコンポーネントを実現するために、ブロック アラートの差別化された外観、より多くのパディングと通常はより多くのテキストが付属するメッセージを削除しました。クラスも に変わりました.alert-block
。
Bootstrap には、アラート メッセージをサポートする優れた jQuery プラグインが付属しており、アラート メッセージをすばやく簡単に閉じることができます。
メッセージとオプションの閉じるアイコンを単純なクラスの div でラップします。
- <divクラス= "アラート" >
- <a class = "close" data-dismiss = "alert" > × </a>
- <strong>警告!</strong>自分で確認してください。あなたはあまり格好良くありません。
- </div>
.alert-block
追加のパディングとテキスト コントロール、および.alert-heading
一致する見出しの2 つのオプション クラスを使用して、標準のアラート メッセージを簡単に拡張します。
自分でチェックするのが一番です、あなたはあまりよく見えません。Nulla vitae elit libero、pharetra augue。Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <divクラス= "アラート アラート ブロック" >
- <a class = "close" data-dismiss = "alert" > × </a>
- <h4 class = "alert-heading" >警告! </h4>
- 自分で確認してください、あなたはそうではありません...
- </div>
垂直グラデーションのデフォルトの進行状況バー。
- <divクラス= "進捗" >
- <divクラス= "バー"
- スタイル= "幅: 60 %; " ></div>
- </div>
グラデーションを使用してストライプ効果を作成します。
- <div class = "progress 進捗情報
- プログレスストライプ" >
- <divクラス= "バー"
- スタイル= "幅: 20 %; " ></div>
- </div>
縞模様の例を取り上げてアニメーション化します。
- <div class = "progress progress-danger
- プログレスストライプアクティブ" >
- <divクラス= "バー"
- スタイル= "幅: 40 %; " ></div>
- </div>
プログレス バーは、スタイルが似ているボタンやアラートと同じクラス名の一部を使用します。
.progress-info
.progress-success
.progress-danger
または、LESS ファイルをカスタマイズして、独自の色とサイズを作成することもできます。
プログレス バーは CSS3 トランジションを使用しているため、javascript で幅を動的に調整すると、スムーズにサイズ変更されます。
.active
このクラスを使用すると、.progress-striped
プログレス バーのストライプが左から右にアニメーション化されます。
プログレス バーは、CSS3 グラデーション、トランジション、およびアニメーションを使用して、すべての効果を実現します。これらの機能は、IE7-8 以前のバージョンの Firefox ではサポートされていません。
現在、Opera はアニメーションをサポートしていません。
要素に挿入効果を与える単純な効果としてウェルを使用します。
- <divクラス= "まあ" >
- ...
- </div>