コンポーネント
アイコン、ドロップダウン、入力グループ、ナビゲーション、アラートなどを提供するために構築された 12 を超える再利用可能なコンポーネント。
アイコン、ドロップダウン、入力グループ、ナビゲーション、アラートなどを提供するために構築された 12 を超える再利用可能なコンポーネント。
Glyphicon Halflings セットからのフォント形式の 250 以上のグリフが含まれています。Glyphiconsハーフリングは通常、無料で入手できませんが、作成者が Bootstrap で無料で入手できるようにしています。感謝の気持ちを込めて、可能な限りGlyphiconsへのリンクを含めてください。
パフォーマンス上の理由から、すべてのアイコンには基本クラスと個々のアイコン クラスが必要です。使用するには、次のコードをほぼ任意の場所に配置します。適切なパディングのために、アイコンとテキストの間に必ずスペースを空けてください。
アイコン クラスを他のコンポーネントと直接組み合わせることはできません。同じ要素で他のクラスと一緒に使用しないでください。代わりに、ネストされた を追加し<span>
、アイコン クラスを に適用します<span>
。
アイコン クラスは、テキスト コンテンツを含まず、子要素を持たない要素でのみ使用する必要があります。
Bootstrap は、アイコン フォント ファイルが../fonts/
、コンパイルされた CSS ファイルに関連するディレクトリに配置されることを前提としています。これらのフォント ファイルを移動または名前変更することは、次の 3 つの方法のいずれかで CSS を更新することを意味します。
@icon-font-path
and/or変数を変更します。@icon-font-name
url()
コンパイルされた CSSのパスを変更します。特定の開発設定に最適なオプションを使用してください。
支援技術の最新バージョンは、CSS で生成されたコンテンツと特定の Unicode 文字をアナウンスします。スクリーン リーダーでの意図しない紛らわしい出力を避けるために (特に、アイコンが純粋に装飾目的で使用されている場合)、aria-hidden="true"
属性でそれらを非表示にします。
アイコンを (装飾的な要素としてだけでなく) 意味を伝えるために使用している場合は、この意味が支援技術にも伝えられるようにしてください。たとえば、.sr-only
クラスで視覚的に隠されている追加のコンテンツを含めます。
他のテキストを含まないコントロール (<button>
アイコンのみを含む など) を作成する場合は、コントロールの目的を識別する代替コンテンツを常に提供して、支援技術のユーザーにとって意味のあるものにする必要があります。この場合、aria-label
コントロール自体に属性を追加できます。
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
ボタン、ツールバーのボタン グループ、ナビゲーション、または先頭に追加されたフォーム入力で使用します。
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
エラー メッセージであることを伝えるためにアラートで使用されるアイコンと、.sr-only
このヒントを支援技術のユーザーに伝えるための追加のテキスト。
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
リンクのリストを表示するための切り替え可能なコンテキスト メニュー。ドロップダウン JavaScript プラグインでインタラクティブになりました。
ドロップダウンのトリガーとドロップダウン メニューを.dropdown
、または を宣言する別の要素でラップしposition: relative;
ます。次に、メニューの HTML を追加します。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
.dropup
ドロップダウン メニューは、親に追加することで (下向きではなく) 上向きに展開するように変更できます。
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
デフォルトでは、ドロップダウン メニューは親の左側に沿って上から 100% の位置に自動的に配置されます。ドロップダウン メニューを右揃え.dropdown-menu-right
にするには、aに追加します。.dropdown-menu
ドロップダウンは、CSS を介してドキュメントの通常のフロー内に自動的に配置されます。これは、ドロップダウンが特定のoverflow
プロパティを持つ親によってトリミングされるか、ビューポートの境界外に表示される可能性があることを意味します。これらの問題が発生したら、自分で対処してください。
.pull-right
のアライメントv3.1.0 の時点で、.pull-right
ドロップダウン メニューは非推奨になりました。メニューを右揃えにするには、 を使用します.dropdown-menu-right
。navbar の右揃えの nav コンポーネントは、このクラスの mixin バージョンを使用して、メニューを自動的に揃えます。オーバーライドするには、 を使用します.dropdown-menu-left
。
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
ヘッダーを追加して、ドロップダウン メニューのアクションのセクションにラベルを付けます。
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
ドロップダウン メニューで一連のリンクを分離する仕切りを追加します。
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
リンクを無効にするには、ドロップダウンに を追加.disabled
します。<li>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
ボタン グループを使用して、一連のボタンを 1 行にまとめます。オプションの JavaScript ラジオとチェックボックス スタイルの動作をボタン プラグインで追加します。
内の要素でツールヒントまたはポップオーバーを使用する場合、不要な副作用 (ツールヒントまたはポップオーバーがトリガーされたときに要素が広くなったり、丸みを帯びた角が失われたりするなど) を回避.btn-group
するオプションを指定する必要があります。container: 'body'
role
し、ラベルを提供する一連のボタンがグループ化されていることをスクリーン リーダーなどの支援技術で伝えるには、適切なrole
属性を指定する必要があります。ボタン グループの場合、これは になりますがrole="group"
、ツールバーにはrole="toolbar"
.
1 つの例外は、単一のコントロール (たとえば、要素を持つ正当化されたボタン グループ) またはドロップダウンのみを含むグループです。<button>
role
さらに、グループとツールバーには明示的なラベルを付ける必要があります。これは、適切な属性が存在するにもかかわらず、ほとんどの支援技術が通知しないためです。ここに示す例では、 を使用していますaria-label
が、 などの代替aria-labelledby
も使用できます。
一連のボタンを.btn
inでラップし.btn-group
ます。
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
のセットをに結合<div class="btn-group">
して<div class="btn-toolbar">
、より複雑なコンポーネントを作成します。
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
グループ内のすべてのボタンにボタン サイズ変更クラスを適用する代わりに、複数のグループをネストする場合を含め、.btn-group-*
各 に追加するだけです。.btn-group
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
ドロップダウン メニューと一連のボタンを組み合わせたい場合は、.btn-group
を別のメニュー内に配置します。.btn-group
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
ボタンのセットを水平ではなく垂直に積み重ねて表示します。ここでは分割ボタンのドロップダウンはサポートされていません。
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
ボタンのグループを同じサイズで伸ばして、親の幅全体に広げます。ボタン グループ内のボタン ドロップダウンでも機能します。
ボタンを正当化するために使用される特定の HTML および CSS (つまりdisplay: table-cell
) により、それらの間の境界線が 2 重になっています。通常のボタン グループでmargin-left: -1px
は、境界線を削除する代わりに積み重ねるために使用されます。ただし、margin
では動作しませんdisplay: table-cell
。その結果、Bootstrap のカスタマイズによっては、境界線を削除したり、色を変更したりすることが必要になる場合があります。
Internet Explorer 8 は、位置合わせされたボタン グループ内のボタンがオンである<a>
か<button>
要素であるかに関係なく、ボタンの境界線をレンダリングしません。これを回避するには、各ボタンを別の でラップします.btn-group
。
詳細については、 #12476を参照してください。
<a>
付き一連の をラップするだけ.btn
です.btn-group.btn-group-justified
。
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
要素がボタンとして機能するために使用される場合<a>
(現在のページ内の別のドキュメントまたはセクションに移動するのではなく、ページ内機能をトリガーする場合)、それらにも適切な を与える必要がありますrole="button"
。
<button>
付き両端揃えボタン グループを<button>
要素で使用するには、各ボタンをボタン グループでラップする必要があります。ほとんどのブラウザーは要素の正当化のために CSS を適切に適用しません<button>
が、ボタンのドロップダウンをサポートしているため、これを回避できます。
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
任意のボタンを使用してドロップダウン メニューをトリガーします。ドロップダウン メニューを 内に配置し.btn-group
、適切なメニュー マークアップを提供します。
ボタン ドロップダウンでは、Bootstrap のバージョンにドロップダウン プラグインを含める必要があります。
いくつかの基本的なマークアップの変更を加えて、ボタンをドロップダウン トグルに変えます。
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
同様に、同じマークアップの変更で分割ボタンのドロップダウンを作成し、別のボタンのみを使用します。
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
ボタンのドロップダウンは、あらゆるサイズのボタンで機能します。
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
.dropup
親に追加して、要素の上にあるドロップダウン メニューをトリガーします。
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
テキストベースの の前、後、または両側にテキストまたはボタンを追加して、フォーム コントロールを拡張します<input>
。または.input-group
と一緒に使用して、要素を単一の の前または後に追加します。.input-group-addon
.input-group-btn
.form-control
<input>
のみ<select>
WebKit ブラウザーでは完全にスタイルを設定できないため、ここで要素を使用することは避けてください。
場合によっては属性が考慮されないため<textarea>
、ここで要素を使用しないでください。rows
内の要素でツールチップまたはポップオーバーを使用する場合、望ましくない副作用 (ツールチップまたはポップオーバーがトリガーされたときに要素が広くなったり、丸みを帯びた角が失われたりするなど) を回避.input-group
するオプションを指定する必要があります。container: 'body'
フォーム グループまたはグリッド列クラスを入力グループと直接混合しないでください。代わりに、フォーム グループまたはグリッド関連の要素内に入力グループを入れ子にします。
すべての入力にラベルを含めないと、スクリーン リーダーでフォームに問題が発生します。これらの入力グループについて、追加のラベルまたは機能が支援技術に伝達されるようにします。
使用する正確な手法 (可視<label>
要素、クラス<label>
を使用して非表示の要素、または、、、または属性の使用) と伝達する必要がある追加情報は、実装するインターフェイス ウィジェットの正確なタイプによって異なります。このセクションの例では、いくつかの推奨されるケース固有のアプローチを示します。.sr-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
入力の両側にアドオンまたはボタンを 1 つ配置します。入力の両側に配置することもできます。
1 つのサイドで複数のアドオン (.input-group-addon
または) をサポートしていません。.input-group-btn
1 つの入力グループでの複数のフォーム コントロールはサポートされていません。
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
相対フォーム サイズ クラスを.input-group
それ自体に追加すると、その中のコンテンツが自動的にサイズ変更されます。各要素でフォーム コントロール サイズ クラスを繰り返す必要はありません。
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
テキストの代わりに、入力グループのアドオン内にチェックボックスまたはラジオ オプションを配置します。
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
入力グループのボタンは少し異なり、ネストの追加レベルが 1 つ必要です。の代わりに、 を使用してボタンをラップする.input-group-addon
必要があります。.input-group-btn
これは、オーバーライドできないデフォルトのブラウザー スタイルのために必要です。
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
サイドごとに 1 つのアドオンしか持つことができませんが、1 つの 内に複数のボタンを持つことができます.input-group-btn
。
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
Bootstrap で使用可能な Nav には、基本.nav
クラスから始まる共有マークアップと共有状態があります。モディファイヤ クラスを交換して、各スタイルを切り替えます。
クラスには基本クラス.nav-tabs
が必要であることに注意してください。.nav
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
同じ HTML を使用しますが、.nav-pills
代わりに次を使用します。
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
錠剤は縦に積み重ねることもできます。追加するだけ.nav-stacked
です。
<ul class="nav nav-pills nav-stacked">
...
</ul>
を使用して、768px よりも幅の広い画面で、タブまたはピルを親と同じ幅に簡単に作成できます.nav-justified
。小さい画面では、ナビゲーション リンクが積み重ねられます。
正当化された navbar nav リンクは現在サポートされていません。
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
任意のナビゲーション コンポーネント (タブまたはピル) については、灰色のリンクとホバー効果なし.disabled
を追加します。
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
少し余分な HTML とドロップダウン JavaScript プラグインを使用してドロップダウン メニューを追加します。
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
ナビゲーション バーは、アプリケーションまたはサイトのナビゲーション ヘッダーとして機能するレスポンシブ メタ コンポーネントです。それらはモバイル ビューでは折りたたまれており (トグル可能)、使用可能なビューポートの幅が増えると水平になります。
正当化された navbar nav リンクは現在サポートされていません。
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
テキストを<img>
. に.navbar-brand
は独自のパディングと高さがあるため、画像によっては一部の CSS をオーバーライドする必要がある場合があります。
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
フォーム コンテンツを配置し.navbar-form
て、適切な垂直方向の配置と、狭いビューポートでの折りたたまれた動作を実現します。配置オプションを使用して、navbar コンテンツ内のどこに配置するかを決定します。
注意点として、そのコードの多くを mixin 経由で.navbar-form
共有しています。入力グループなどの一部のフォーム コントロールでは、navbar 内に適切に表示するために固定幅が必要になる場合があります。.form-inline
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
a に存在しない要素に.navbar-btn
クラスを追加して、navbar の垂直方向の中央に配置します。<button>
<form>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
要素内のテキスト文字列を で囲みます.navbar-text
。通常は、<p>
適切な行送りと色のためにタグで囲みます。
<p class="navbar-text">Signed in as Mark Otto</p>
通常の navbar ナビゲーション コンポーネント内にない標準リンクを使用している場合は、この.navbar-link
クラスを使用して、デフォルトおよび逆の navbar オプションに適切な色を追加します。
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
.navbar-left
または.navbar-right
ユーティリティ クラスを使用して、ナビゲーション リンク、フォーム、ボタン、またはテキストを整列します。どちらのクラスも、指定された方向に CSS フロートを追加します。たとえば、ナビゲーション リンクを整列させるには<ul>
、それぞれのユーティリティ クラスを適用して別々に配置します。
.pull-left
これらのクラスはとのミックスイン バージョンです.pull-right
が、デバイス サイズ全体でナビゲーション バー コンポーネントを簡単に処理できるように、メディア クエリにスコープが設定されています。
またはを追加.navbar-fixed-top
して、ナビゲーション バーのコンテンツの中央とパッドに追加します。.container
.container-fluid
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
またはを追加.navbar-fixed-bottom
して、ナビゲーション バーのコンテンツの中央とパッドに追加します。.container
.container-fluid
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
またはを追加.navbar-static-top
してページとともにスクロールする全幅のナビゲーション バーを作成し、ナビゲーション バーのコンテンツを中央に配置して埋め込みます。.container
.container-fluid
クラスとは異なり、 の.navbar-fixed-*
パディングを変更する必要はありませんbody
。
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
を追加して、ナビゲーション バーの外観を変更します.navbar-inverse
。
<nav class="navbar navbar-inverse">
...
</nav>
ナビゲーション階層内の現在のページの場所を示します。
区切り記号は、:before
およびを介して CSS に自動的に追加されcontent
ます。
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
複数ページのページネーション コンポーネント、またはよりシンプルなページャーの代替手段を使用して、サイトまたはアプリのページネーション リンクを提供します。
アプリや検索結果に最適な、Rdio にインスパイアされたシンプルなページネーション。大きなブロックは見逃しにくく、簡単に拡張でき、大きなクリック領域を提供します。
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><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="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<nav>
ページネーション コンポーネントは、スクリーン リーダーやその他の支援技術へのナビゲーション セクションとして識別するために、要素でラップする必要があります。さらに、ページには既に複数のナビゲーション セクション (ヘッダーのプライマリ ナビゲーションやサイドバー ナビゲーションなど) がある可能性が高いため、その目的を反映する説明aria-label
を提供することをお勧めします。<nav>
たとえば、一連の検索結果間を移動するためにページネーション コンポーネントが使用されている場合、適切なラベルはaria-label="Search results pages"
.
リンクはさまざまな状況に合わせてカスタマイズできます。.disabled
クリックできないリンクに使用し.active
、現在のページを示します。
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
のアクティブまたは無効なアンカーを交換するか<span>
、前後の矢印の場合はアンカーを省略して、意図したスタイルを維持しながらクリック機能を削除することをお勧めします。
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
ページネーションを大きくしたり小さくしたりしたいですか?追加のサイズについては、.pagination-lg
またはを追加してください。.pagination-sm
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
軽いマークアップとスタイルを使用した単純なページネーションの実装のためのクイック前と次のリンク。ブログや雑誌などのシンプルなサイトに最適です。
デフォルトでは、ページャーはリンクを中央に配置します。
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
または、各リンクを左右に揃えることもできます。
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
ページャー リンクも.disabled
、ページネーションの一般的なユーティリティ クラスを使用します。
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
以下の修飾子クラスのいずれかを追加して、ラベルの外観を変更します。
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
狭いコンテナー内に多数のインライン ラベルがあり、それぞれに独自のinline-block
要素 (アイコンなど) が含まれている場合、レンダリングの問題が発生する可能性があります。これを回避する方法は、設定display: inline-block;
です。コンテキストと例については、 #13219 を参照してください。
<span class="badge">
リンク、Bootstrap ナビゲーションなどに を追加して、新しいアイテムや未読のアイテムを簡単に強調表示します。
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
新しいアイテムや未読のアイテムがない場合:empty
、コンテンツが存在しない場合、バッジは (CSS のセレクターを介して) 単純に折りたたまれます。
:empty
Internet Explorer 8 ではセレクターがサポートされていないため、バッジは自動的に折りたたまれません。
ピル ナビゲーションでバッジをアクティブな状態に配置するための組み込みスタイルが含まれています。
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
オプションでビューポート全体を拡張して、サイトの主要なコンテンツを表示できる、軽量で柔軟なコンポーネントです。
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
ジャンボトロンを全幅にし、角を丸くしないようにするには、すべて.container
の の外側に配置し、代わりに を内側に追加し.container
ます。
<div class="jumbotron">
<div class="container">
...
</div>
</div>
h1
ページ上のコンテンツのセクションを適切に間隔をあけてセグメント化するための単純なシェル。h1
のデフォルトsmall
要素だけでなく、他のほとんどのコンポーネント (追加のスタイルを含む)も利用できます。
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Bootstrap のグリッド システムをサムネイル コンポーネントで拡張して、画像、ビデオ、テキストなどのグリッドを簡単に表示します。
さまざまな高さや幅のサムネイルの Pinterest のようなプレゼンテーションを探している場合は、 Masonry 、 Isotope 、または Salvattore などのサードパーティのプラグインを使用する必要があります。
デフォルトでは、Bootstrap のサムネイルは、必要最小限のマークアップでリンクされた画像を表示するように設計されています。
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
マークアップを少し追加するだけで、見出し、段落、ボタンなど、あらゆる種類の HTML コンテンツをサムネイルに追加できます。
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
少数の利用可能で柔軟なアラート メッセージを使用して、典型的なユーザー アクションに対してコンテキスト フィードバック メッセージを提供します。
任意のテキストとオプションの閉じるボタンを、基本的なアラート メッセージ.alert
の 4 つのコンテキスト クラス (例: ) の 1 つにラップします。.alert-success
アラートにはデフォルト クラスはなく、基本クラスと修飾子クラスのみがあります。デフォルトの灰色のアラートはあまり意味がないため、コンテキスト クラスを介してタイプを指定する必要があります。成功、情報、警告、または危険から選択します。
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
オプション.alert-dismissible
の閉じるボタンを追加して、アラートを作成します。
アラートを完全に機能させ、無視できるようにするには、アラート JavaScript プラグインを使用する必要があります。
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
必ずdata 属性<button>
を持つ要素を使用してください。data-dismiss="alert"
ユーティリティ クラスを使用して、.alert-link
アラート内に一致する色のリンクをすばやく提供します。
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
シンプルで柔軟な進行状況バーを使用して、ワークフローまたはアクションの進行状況に関する最新のフィードバックを提供します。
プログレス バーは、CSS3 トランジションとアニメーションを使用して、その効果の一部を実現します。これらの機能は、Internet Explorer 9 以前またはそれ以前のバージョンの Firefox ではサポートされていません。Opera 12 はアニメーションをサポートしていません。
Web サイトに を許可しないコンテンツ セキュリティ ポリシー (CSP)がある場合、以下の例に示すように、style-src 'unsafe-inline'
インライン属性を使用してプログレス バーの幅を設定することはできません。style
厳密な CSP と互換性のある幅を設定するための代替方法には、小さなカスタム JavaScript ( を設定するelement.style.width
) を使用するか、カスタム CSS クラスを使用することが含まれます。
デフォルトの進行状況バー。
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<span>
プログレス バー内からwithクラスを削除して、.sr-only
パーセンテージを表示します。
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
パーセンテージが低い場合でもラベル テキストが判読できるようにするmin-width
には、進行状況バーに を追加することを検討してください。
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
プログレス バーは、一貫したスタイルを実現するために、同じボタン クラスとアラート クラスの一部を使用します。
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
グラデーションを使用してストライプ効果を作成します。IE9 以下では使用できません。
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
を追加.active
し.progress-bar-striped
て、ストライプを右から左にアニメーション化します。IE9 以下では使用できません。
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
複数のバーを同じ.progress
ものに配置して積み重ねます。
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
さまざまなタイプのコンポーネント (ブログ コメント、ツイートなど) を構築するための抽象オブジェクト スタイルで、テキスト コンテンツの横に左揃えまたは右揃えの画像を配置します。
デフォルトのメディアは、メディア オブジェクト (画像、ビデオ、オーディオ) をコンテンツ ブロックの左側または右側に表示します。
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
クラス.pull-left
および.pull-right
も存在し、以前はメディア コンポーネントの一部として使用されていましたが、v3.3.0 の時点でその使用は推奨されていません。これらは と.media-left
とほぼ同じですが、html の の後に配置.media-right
する必要があります。.media-right
.media-body
画像またはその他のメディアは、上、中央、または下に配置できます。デフォルトは上揃えです。
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. ファウシバスのドネクラシニア・コンゲ・フェリス。
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nasceturridiculus mus.
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. ファウシバスのドネクラシニア・コンゲ・フェリス。
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nasceturridiculus mus.
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. ファウシバスのドネクラシニア・コンゲ・フェリス。
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nasceturridiculus mus.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
少しマークアップを追加すると、リスト内でメディアを使用できます (コメント スレッドや記事リストに役立ちます)。
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputate の前庭, tempus viverra turpis.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
リスト グループは、要素の単純なリストだけでなく、カスタム コンテンツを含む複雑なリストを表示するための柔軟で強力なコンポーネントです。
最も基本的なリスト グループは、リスト アイテムと適切なクラスを含む単純な順序付けられていないリストです。それに続くオプション、または必要に応じて独自の CSS を使用して構築します。
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
バッジ コンポーネントを任意のリスト グループ アイテムに追加すると、自動的に右側に配置されます。
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
リスト アイテムの代わりにアンカー タグを使用して、リスト グループ アイテムをリンクします (これは、 の<div>
代わりに親を意味し<ul>
ます)。各要素の周りに個別の親は必要ありません。
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
リスト グループ アイテムは、リスト アイテムの代わりにボタンにすることができます (これは、 の<div>
代わりに親を意味し<ul>
ます)。各要素の周りに個別の親は必要ありません。ここでは標準クラスを使用しないでください。.btn
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
に追加.disabled
すると、.list-group-item
グレー表示されて無効に表示されます。
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
コンテキスト クラスを使用して、デフォルトまたはリンクされたリスト アイテムのスタイルを設定します。状態も含まれ.active
ます。
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
以下のようなリンクされたリスト グループであっても、ほぼすべての HTML を内部に追加します。
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
常に必要というわけではありませんが、DOM をボックスに入れる必要がある場合があります。そのような状況では、パネル コンポーネントを試してください。
デフォルトでは、.panel
基本的なボーダーとパディングを適用してコンテンツを含めるだけです。
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
を使用して、見出しコンテナーをパネルに簡単に追加します.panel-heading
。事前にスタイル設定された見出しを追加するクラスを使用して、任意の<h1>
-<h6>
を含めることもできます。.panel-title
ただし、<h1>
-のフォント サイズは<h6>
によって上書きされ.panel-heading
ます。
リンクの色を適切に設定するには、必ず 内の見出しにリンクを配置して.panel-title
ください。
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
ボタンまたはセカンダリ テキストを でラップします.panel-footer
。パネル フッターは、前景にあることが意図されていないため、コンテキスト バリエーションを使用する場合、色と境界線を継承しないことに注意してください。
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
他のコンポーネントと同様に、コンテキスト状態クラスを追加することで、パネルを特定のコンテキストにとってより意味のあるものにすることが簡単にできます。
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
.table
シームレスなデザインのために、パネル内に非境界線を追加します。がある場合は、.panel-body
区切りのために表の上部に余分な境界線を追加します。
ここにいくつかのデフォルトのパネル コンテンツがあります。Nulla vitae elit libero、pharetra augue。Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam。Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# | ファーストネーム | 苗字 | ユーザー名 |
---|---|---|---|
1 | マーク | オットー | @mdo |
2 | ジェイコブ | ソーントン | @太い |
3 | ラリー | 鳥 | @ツイッター |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
パネル本体がない場合、コンポーネントは中断することなくパネル ヘッダーからテーブルに移動します。
# | ファーストネーム | 苗字 | ユーザー名 |
---|---|---|---|
1 | マーク | オットー | @mdo |
2 | ジェイコブ | ソーントン | @太い |
3 | ラリー | 鳥 | @ツイッター |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
任意のパネル内に全幅のリスト グループを簡単に含めることができます。
ここにいくつかのデフォルトのパネル コンテンツがあります。Nulla vitae elit libero、pharetra augue。Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam。Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
どのデバイスでも適切にスケーリングされる固有の比率を作成することにより、ブラウザーが含まれているブロックの幅に基づいてビデオまたはスライドショーのサイズを決定できるようにします。
<iframe>
ルールは、<embed>
、<video>
、および<object>
要素に直接適用されます。.embed-responsive-item
他の属性のスタイルを一致させたい場合は、オプションで明示的な子孫クラスを使用します。
プロのヒント!を上書きするframeborder="0"
ので、 sに含める必要はありません。<iframe>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>