コンポーネント
アイコン、ドロップダウン、入力グループ、ナビゲーション、アラートなどを提供するために構築された 12 を超える再利用可能なコンポーネント。
グリフィコン
利用可能なグリフ
Glyphicon Halflings セットからのフォント形式の 250 以上のグリフが含まれています。Glyphiconsハーフリングは通常、無料で入手できませんが、作成者が Bootstrap で無料で入手できるようにしています。感謝の気持ちを込めて、可能な限りGlyphiconsへのリンクを含めてください。
- グリフィコン グリフィコン-アスタリスク
- グリフィコン グリフィコンプラス
- グリフィコン グリフィコン-ユーロ
- グリフィコン glyphicon-eur
- グリフィコン グリフィコンマイナス
- グリフィコン グリフィコン-クラウド
- グリフィコン グリフィコン封筒
- グリフィコン グリフィコン鉛筆
- グリフィコン グリフィコングラス
- グリフィコン グリフィコン音楽
- glyphicon グリフィコン検索
- グリフィコン グリフィコン-ハート
- グリフィコン グリフィコンスター
- グリフィコン グリフィコン-スター-空
- グリフィコン グリフィコン ユーザー
- グリフィコングリフィコンフィルム
- グリフィコン グリフィコン-th-ラージ
- グリフィコン グリフィコン目
- glyphicon glyphicon-th-list
- グリフィコン グリフィコン OK
- グリフィコン グリフィコン-削除
- グリフィコン グリフィコン ズームイン
- グリフィコン グリフィコン-ズームアウト
- グリフィコン グリフィコンオフ
- グリフィコン グリフィコンシグナル
- グリフィコン グリフィコン-コグ
- グリフィコン グリフィコン-ゴミ箱
- グリフィコン グリフィコン ホーム
- glyphicon グリフィコン ファイル
- グリフィコングリフィコン時間
- グリフィコン グリフィコン道路
- glyphicon glyphicon-download-alt
- glyphicon glyphicon-ダウンロード
- グリフィコン グリフィコンのアップロード
- グリフィコン グリフィコン受信箱
- グリフィコン グリフィコン-プレイ-サークル
- グリフィコングリフィコンリピート
- グリフィコン グリフィコン-リフレッシュ
- glyphicon glyphicon-list-alt
- グリフィコン グリフィコンロック
- グリフィコン グリフィコンフラグ
- グリフィコン グリフィコンヘッドフォン
- グリフィコングリフィコンボリュームオフ
- グリフィコン グリフィコン ボリュームダウン
- グリフィコン グリフィコンボリュームアップ
- グリフィコン グリフィコン-qrcode
- グリフィコン グリフィコンバーコード
- グリフィコン グリフィコンタグ
- グリフィコン グリフィコンタグ
- グリフィコン グリフィコンブック
- グリフィコン グリフィコンブックマーク
- グリフィコン グリフィコン印刷
- グリフィコン グリフィコンカメラ
- グリフィコン グリフィコンフォント
- グリフィコン グリフィコン太字
- グリフィコン グリフィコンイタリック
- glyphicon glyphicon-text-height
- glyphicon glyphicon-text-width
- glyphicon glyphicon-align-left
- glyphicon glyphicon-align-center
- glyphicon glyphicon-align-right
- glyphicon glyphicon-align-justify
- グリフィコン グリフィコンリスト
- グリフィコン グリフィコン-インデント-左
- グリフィコン グリフィコン-インデント-右
- グリフィコン グリフィコン-facetime-ビデオ
- グリフィコン グリフィコン画像
- グリフィコン グリフィコン マップ マーカー
- グリフィコン グリフィコン調整
- グリフィコングリフィコンティント
- グリフィコン グリフィコン編集
- グリフィコン グリフィコンシェア
- グリフィコン グリフィコンチェック
- グリフィコン グリフィコン移動
- glyphicon glyphicon-step-backward
- glyphicon glyphicon-fast-backward
- グリフィコン グリフィコン後方
- グリフィコン グリフィコンプレイ
- glyphicon glyphicon-pause
- グリフィコン グリフィコンストップ
- グリフィコン グリフィコンフォワード
- グリフィコン グリフィコン早送り
- glyphicon glyphicon-step-forward
- glyphicon glyphicon-eject
- グリフィコン グリフィコン-シェブロン-左
- グリフィコン グリフィコン-シェブロン-右
- グリフィコン グリフィコンプラス記号
- グリフィコン グリフィコンマイナス記号
- glyphicon glyphicon-remove-sign
- グリフィコン グリフィコン OK サイン
- グリフィコン グリフィコン質問記号
- グリフィコン グリフィコン情報記号
- グリフィコン グリフィコン-スクリーンショット
- glyphicon glyphicon-remove-circle
- グリフィコン グリフィコン OK サークル
- グリフィコン グリフィコン禁止サークル
- グリフィコン グリフィコン-矢印-左
- グリフィコン グリフィコン-矢印-右
- グリフィコン グリフィコン-矢印-上
- グリフィコン グリフィコン矢印ダウン
- glyphicon glyphicon-share-alt
- glyphicon glyphicon-resize-full
- glyphicon glyphicon-resize-small
- グリフィコン グリフィコン感嘆符
- グリフィコン グリフィコンギフト
- グリフィコン グリフィコンの葉
- グリフィコン グリフィコン-火
- glyphicon glyphicon-eye-open
- グリフィコン グリフィコン-目を閉じる
- グリフィコン グリフィコン警告サイン
- グリフィコン グリフィコン平面
- グリフィコン グリフィコンカレンダー
- グリフィコン グリフィコン-ランダム
- グリフィコン グリフィコン コメント
- グリフィコン グリフィコン磁石
- グリフィコン グリフィコン-シェブロン-アップ
- グリフィコン グリフィコン-シェブロン-ダウン
- グリフィコン グリフィコン-リツイート
- glyphicon glyphicon-ショッピングカート
- グリフィコン グリフィコン フォルダを閉じる
- glyphicon glyphicon-folder-open
- glyphicon glyphicon-resize-vertical
- glyphicon glyphicon-resize-horizontal
- グリフィコン グリフィコン-hdd
- グリフィコン グリフィコン-拡声器
- グリフィコン グリフィコン-ベル
- グリフィコン グリフィコン証明書
- グリフィコン グリフィコン サムズアップ
- グリフィコン グリフィコン-サムズダウン
- グリフィコン グリフィコン-右手
- グリフィコン グリフィコン左手
- グリフィコン グリフィコンハンドアップ
- グリフィコン グリフィコンハンドダウン
- glyphicon glyphicon-circle-arrow-right
- glyphicon glyphicon-circle-arrow-left
- glyphicon glyphicon-circle-arrow-up
- グリフィコン グリフィコン-サークル-矢印-下
- グリフィコン グリフィコン グローブ
- グリフィコン グリフィコンレンチ
- グリフィコン グリフィコン-タスク
- グリフィコングリフィコンフィルター
- グリフィコン グリフィコン ブリーフケース
- グリフィコン グリフィコン-フルスクリーン
- グリフィコン グリフィコン ダッシュボード
- グリフィコン グリフィコン-ペーパークリップ
- グリフィコン グリフィコン-ハート-空
- グリフィコン グリフィコンリンク
- グリフィコン グリフィコンフォン
- グリフィコン グリフィコン画鋲
- グリフィコン グリフィコン-米ドル
- グリフィコン グリフィコン-gbp
- グリフィコン グリフィコンソート
- glyphicon glyphicon-sort-by-alphabet
- glyphicon glyphicon-sort-by-alphabet-alt
- グリフィコングリフィコン並べ替え順
- glyphicon glyphicon-sort-by-order-alt
- glyphicon glyphicon-sort-by-attributes
- glyphicon glyphicon-sort-by-attributes-alt
- グリフィコン グリフィコン未チェック
- グリフィコン グリフィコン-エキスパンド
- グリフィコン グリフィコン-折りたたみ-ダウン
- グリフィコン グリフィコンの折りたたみ
- グリフィコン グリフィコン-ログイン
- グリフィコン グリフィコンフラッシュ
- グリフィコン グリフィコン-ログアウト
- グリフィコン glyphicon-new-window
- グリフィコン グリフィコン レコード
- グリフィコン グリフィコン保存
- グリフィコン グリフィコンオープン
- グリフィコン グリフィコン保存
- グリフィコン グリフィコンのインポート
- グリフィコン グリフィコン エクスポート
- グリフィコン グリフィコン送信
- glyphicon glyphicon-フロッピーディスク
- glyphicon glyphicon-floppy-saved
- glyphicon glyphicon-フロッピー-削除
- glyphicon glyphicon-フロッピー-保存
- glyphicon glyphicon-フロッピー-オープン
- グリフィコン グリフィコンクレジットカード
- グリフィコン グリフィコン転送
- グリフィコン グリフィコン カトラリー
- グリフィコン グリフィコンヘッダー
- グリフィコン グリフィコン圧縮
- グリフィコン グリフィコンイヤホン
- グリフィコン glyphicon-phone-alt
- グリフィコン グリフィコンタワー
- グリフィコン グリフィコン統計
- glyphicon glyphicon-sd-ビデオ
- グリフィコン グリフィコン HD ビデオ
- glyphicon glyphicon-subtitles
- グリフィコン グリフィコン-サウンド-ステレオ
- グリフィコン グリフィコン-サウンド-ドルビー
- グリフィコン グリフィコン-サウンド-5-1
- グリフィコン グリフィコン-サウンド-6-1
- グリフィコン グリフィコン-サウンド-7-1
- グリフィコン グリフィコン-著作権マーク
- グリフィコン グリフィコン登録商標
- グリフィコン グリフィコン-クラウド-ダウンロード
- グリフィコン グリフィコン-クラウド-アップロード
- グリフィコン グリフィコン ツリー コニファー
- グリフィコン グリフィコン-ツリー-落葉樹
- グリフィコン グリフィコン-cd
- glyphicon グリフィコン保存ファイル
- glyphicon glyphicon-open-file
- グリフィコン グリフィコンレベルアップ
- グリフィコン グリフィコン コピー
- グリフィコン グリフィコンペースト
- グリフィコン グリフィコンアラート
- グリフィコン グリフィコン イコライザー
- グリフィコン グリフィコンキング
- グリフィコン グリフィコン-クイーン
- グリフィコン グリフィコンポーン
- グリフィコン グリフィコン-ビショップ
- グリフィコン グリフィコン騎士
- glyphicon glyphicon-baby-formula
- グリフィコン グリフィコンテント
- グリフィコン グリフィコン-黒板
- グリフィコン グリフィコン ベッド
- グリフィコン グリフィコン-アップル
- グリフィコン グリフィコン消去
- グリフィコン グリフィコン砂時計
- グリフィコン グリフィコンランプ
- グリフィコン グリフィコンの複製
- グリフィコン グリフィコン貯金箱
- グリフィコン グリフィコンはさみ
- グリフィコン グリフィコン-ビットコイン
- グリフィコン グリフィコン-btc
- グリフィコン グリフィコン-xbt
- グリフィコン グリフィコン円
- グリフィコン glyphicon-jpy
- グリフィコン グリフィコン・ルーブル
- グリフィコン グリフィコンこする
- グリフィコン グリフィコンスケール
- グリフィコン グリフィコン-アイスキャンディー
- グリフィコン グリフィコン アイスキャンディー味
- グリフィコン グリフィコン教育
- glyphicon glyphicon-option-horizontal
- glyphicon glyphicon-option-vertical
- グリフィコン グリフィコン メニュー ハンバーガー
- glyphicon glyphicon-modal-window
- グリフィコン グリフィコンオイル
- グリフィコン グリフィコン粒
- グリフィコン グリフィコン サングラス
- glyphicon glyphicon-text-size
- glyphicon glyphicon-text-color
- glyphicon glyphicon-text-background
- glyphicon glyphicon-object-align-top
- glyphicon glyphicon-object-align-bottom
- glyphicon glyphicon-object-align-horizontal
- glyphicon glyphicon-object-align-left
- glyphicon glyphicon-object-align-vertical
- glyphicon glyphicon-object-align-right
- グリフィコン グリフィコン-三角形-右
- グリフィコン グリフィコン-三角形-左
- グリフィコン グリフィコン-トライアングル-ボトム
- グリフィコン グリフィコン-トライアングル-トップ
- グリフィコン グリフィコン コンソール
- グリフィコン グリフィコン-上付き文字
- glyphicon glyphicon-subscript
- グリフィコン glyphicon-menu-left
- glyphicon glyphicon-menu-right
- glyphicon glyphicon-menu-down
- glyphicon glyphicon-menu-up
使い方
パフォーマンス上の理由から、すべてのアイコンには基本クラスと個々のアイコン クラスが必要です。使用するには、次のコードをほぼ任意の場所に配置します。適切なパディングのために、アイコンとテキストの間に必ずスペースを空けてください。
他の成分と混ぜないでください
アイコン クラスを他のコンポーネントと直接組み合わせることはできません。同じ要素で他のクラスと一緒に使用しないでください。代わりに、ネストされた を追加し<span>、アイコン クラスを に適用します<span>。
空の要素でのみ使用
アイコン クラスは、テキスト コンテンツを含まず、子要素を持たない要素でのみ使用する必要があります。
アイコンのフォントの場所を変更する
Bootstrap は、アイコン フォント ファイルが../fonts/、コンパイルされた CSS ファイルに関連するディレクトリに配置されることを前提としています。これらのフォント ファイルを移動または名前変更することは、次の 3 つの方法のいずれかで CSS を更新することを意味します。
- ソースの Less ファイルの
@icon-font-pathand/or変数を変更します。@icon-font-name - Less コンパイラが提供する相対 URL オプションを利用します。
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も使用できます。
基本的な例
一連のボタンを.btninでラップし.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 のカスタマイズによっては、境界線を削除したり、色を変更したりすることが必要になる場合があります。
IE8 とボーダー
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-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder
基本的な例
入力の両側にアドオンまたはボタンを 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 のセレクターを介して) 単純に折りたたまれます。
クロスブラウザの互換性
:emptyInternet 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 アラート プラグインが必要です
アラートを完全に機能させ、無視できるようにするには、アラート 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 はアニメーションをサポートしていません。
コンテンツ セキュリティ ポリシー (CSP) の互換性
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>メディア オブジェクト
さまざまなタイプのコンポーネント (ブログ コメント、ツイートなど) を構築するための抽象オブジェクト スタイルで、テキスト コンテンツの横に左揃えまたは右揃えの画像を配置します。
デフォルトのメディア
デフォルトのメディアは、メディア オブジェクト (画像、ビデオ、オーディオ) をコンテンツ ブロックの左側または右側に表示します。
メディアの見出し
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. ファウシバスのドネクラシニア・コンゲ・フェリス。
メディアの見出し
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. ファウシバスのドネクラシニア・コンゲ・フェリス。
ネストされたメディアの見出し
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. ファウシバスのドネクラシニア・コンゲ・フェリス。メディアの見出し
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputate の前庭, tempus viverra turpis.
メディアの見出し
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputate の前庭, tempus viverra turpis.
<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.
ネストされたメディアの見出し
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputate の前庭, tempus viverra turpis.
ネストされたメディアの見出し
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputate の前庭, tempus viverra turpis.
ネストされたメディアの見出し
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 を使用して構築します。
- クラス・フスト・オディオ
- Dapibus ac ファシリシス
- Morbi leo risus
- Porta ac consectetur ac
- エロスの前庭
<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>バッジ
バッジ コンポーネントを任意のリスト グループ アイテムに追加すると、自動的に右側に配置されます。
- 14クラス・フスト・オディオ
- 2Dapibus ac ファシリシス
- 1Morbi leo risus
<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ます。
- Dapibus ac ファシリシス
- Cras sit amet nibh libero
- Porta ac consectetur ac
- エロスの前庭
<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.
- クラス・フスト・オディオ
- Dapibus ac ファシリシス
- Morbi leo risus
- Porta ac consectetur ac
- エロスの前庭
<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>