Glyphicon

利用できるグリフ

Glyphicon Halflings セットから、200個のグリフがフォントフォーマットで用意されています。Glyphicon Halflings は通常は無料で利用できませんが、クリエイターが Bootstrap のために無料で利用できるようにしてくれました。感謝の印として、いつでも可能であれば Glyphicons へのリンクを入れるようにお願いします。

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-envelope
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-music
  • glyphicon glyphicon-search
  • glyphicon glyphicon-heart
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-empty
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-trash
  • glyphicon glyphicon-home
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-headphones
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-picture
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-adjust
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-fast-forward
  • glyphicon glyphicon-step-forward
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-arrow-left
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon-gift
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-eye-open
  • glyphicon glyphicon-eye-close
  • glyphicon glyphicon-warning-sign
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-calendar
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-certificate
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-hand-left
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-circle-arrow-right
  • glyphicon glyphicon-circle-arrow-left
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-circle-arrow-down
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-tasks
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-briefcase
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-heart-empty
  • glyphicon glyphicon-link
  • glyphicon glyphicon-phone
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-sort-by-alphabet
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-unchecked
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-record
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon-saved
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-saved
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-tower
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitles
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-tree-deciduous

使い方

パフォーマンスの関係で、全てのアイコンは基本クラスと個々のアイコン・クラスを必要とします。使うためには、使いたい所に以下のコードを配置してください。適切なパディングのために、アイコンとテキストの間にスペースを入れるようにしてください。

他のコンポーネントと一緒に使わないでください

アイコン・クラスは他のコンポーネントと直接結合できません。同じ要素の上で他のクラスと一緒に使われるべきではありません。その代わりに、ネストさせた <span> を加えて、アイコン・クラスを <span> に適用してください。

空の要素の上でのみ使えます

アイコン・クラスは、テキスト・コンテンツを含まない子要素を持たない要素の上でのみ使われるべきです。

アイコン・フォントの場所の変更

Bootstrap は、アイコン・フォントのファイルがコンパイル済みの CSS ファイルから相対的に fonts/ ディレクトリにあることを想定しています。それらのフォント・ファイルを移動したりリネームしたりすることが CSS をアップデートする意味になるのは、3つの方法の内の1つです:

  • @icon-font-path か Less のソース・ファイルの @icon-font-name 変数を変更する。
  • Less コンパイラに提供されている相対 URL オプションを利用する。
  • コンパイル済みの CSS の url() パスを変更する。

あなたの開発環境のセットアップに最適な選択肢を選んでください。

アクセスできるアイコン

支援技術の最新版は、特定のユニコード文字と同様に、CSS がコンテンツを生成したと言うでしょう。読み上げソフトにおいて意図的でなかったり混乱させる出力(特にアイコンが純粋に装飾に使われている場合)を避けるために、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 プラグインでインタラクティブ。

ドロップダウンのトリガーとドロップダウン・メニューを .dropdownposition: relative; を宣言している他の要素で括ります。そして、メニューの HTML を追加します。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

デフォルトでは、ドロップダウン・メニューは自動的にトップから 100%、その親要素の左側に沿って位置します。ドロップダウン・メニューを右寄せするには、.dropdown-menu.dropdown-menu-right を追加します。

追加の位置指定が必要になるかも知れません

ドロップダウンは CSS によって自動的にドキュメントの通常の流れの中で配置されます。これは、ドロップダウンが親要素によって確かな overflow 属性もしくはビューポートの境界の現れでクロップされているかもしれないことを意味します。動作が自分の思うようになるように処理してください。

推奨しない .pull-right 配置

v3.1.0 の時点で、ドロップダウン・メニューの .pull-right は推奨していません。メニューを右に配置するには、.dropdown-menu-right を使います。右に配置されたナビバーのナビ・コンポーネントは、このクラスの mixin バージョンを使って自動的にメニューを配置しています。上書きするには、.dropdown-menu-left を使います。

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

任意のドロップダウン・メニューのアクションのラベル・セクションに見出しを加えます。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  ...
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  ...
</ul>

ドロップダウン・メニューの一連のリンクを分けるためにディバイダを加えます。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="presentation" class="divider"></li>
  ...
</ul>

リンクを無効にするには、ドロップダウンの <li>.disabled を加えます。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>

ボタン・グループ

ボタン・グループで一連のボタンを一列にまとめます。ボタン・プラグインで、オプションの JavaScript のラジオボタンとチェックボックスによる振る舞いを加えます。

ボタン・グループのツールチップとポップオーバーは、特別の設定が必要です

.btn-group の中で要素にツールチップやポップオーバーを使う場合は、不必要な副作用(ツールチップやポップオーバーの起動時に要素が広くなったり角丸がなくなったり)を避けるために container: 'body' オプションを指定しなければなりません。

正しい role を保証してラベルを提供する

読み上げソフトのような支援技術に一連のボタンがグループになっていることを伝えるために、適切な role 属性を提供する必要があります。ボタン・グループの場合、これは role="group" になり、ツールバーは role="toolbar" であるべきです。

唯一の例外は、単一のコントロール(例えば <button> 要素で調整済みのボタン・グループ)か1つのドロップダウンしかないグループです。

それに加えて、グループとツールバーは、正しい role 属性があるにもかかわらず、たいていの支援技術が別のやり方で読み上げないように明確なラベルを与えられるべきです。ここで紹介している例では aria-label を使っていますが、aria-labelledby でもかまいません。

基本例

.btn-group の中の一連のボタンを .btn で括ります。

<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-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="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 )の位置を揃えるせいで、境界が二重になります。標準のボタン・グループでは、これを取り除く代わりに margin-left: -1px を使って境界を積み上げます。しかし、margindisplay: table-cell と一緒に機能しません。その結果、境界を取り除くか塗り直すかは Bootstrap へのカスタマイズ次第になります。

IE8 と境界

Internet Explorer 8 は、位置調整されたボタン・グループのボタンの境界が <a><button> 要素にあってもレンダリングしません。これを回避するには、他の .btn-group のそれぞれのボタンを括ります。

詳細は、#12476 をご覧ください。

<a> 要素

.btn-group.btn-group-justified の中の一連の .btn を括るだけです。

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

ボタンとして振る舞うリンク

もし、<a> 要素が、カレント・ページの他のドキュメントやセクションをナビゲートするよりページ内の機能のトリガーのためのボタンとして使われている場合は、適切な role="button" も与えられているべきです。

<button> 要素

<button> 要素と一緒に位置調整されたボタン・グループを使うには、ボタン・グループのそれぞれのボタンを括らなければいけません。たいていのブラウザは <button> 要素の位置調整のために正しく CSS を適用しませんが、ボタン・ドロップダウンをサポートしているので、回避することができます。

<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-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li 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-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li 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-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="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-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="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-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="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-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

入力グループ

テキスト・ベースの <input> の前や後や両方にテキストやボタンを追加することで、フォーム・コントロールを拡張します。 単一の .form-control の前や後に要素を追加するために、.input-group-addon と一緒に .input-group を使います。

テキストの <input> のみ

WebKit ブライザでは完全にスタイリングできないので、ここで <select> 要素を使うのは避けてください。

rows 属性がいくつかのケースで尊重されないので、ここで <textarea> 要素を使うのは避けてください。

入力グループ内のツールチップやポップオーバーには特別な設定が必要

.input-group の中の要素にツールチップやポップオーバーを使うときは、(ツールチップやポップオーバーが起動されたときに、要素が大きくなったり角丸がなくなったりといった)期待しない副作用を避けるために container: 'body' オプションを指定しなければいけません。

他のコンポーネントと組み合わせない

フォーム・グループやグリッド・カラム・クラスを直接入力グループと組み合わせないでください。その代わりに、フォーム・グループやグリッドが関係する要素の内側で入力グループをネストしてください。

常にラベルを追加する

もし入力それぞれにラベルがなかったら、読み上げソフトは困難に見舞われます。こうした入力グループには、追加のラベルや機能を支援技術に伝えることを確実にしてください。

( .sr-only クラスを使って見えなくした <label> 要素や aria-labelaria-labelledbyaria-describedbytitleplaceholder の使用といった) 使われるべき正確な技術と伝えるべき追加情報は、実装するインターフェース・ウィジェットの正確な型によって変化します。 このセクションの例では、少しの提案と特定の場合のアプローチを提供しています。

基本例

入力の片側にアドオンやボタンを配置します。入力の両側に配置してもかまいません。

片側に複数のアドオンを配置するのはサポートしていません。

単一の入力グループに複数のフォーム・コントロールを配置するのはサポートしていません。

@

@example.com

$ .00
<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>

サイズ変更

相対的にフォームのサイズを変更するクラスを .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 -->

ボタンのアドオン

入力グループのボタンはちょっと違っていて、特別なレベルのネストが必要です。.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-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li 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-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li 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>

ナビ

Bootstrap で利用可能なナビは、共有ステータスと同様にベース .nav クラスで始まるマークアップを共有しています。それぞれのスタイルを切り替えるために修飾クラスを入れ替えてください。

タブ・パネルにナビを使う場合は JavaScript のタブ・プラグインが必要です。

タブ領域のタブには、JavaScript タブ・プラグインを使わなければいけません。マークアップは追加で role と ARIA 属性も必要になります。詳細は、プラグインのマークアップの例をご覧ください。

ナビをアクセスできるナビゲーションとして使えるようにする

もしナビをナビゲーション・バーのために使っているなら、<ul> の論理的に最上位の親コンテナに role="navigation" を追加するか、ナビゲーション全体を <nav> 要素で括るようにしてください。支援技術によって実際のリストとして読み上げられるのを避けるために、role を <ul> 自身に追加しないでください。

.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>

.nav-justified を使うことで、768px より広い画面でタブやピルを簡単に親要素と等幅にすることができます。それより狭い画面では、ナビのリンクは積み上げられます。

両端揃えされたナビバーのナビのリンクは現在サポートされていません。

Safari とレスポンシブな両端揃えされたナビ

v8.0 で Safari にはバグがあり、水平方向にブラウザをリサイズすると、両端揃えされたナビの更新にレンダリング・エラーが起きます。このバグは、両端揃えされたナビの例でも紹介しています。

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

ナビのコンポーネント(タブやピル)に .disabled を加えると、グレーのリンクになってホバーのエフェクトがなくなります

リンク機能には影響しません

このクラスは <a> の見た目を変更するだけで、機能は変わりません。リンクを無効にするには、専用の JavaScript を使ってください。

<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-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="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-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </li>
  ...
</ul>

ナビバー

ナビバーは、アプリケーションやサイトのナビゲーション・ヘッダーを務めるレスポンシブなメタ・コンポーネントです。モバイル・ビューでは初めは折り畳まれていますが、利用可能なビューポート幅が増加すると水平になります。

両端揃えされたナビバーのナビのリンクは現在サポートされていません。

コンテンツのオーバーフロー

Bootstrap にはナビバーのコンテンツがどれだけのスペースを必要とするかがわからないので、2列目にコンテンツをラッピングしなければならなくなるかも知れません。これを解決するために、できることは:

  1. ナビバーのアイテムの量や幅を減らす。
  2. 特定のナビバーのアイテムを、レスポンシブ・ユーティリティ・クラスを使って特定の画面サイズで非表示にする。
  3. ナビバーが、折り畳まれたモードと水平のモードで切り替わる箇所を変更する。@grid-float-breakpoint 変数をカスタマイズするか、専用のメディア・クエリを追加する。

JavaScript プラグインが必要

もし JavaScript が不可でビューポートがナビバーが折り畳まれるぐらい狭ければ、ナビバーを展開して .navbar-collapse の中のコンテンツを見ることはできません。

レスポンシブなナビバーは、お使いの Bootstrap のバージョンに折り畳みプラグインが含まれている必要がります。

モバイル・ナビバーが折り畳まれるブレークポイントの変更

ナビバーは、ビューポートが @grid-float-breakpoint より狭いときに垂直のモバイル・ビューに折り畳まれ、ビューポートの幅が少なくとも @grid-float-breakpoint のときに水平の非モバイル・ビューに展開されます。Less のソースでこの変数を調節してナビバーの折り畳みと展開のタイミングを制御します。デフォルトの値は 768px (最小の「小型」か「タブレット」の画面)です。

ナビバーを利用可能にする

<nav> 要素を使うか、もし <div> のようなもっと一般的な要素を使っているときは、それぞれのナビバーに role="navigation" を追加して、支援技術のユーザーにそれが境界領域であることを明示的に識別するようにします。

<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">
        <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-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <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>
      <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-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li 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-form はコードの大半を mixin 経由で .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>

モバイル・デバイスにおける注意

モバイル・デバイスにおいて、位置を固定した要素の中でフォーム・コントロールを使う場合は注意しなければならないことがあります。詳しくは、サポートされるブラウザについてをご覧ください。

いつもラベルをつける

もしあらゆる入力にラベルがついていないと、読み上げソフトは困難に見舞われます。これらのインラインのフォームには、.sr-only クラスを使ってラベルを不可視にできます。支援技術にラベルを提供する代替手段としては、aria-labelaria-labelledbytitle 属性のようなものがあります。これらが何もないと、読み上げソフトは placeholder 属性に頼るかも知れませんが、もしあれば、他のラベルをつける方法の代わりに placeholder を使うことはお勧めしません。

<button> 要素に .navbar-btn クラスを追加することで、<form> の中で側に再配置することなく、ナビバーの中で垂直方向中央に配置します。

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

コンテキスト特有の使い方

標準のボタン・クラスのように、.navbar-btn<a> 要素と <input> 要素上で使えます。しかし、.navbar-btn も標準のボタン・クラスも .navbar-nav の中の <a> 要素の上で使うべきではありません。

通常、正しい行間と色のために <p> の上の要素の中のテキストの文字列を .navbar-text で括ります。

<p class="navbar-text">Signed in as Mark Otto</p>

標準のナビバー・ナビゲーション・コンポーネント内にない標準的なリンクを使うためには、ナビバーのオプションをデフォルトの反対色にするために、.navbar-link クラスを使って適切な色を追加します。

<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-right クラスに制限があります。正しく余白を埋めるために、最後の .navbar-right 要素にネガティブ・マージンを使います。このクラスを使っている複数の要素がある場合、これらのマージンは意図したとおりに機能しません。

これはバージョン4でこのコンポーネントを書き直せるときに再考する予定です。

.navbar-fixed-top を加えて、.container.container-fluid をインクルードして、ナビ・バーのコンテンツを中央に配置します。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

本文の余白調整が必要

<body> の最上部に padding を追加しないと、常駐したナビ・バーは他のコンテンツにかぶさってしまいます。自分で値を試すか、以下のスニペットをお使いください。ヒント:デフォルトでは、ナビ・バーの高さは 50px です。

body { padding-top: 70px; }

Bootstrap CSS コアのに、これを記述するようにしてください。

.navbar-fixed-bottom を加えて、.container.container-fluid をインクルードして、ナビ・バーのコンテンツを中央に配置します。

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

本文の余白調整が必要

<body> の最下部に padding を追加しないと、常駐したナビ・バーは他のコンテンツにかぶさってしまいます。自分で値を試すか、以下のスニペットをお使いください。ヒント:デフォルトでは、ナビ・バーの高さは 50px です。

body { padding-bottom: 70px; }

Bootstrap CSS コアのに、これを記述するようにしてください。

.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>

パンくずリスト

ナビゲーションの階層の中で現在のページの位置を示します。

セパレータは、:beforecontent を通して、CSS の中で自動的に追加されます。

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

ページ番号

複数のページ番号のコンポーネントやシンプルな代替のページ送りで、サイトやアプリにページ番号のリンクを備えます。

デフォルトのページ番号

Rdio にインスピレーションを受けたシンプルなページ番号は、アプリや検索結果に役立ちます。大きなブロックは見落とし難く、容易に拡大できて、大きなクリック領域を提供します。

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</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">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

不可やアクティブな状態

リンクは異なる状態にカスタマイズできます。.disabled を使うと、クリックできないリンクになり、.active を使うと現在のページを示します。

<nav>
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

意図したスタイルを維持するのにクリック機能を取り除こうとして、<span> のアクティブや不可のアンカーを追い出したり、前へ/次への矢印の状態でアンカーを省略することもできます。

<nav>
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

サイズ

特大や極小のページ番号が必要ですか?.pagination-lg.pagination-sm でサイズ指定を加えてください。

<nav><ul class="pagination pagination-lg">...</ul></nav>
<nav><ul class="pagination">...</ul></nav>
<nav><ul class="pagination pagination-sm">...</ul></nav>

ページ送り

ちょっとしたマークアップとスタイル指定で、手軽に前へと次へのリンクをシンプルなページ送りとして実装します。ブログや雑誌のようなシンプルなサイトによく使われます。

デフォルト例

デフォルトで、ページ送りはリンクがセンタリングされます。

<nav>
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

位置調整したリンク

あるいは、それぞれのリンクを両端に配置することもできます:

<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

オプション的な不可状態

ページ送りのリンクは、ページ番号の一般的な .disabled ユーティリティ・クラスも使います。

<nav>
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

ラベル

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
<h3>Example heading <span class="label label-default">New</span></h3>

利用できるバリエーション

以下に示した修飾クラスをどれか加えると、ラベルの見た目を変えることができます。

Default Primary Success Info Warning Danger
<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 をご覧ください。

バッジ

新規や未読のアイテムを簡単に目立たせるには、リンクや Bootstrap のナビなどに <span class="badge"> を加えます。

Inbox 42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

自分で折り畳む

新規や未読のアイテムがないときは、中にコンテンツがないことを示すのに( CSS の :empty セレクタで)バッジをシンプルに折り畳みます。

クロス・ブラウザ互換性

Internet Explorer 8 では、:empty セレクタをサポートしていないので、バッジを自分で折り畳めません。

アクティブなナビの状態に適応させる

ピル・ナビゲーションにアクティブな状態のバッジを配置するために、組み込みのスタイルが含まれています。

<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>

ジャンボトロン

キー・コンテンツをサイトのビューポートいっぱいに表示することができる軽量で柔軟なコンポーネント。

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<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>

To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.

<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 のグリッド・システムを拡張して、サムネイル・コンポーネントでかんたんに画像や動画やテキスト等のグリッドを表示します。

デフォルト例

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180" alt="...">
    </a>
  </div>
  ...
</div>

カスタマイズしたコンテンツ

ほんの少しマークアップで、見出しや段落やボタンのような HTML コンテンツをサムネイルに追加できます。

Generic placeholder thumbnail

Thumbnail label

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

Button Button

Generic placeholder thumbnail

Thumbnail label

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

Button Button

Generic placeholder thumbnail

Thumbnail label

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

Button Button

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img data-src="holder.js/300x300" 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つのコンテキストのクラス(例:.alert-success )の内の1つを使います。

デフォルト・クラスはありません

警告にはデフォルト・クラスはなく、ベース・クラスと修飾クラスがあるだけです。デフォルトのグレーの警告はあまり意味をなしませんので、コンテキストのクラスで型を明記する必要があります。成功、情報、注意、危険、から選んでください。

<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">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

全てのデバイスにまたがって正しい挙動を保証します

data-dismiss="alert" データ属性とともに <button> 要素を使うようにします。

手早く警告内にマッチする色のリンクを提供するには .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 はアニメーションをサポートしていません。

基本例

デフォルトのプログレス・バー

60% Complete
<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>

ラベル

パーセンテージが見えるようにプログレス・バーの .sr-onlyクラスを伴う <span> を取り除きます。

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

低パーセンテージ

0% のような一桁のパーセンテージを表示するプログレス・バーには、読みやすくするために min-width: 20px; を含めます。

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
    2%
  </div>
</div>

コンテキストの代替

プログレス・バーは一貫したスタイルのために、ボタンやアラートと同じクラスのいくつかを使います。

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
<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>

縞模様

縞模様のエフェクトを作るのにグラデーションを使います。IE8 では利用できません。

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
<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>

アニメーション

右から左にアニメーションさせるために、.progress-bar-striped.active を追加します。IE9 以下のバージョンでは利用できません。

45% Complete
<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 に配置します。

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
<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>

メディア・オブジェクト

(ブログのコメントや Tweet 等の)いろいろなタイプのコンポーネントを構築するための抽象的なオブジェクト・スタイルで、テキストのコンテンツに並んで左寄せや右寄せに画像を表示します。

デフォルト・メディア

デフォルトのメディアは、(画像、動画、音声のような)メディア・オブジェクトをコンテンツ・ブロックの左か右に表示します。

Generic placeholder image

メディア見出し

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image

メディア見出し

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image

ネストしたメディア見出し

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

メディア見出し

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Generic placeholder image
Generic placeholder image

メディア見出し

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Generic placeholder image
<div class="media">
  <a class="media-left" href="#">
    <img src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

.pull-left.pull-right クラスもあり、以前はメディア・コンポーネントの一部として使われていましたが、v3.3.0 では使用されなくなりました。この2つのクラスは、.media-right は html の中で .media-body の後に配置するべきであるという点を除いて、ほぼ .media-left.media-right に相当します。

メディアの位置揃え

画像や他のメディアは最上部、中央、最下部に位置揃えできます。デフォルトでは最上部に位置揃えされます。

Generic placeholder image

最上部に位置揃えしたメディア

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Generic placeholder image

中央に位置揃えしたメディア

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Generic placeholder image

最下部に位置揃えしたメディア

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <a class="media-left media-middle" href="#">
    <img data-src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

メディア・リスト

ほんの少しマークアップを追加すると、(コメントのスレッドや商品リストに便利な)リストの内側にメディアを使用できます。

  • Generic placeholder image

    メディア見出し

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

    Generic placeholder image

    ネストしたメディア見出し

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    Generic placeholder image

    ネストしたメディア見出し

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    Generic placeholder image

    ネストしたメディア見出し

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <a class="media-left" href="#">
      <img src="..." alt="...">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

リスト・グループ

リスト・グループは、単純な要素のリストだけでなくカスタム・コンテンツを含む複雑なリストを表示するための、柔軟でパワフルなコンポーネントです。

基本例

もっとも基本的なリスト・グループは、単純に順不同のリストで、リスト・アイテムと適切なクラスをともなうものです。以下のオプションか、必要に応じて自分の CSS で構築します。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<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 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

リンク・アイテム

リスト・アイテムの代わりにアンカー・タグを使うクリックできるリンク・グループのアイテム(これは <ul> の代わりの親要素の <div> も意味します)。それぞれの要素の周りの個々の親要素には必要ありません。

<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>

不可アイテム

.list-group-item.disabled を追加することで、グレーにして選択できないように見せます

<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 facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros
<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 を追加します。

<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 に、コンテンツを入れるために基本的な境界線とパディングが適用されます。

Basic panel example
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

見出しのあるパネル

.panel-heading でパネルに簡単に見出しコンテナを追加します。整形済みの見出しを追加するために、.panel-title クラスと一緒に <h1>-<h6> をインクルードしてもかまいません。

正しいリンク色のために、.panel-title の見出しの中にリンクを配置するようにしてください。

Panel heading without title
Panel content

Panel title

Panel content
<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 の中のボタンや2番目のテキストを囲います。コンテキストの変化を前面でないことを意味させる場合、パネルのフッタは色と境界を継承しないことに留意してください。

Panel content
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

コンテキストの代替

他のコンポーネントのように、コンテキストの状態クラスを追加することで、簡単にパネルをより意味のある特定のコンテキストにします。

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content
<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 がある場合は、区切るためにテーブルの最上部に境界線を追加します。

Panel heading

Some default panel content here. Nulla vitae elit libero, a 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.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<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>

パネルの本体がない場合は、コンポーネントは間断なくパネルのヘッダからテーブルに移動します。

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

リスト・グループつき

どんなパネルにでも簡単に全幅のリスト・グループを入れられます。

Panel heading

Some default panel content here. Nulla vitae elit libero, a 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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<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> 要素に適用されます。他の属性にスタイルを合わせたい場合は、任意で明示的に派生クラスを使います。

プロの技! 上書きされるので、<iframe> の中に frameborder="0" を入れる必要はありません。

<!-- 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>

囲み

デフォルトの囲み

挿入された効果を要素に与えるシンプルな効果として囲みを使います。

Look, I'm in a well!
<div class="well">...</div>

オプション・クラス

2つの修飾クラスで、余白と四隅の丸さを制御します。

Look, I'm in a large well!
<div class="well well-lg">...</div>
Look, I'm in a small well!
<div class="well well-sm">...</div>