Bootstrap3移行ガイド

アイコンの種類（Available glyphs）v3.3.2一部追加

Glyphicon Halflingsセットのフォント形式で250以上のアイコンが組み込まれている。Glyphicons Halflingsは通常無料では入手できないが、作成者がBootstrapを無料で利用できるようにしてくれた。感謝を込めてできるだけGlyphiconsにリンクすることを推奨。

赤背景のアイコンがv3.0.0で追加されたもの、青背景のアイコンがv3.3.2で追加されたもの

.glyphicon .glyphicon-asterisk
.glyphicon .glyphicon-plus
.glyphicon .glyphicon-euro
.glyphicon .glyphicon-eur
(3.3.0～)
.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
.glyphicon .glyphicon-cd
.glyphicon .glyphicon-save-file
.glyphicon .glyphicon-open-file
.glyphicon .glyphicon-level-up
.glyphicon .glyphicon-copy
.glyphicon .glyphicon-paste
.glyphicon .glyphicon-alert
.glyphicon .glyphicon-equalizer
.glyphicon .glyphicon-king
.glyphicon .glyphicon-queen
.glyphicon .glyphicon-pawn
.glyphicon .glyphicon-bishop
.glyphicon .glyphicon-knight
.glyphicon .glyphicon-baby-formula
.glyphicon .glyphicon-tent
.glyphicon .glyphicon-blackboard
.glyphicon .glyphicon-bed
.glyphicon .glyphicon-apple
.glyphicon .glyphicon-erase
.glyphicon .glyphicon-hourglass
.glyphicon .glyphicon-lamp
.glyphicon .glyphicon-duplicate
.glyphicon .glyphicon-piggy-bank
.glyphicon .glyphicon-scissors
.glyphicon .glyphicon-bitcoin
.glyphicon .glyphicon-btc
(3.3.4～)
.glyphicon .glyphicon-xbt
(3.3.4～)
.glyphicon .glyphicon-yen
.glyphicon .glyphicon-jpy
(3.3.4～)
.glyphicon .glyphicon-ruble
.glyphicon .glyphicon-rub
(3.3.4～)
.glyphicon .glyphicon-scale
.glyphicon .glyphicon-ice-lolly
.glyphicon .glyphicon-ice-lolly-tasted
.glyphicon .glyphicon-education
.glyphicon .glyphicon-option-horizontal
.glyphicon .glyphicon-option-vertical
.glyphicon .glyphicon-menu-hamburger
.glyphicon .glyphicon-modal-window
.glyphicon .glyphicon-oil
.glyphicon .glyphicon-grain
.glyphicon .glyphicon-sunglasses
.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-triangle-right
.glyphicon .glyphicon-triangle-left
.glyphicon .glyphicon-triangle-bottom
.glyphicon .glyphicon-triangle-top
.glyphicon .glyphicon-console
.glyphicon .glyphicon-superscript
.glyphicon .glyphicon-subscript
.glyphicon .glyphicon-menu-left
.glyphicon .glyphicon-menu-right
.glyphicon .glyphicon-menu-down
.glyphicon .glyphicon-menu-up

【変更履歴】

【3.3.0】.glyphicon-euroは.glyphicon-eurでも使用可
【3.3.2】Glyphiconsがv1.9にバージョンアップされたことに伴いアイコンの種類が259に増加
【3.3.4】.glyphicon-bitcoinは.glyphicon-btcと.glyphicon-xbt、.glyphicon-yenは.glyphicon-jpy、.glyphicon-rubleは.glyphicon-rubでもそれぞれ使用可

アイコンの設定（How to use）v3.2.0設定変更

パフォーマンス上の理由から、すべてのアイコンには基本クラスと個別のアイコンクラスが必要。使用するには、次のコードをどこかに置くこと。適切なpaddingのために、アイコンとテキストの間にはスペースを入れること。

他のコンポーネントと混用しないこと

アイコンクラスは、他のコンポーネントと直接結合することはできない。それらは同じ要素の他のクラスと一緒に使うべきではない。そうではなく、入れ子にした<span>を追加し、アイコンクラスを<span>に適用する。

空の要素でのみ使用する

アイコンクラスは、テキストのコンテンツを含まず、子要素を持たない要素でのみ使用する必要がある。

アイコンのフォントの場所を変更する

Bootstrapでは、アイコンフォントファイルは、コンパイル済みのCSSファイルに対して、../fonts/ディレクトリに配置される。これらのフォントファイルの移動または名前の変更は、次の3つの方法のいずれかでCSSを更新することを意味する。

ソースlessファイルの@icon-font-pathまたは@icon-font-name変数を変更
Lessコンパイラが提供する相対URLオプションを使用
コンパイル済みCSSのurl()パスを変更

特定の開発環境に最も適したオプションを使用すること。

アクセス可能なアイコン

最近のバージョンの支援技術では、CSSで生成されたコンテンツだけでなく、特定のUnicode文字も申し渡される。（特に装飾のためにアイコンを使用する場合は）スクリーンリーダーの意図しない混乱を避けるために、aria-hidden="true"属性で非表示にすることが可能。

（装飾的な要素としてだけではなく）意味を伝えるためにアイコンを使用している場合、この意味は補助的な技術にも伝えられる。たとえば、.sr-onlyクラスで視覚的に非表示した追加のコンテンツが含まれる。

他のテキスト（アイコンのみを含む<button>など）を持たないコントロールを作成する場合は、コントロールの目的を識別するための代替コンテンツを提供して、補助技術のユーザーにとって意味があるようにする必要がある。この場合、コントロール自体にaria-label属性（要素に対するラベル付け）が追加可能。

見本

Bootstrap2.3.2の設定例赤背景が変更箇所

<i class="icon-star"></i>

Bootstrap3.xの設定例緑背景が変更箇所

<span class="glyphicon glyphicon-star" aria-hidden="true"></span>

【設定】

span.glyphicon.glyphicon-{icon}
他のクラスと組み合わせたり、テキストを挟むことは不可（<span>に指定し独立した要素として使用）

【アクセシビリティの設定】

span.glyphicon.glyphicon-{icon}に、aria-hidden="true"属性（スクリーンリーダー等で読み上げをスキップさせる）を入れる

【変更履歴】

【3.2.0】アクセシビリティの設定として、aria-hidden="true"を追加

【Bootstrap2.3.2との変更箇所】

i.icon-{icon} ⇒ span.glyphicon.glyphicon-{icon}
png画像からwebフォントに変更。アイコンの種類は3.0.0で140から200に、3.3.2で259に増加
一旦bootstrap.cssから切り離され別ファイルになったが、v3RC2の途中で再びbootstrap.cssに戻された
文字と同じようにサイズや色の変更ができるようになり、白色アイコンの.icon-whiteは廃止
アクセシビリティの設定が追加

実例（Examples）

ボタン、ツールバーのボタングループ、ナビゲーション、インプットグループのアドオンで使用。

見本

設定例

<button type="button" class="btn btn-default" aria-label="左寄せ">
	<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> スター
</button>

アラートで使用の場合

アラートで使用され、エラーメッセージであることを示すアイコンには、支援技術を利用している人にこのヒントを伝えるために.sr-onlyテキストを追加すること。

有効なメールアドレスを入力して下さい

<div class="alert alert-danger" role="alert">
	<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
	<span class="sr-only">エラー:</span>
	有効なメールアドレスを入力して下さい
</div>

グリフアイコン以外のアイコンフォント

Font Awesome4

Bootstrap3に対応したバージョン4.0.0が2013/10/23に登場
アイコンの種類は675（バージョン4.7.0現在）
Bootstrap CDNでの使用も可能
4.0.0より設定がi.icon-{icon} ⇒ i.fa.fa-{icon}に変更

Elusive Icons

Bootstrap3に対応したバージョン2.0.0が2015/2/19に登場
アイコンの種類は304（バージョン2.0.0現在）
バージョン2.0.0より配布場所がelusiveicons.comに変更
バージョン2.0.0よりBootstrapCDN by MaxCDNでの使用も可能
~~2013/11のバージョンより設定がi.icon-{icon} ⇒ span.glyphicon.el-icon-{icon}に変更~~
さらにバージョン2.0.0より設定がi.el.el-icon-{icon}に変更

リンクリストを表示するための切り替え可能なコンテキストメニュー。ドロップダウンJavaScriptプラグインと相互作用になっている。

ドロップダウンの設定（Example）v3.3.5設定変更

ドロップダウンの切替（ボタンまたはリンク）とドロップダウンメニューを.dropdownまたはposition: relative;を宣言する別の要素（例：.btn-group）で囲む。次にメニューのHTMLを追加する。

ドロップダウンメニュー

見本メニューのみを表示

Bootstrap2.3.2の設定例赤背景が変更箇所

<div class="dropdown open">
	<ul class="dropdown-menu" role="menu">
		<li class="active"><a tabindex="-1" href="#">メニュー1</a></li>
		<li><a tabindex="-1" href="#">メニュー2</a></li>
		<li><a tabindex="-1" href="#">メニュー3</a></li>
		<li class="divider"></li><!-- 横仕切り線 -->
		<li><a tabindex="-1" href="#">その他リンク</a></li>
	</ul>
</div><!-- /.dropdown -->

Bootstrap3.xの設定例緑背景が変更箇所

<div class="dropdown open">
	<ul class="dropdown-menu">
		<li class="active"><a href="#">メニュー1</a></li>
		<li><a href="#">メニュー2</a></li>
		<li><a href="#">メニュー3</a></li>
		<li role="separator" class="divider"></li><!-- 横仕切り線 -->
		<li><a href="#">その他リンク</a></li>
	</ul>
</div><!-- /.dropdown -->

ボタンドロップダウン

見本

Bootstrap2.3.2の設定例赤背景が変更箇所

<div class="dropdown">
	<!-- 切替ボタンの設定 -->
	<button class="btn dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown">
		ココを押す
		<span class="caret"></span>
	</button>
		<!-- ドロップダウンメニューの設定 -->
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
		<li><a tabindex="-1" href="#">メニュー1</a></li>
		<li><a tabindex="-1" href="#">メニュー2</a></li>
		<li><a tabindex="-1" href="#">メニュー3</a></li>
		<li class="divider"></li><!-- 横仕切り線 -->
		<li><a tabindex="-1" href="#">その他リンク</a></li>
	</ul>
</div><!-- /.dropdown -->

Bootstrap3.xの設定例緑背景が変更箇所

<div class="dropdown">
	<!-- 切替ボタンの設定 -->
	<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		ココを押す
		<span class="caret"></span>
	</button>
	<!-- ドロップダウンメニューの設定 -->
	<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
		<li><a href="#">メニュー1</a></li>
		<li><a href="#">メニュー2</a></li>
		<li><a href="#">メニュー3</a></li>
		<li role="separator" class="divider"></li><!-- 横仕切り線 -->
		<li><a href="#">その他リンク</a></li>
	</ul>
</div><!-- /.dropdown -->

ボタンドロップアップ

親要素に.dropupを追加すれば、ドロップダウンメニューを（下向きではなく）上向きに変更可能。

見本

設定例

<div class="dropup">
	<button class="btn btn-default dropdown-toggle" type="button" id="dropupMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		ココを押す
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" aria-labelledby="dropupMenu">
		<li>...</li>
	</ul>
</div><!-- /.dropup -->

【設定】

.dropdown > {.dropdown-toggle《切替用のリンク/ボタン》 + [ul.dropdown-menu > <li>]《ドロップダウンメニュー》}
.dropdownを.dropupにすれば、ドロップアップメニューになる
dropdown.jsを使ってメニューを開くために.dropdown-toggleと同じ要素にdata-toggle="dropdown"を入れる
.dropdown に .open を追加すると、メニューが開いた状態で表示される（その場合は.dropdown-toggleと同じ要素に入れるaria-expanded属性は、falseではなくtrueにすること）
アクティブ化しておきたいメニューがあれば、li.activeにする

【アクセシビリティの設定】

.dropdown-toggleと同じ要素に、
- aria-haspopup="true"属性（支援技術にポップアップメニューが存在するかどうかを伝える）
- aria-expanded="false"属性（支援技術に要素の開閉の状態を伝える）
を入れる
ul.dropdown-menuに、aria-labelledby="ボタンのID"属性（ボタンとドロップダウンを関連付ける）を入れること

【変更履歴】

【3.3.5】ul.dropdown-menuのrole="menu"、<li>にrole="presentation"、<a>のtabindex="-1"がそれぞれ不要に、新たに.dropdown-toggleと同じ要素にaria-haspopup="true"が追加

【Bootstrap2.3.2との変更箇所】

.dropdown-toggleと同じ要素に、aria-expanded="false"とaria-haspopup="true"~~、<li>にrole="presentation"~~が追加

【参考】

Bootstrap3.0のドロップダウンをマウスオーバーで使用する方法（TetraThemesブログ）

ドロップダウンメニューの配置（Alignment）v3.1.0設定変更

デフォルトでは、ドロップダウンメニューは、親要素の左側から100％の位置に自動的に配置される。.dropdown-menu-rightを.dropdown-menuに追加すると、ドロップダウンメニューが右寄せになる。

追加の位置決めが必要な場合がある

ドロップダウンは、ドキュメントの通常の流れの中でCSS経由で自動的に配置される。これは、特定のオーバーフロープロパティを持つ親要素によってドロップダウンが切り取られるか、またはビューポートの範囲外に表示されることを意味する。発生したときには、これらの問題に自分自身で対処すること。

推奨されていない`.pull-right`の位置合わせ

v3.1.0以降、ドロップダウンメニューで.pull-rightを非推奨にした。メニューを右寄せにするには、.dropdown-menu-rightを使用すること。ナビゲーションバーの右寄せのナビゲーションコンポーネントは、このクラスのmixinバージョンを使用してメニューを自動的に調整。これを無効にするには、.dropdown-menu-leftを使用するように。

見本

●ドロップダウンメニューを右寄せ

※ドロップダウン全体を右寄せ（参考）

Bootstrap2.3.2（～3.0.3）の設定例赤背景が変更箇所

<!-- ドロップダウンメニューを右寄せ -->
<div class="dropdown">
	...
	<ul class="dropdown-menu pull-right" aria-labelledby="dropdownMenu">
		<li>...</li>
	</ul>
</div><!-- /.dropdown -->

<!-- ドロップダウン全体を右寄せ -->
<div class="dropdown pull-right">
	...
	<ul class="dropdown-menu pull-right" aria-labelledby="dropdownMenu">
		<li>...</li>
	</ul>
</div><!-- /.dropdown -->

Bootstrap3.x（3.1.0～）の設定例緑背景が変更箇所

<!-- ドロップダウンメニューを右寄せ -->
<div class="dropdown">
	...
	<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu">
		<li>...</li>
	</ul>
</div><!-- /.dropdown -->

<!-- ドロップダウン全体を右寄せ -->
<div class="dropdown pull-right">
	...
	<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu">
		<li>...</li>
	</ul>
</div><!-- /.dropdown -->

【設定】

右寄せ：ul.dropdown-menuに.dropdown-menu-rightを追加
左寄せ：ul.dropdown-menuに.dropdown-menu-leftを追加

【注意】

ドロップダウン全体を右寄せするには、.dropdownに.pull-rightを追加

【Bootstrap2.3.2（～3.0.3）との変更箇所】

右寄せ：.dropdown-menu.pull-right ⇒ dropdown-menu.dropdown-menu-right
左寄せ：.dropdown-menu.pull-left ⇒ dropdown-menu.dropdown-menu-left

ドロップダウンメニューの見出し（Headers）v3.0新設

任意のドロップダウンメニューのアクションのセクションにラベルを付けるヘッダーを追加。

見本メニューを開いた状態で表示

設定例

<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
	<li class="dropdown-header">ドロップダウンの見出し</li><!-- ドロップダウンの見出し -->
	<li><a href="#">メニュー1</a></li>
　...
</ul>

【設定】

見出しをつけたい箇所にli.dropdown-headerを入れる

ドロップダウンメニューの横仕切り線（Divider）v3.3.5設定変更

ドロップダウンメニューでリンクを分割するための横仕切り線を追加。

見本メニューを開いた状態で表示

Bootstrap2.3.2の設定例

<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
	<li><a href="#">メニュー1</a></li>
　...
	<li class="divider"></li>
　...
</ul>

Bootstrap3.xの設定例緑背景が変更箇所

<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
	<li><a href="#">メニュー1</a></li>
　...
	<li role="separator" class="divider"></li>
　...
</ul>

【設定】

横仕切り線を入れたい箇所にli.divider[role="separator"]を入れる

【アクセシビリティの設定】

<li>に、role="separator"属性（支援技術に区切りの役割を伝える）を入れる

【変更履歴】

【3.3.5】role="presentation" ⇒ role="separator"に変更

【Bootstrap2.3.2との変更箇所】

アクセシビリティの設定が追加

ドロップダウンメニューリンクの無効化（Disabled menu items）

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

見本メニューを開いた状態で表示

設定例

<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
	<li><a href="#">メニュー1</a></li>
	<li class="disabled"><a href="#">メニュー2（無効）</a></li>
	...
</ul>

【設定】

無効化したいリンクメニュー<li>に.disabledを入れる

Bootstrap3.0で廃止になったもの（ドロップダウン関連）

サブメニュードロップダウン（Sub menus on dropdowns）：li.dropdown-submenu
実装するにはBootstrapのドロップダウンを多階層化する（TetraThemesブログ）を参照

一連のボタンを1つにまとめ、グループ化してボタングループにする。オプションとしてJavaScriptラジオボタンとチェックボックスのスタイルの動作をボタンプラグインで追加。

ボタングループのツールチップとポップオーバーには特別な設定が必要

.btnグループ内の要素にツールチップやポップオーバーを使用する場合、不要な副作用（ツールチップまたはポップオーバーが起動したときに要素の幅が拡大したり角丸が失われたりするなど）を避けるには、オプションのcontainer: 'body'を指定する必要がある。

正しい`role`の確保とラベルの提供

一連のボタンがグループ化されていることをスクリーンリーダーなどの支援技術が伝えるためには、適切なrole属性を提供する必要がある。ボタングループの場合はrole="group"であり、ツールバーではrole="toolbar"でなければならない。

1つの例外は、単一のコントロールのみを含むグループ（例えば<button>要素を持つ等幅サイズのボタングループ）またはドロップダウンである。

さらに、グループやツールバーには明示的なラベルを付ける必要がある。これは、適切なrole属性が存在していても、ほとんどの支援技術では通知されないため。ここで提供される例では、aria-labelを使用しているが、aria-labelledbyのような代替も使用可能。

基本のボタングループ（Basic example）

.btn-groupで.buttonを含む一連のボタンを囲む。

見本

Bootstrap2.3.2の設定例

<div class="btn-group">
	<button type="button" class="btn">左</button>
	<button type="button" class="btn">中</button>
	<button type="button" class="btn">右</button>
</div>

Bootstrap3.xの設定例緑背景が変更箇所

<div class="btn-group" role="group" aria-label="ボタングループ">
	<button type="button" class="btn btn-default">左</button>
	<button type="button" class="btn btn-default">中</button>
	<button type="button" class="btn btn-default">右</button>
</div>

【設定】

.btn-group > [button.btn + button.btn・・・]《ボタン》
※複数のボタンを.btn-groupでまとめる

【アクセシビリティの設定】

.btn-group に、
- role="group"属性（支援技術にボタン・グループの役割を伝える）
- aria-label属性（ビジュアルで目的を表現する要素に対するラベル付け）
を入れる

【変更履歴】

【3.3.2】アクセシビリティの設定が追加

複雑なコンポーネントの場合は、<div class="btn-group">のセットを<div class="btn-toolbar">に組み込む。

見本

Bootstrap2.3.2の設定例

<div class="btn-toolbar">
	<div class="btn-group">
		...
	</div>
	<div class="btn-group">
		...
	</div>
	<div class="btn-group">
		...
	</div>
</div>

Bootstrap3.xの設定例緑背景が変更箇所

<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-toolbar > [.btn-group + .btn-group・・・]《ボタングループ》
※.btn-groupでまとめた複数のボタングループをさらに.btn-toolbarでまとめる

【アクセシビリティの設定】

div.btn-toolbarに、
- role="toolbar"属性（支援技術にボタン・ツールバーの役割を伝える）
- aria-label属性（ビジュアルで目的を表現する要素に対するラベル付け）
を入れる

【変更履歴】

【3.3.2】アクセシビリティの設定が追加

ボタングループのサイズ（Sizing）v3.0新設

グループのすべてのボタンにボタンサイズのクラスを適用するのではなく、複数のグループを入れ子にするときも含めて、.btn-group-*を各.btn-groupに追加するだけ。

設定例

<div class="btn-group btn-group-{size}" role="group" aria-label="...">
	<button type="button" class="btn btn-default">左</button>
	<button type="button" class="btn btn-default">中</button>
	<button type="button" class="btn btn-default">右</button>
</div>

サイズの種類

　大きめ：.btn-group-lg

　小さめ：.btn-group-sm

　極小：.btn-group-xs

　※標準

【設定】

.btn-groupに.btn-group-{size}（上記の「サイズの種類」から選択）を追加

ドロップダウンボタンつきボタングループ（Nesting）v3.0新設

ドロップダウンメニューを一連のボタンと組み合わせたい場合は、.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" aria-label="...">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			ドロップダウン <span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">ドロップダウンリンク</a></li>
			<li><a href="#">ドロップダウンリンク</a></li>
		</ul>
	</div>
</div>

【設定】

.btn-group > 〔button.btn + button.btn・・・ + {.btn-group > [button.btn.dropdown-toggle[data-toggle="dropdown"] > span.caret] + [ul.dropdown-menu > <li>}《ドロップダウン》〕
※.btn-groupの中にボタンでなくボタンドロップダウンを入れる

積み重ねボタングループ（Vertical variation）

一連のボタンを水平ではなく垂直に積み重ねて表示。分離ボタンのドロップダウンはここではサポートしない。

見本

設定例

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

【設定】

.btn-group-vertical > 〈button.btn + button.btn + 〔.btn-group > {button.btn.dropdown-toggle[data-toggle="dropdown"] + [ul.dropdown-menu > <li>]}〕・・・〉
※複数のボタンやボタンドロップダウンをさらに.btn-group-verticalでまとめる

等幅サイズのボタングループ（Justified button groups）v3.0新設

ボタンのグループを、同じサイズに拡張して、親の幅全体に広げる。また、ボタングループ内のボタンのドロップダウンとともに機能。

枠線の処理

ボタンを等幅にするために使用される特定のHTMLとCSS（つまりdisplay：table-cell）のために、隣り合うボタンの境界線は2倍の太さになる。通常のボタングループでは、枠線を削除するのではなく、枠線を積み重ねるのにmargin-left：-1pxが使用されるが、display：table-cellではmarginが機能しない。その結果、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="...">
	<a href="#" class="btn btn-default">左</a>
	<a href="#" class="btn btn-default">中</a>
	<a href="#" class="btn btn-default">右</a>
</div>

ボタンとして機能するリンク

<a>要素がボタンとして機能し、現在のページ内の別のドキュメントまたはセクションに誘導するのではなく、ページ内の機能を起動する場合は、適切なrole="button"も指定する必要がある。

ボタン`<button>`で設定 v3.0.3新設

<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">左</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">中</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">右</button>
	</div>
</div>

【設定】

.btn-groupに.btn-group-justifiedを追加
<button>に設定する場合は、必ずdiv.btn-group > <button>（各ボタンをdiv.btn-groupで囲む）にする

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

プラグインの依存関係

ボタンドロップダウンでは、自分のバージョンのBootstrapにドロップダウン・プラグインを組み込む必要がある。

ボタンドロップダウンの設定（Single button dropdowns）v3.3.1設定変更

いくつかの基本的なマークアップの変更で、ボタンをドロップダウンの切替に変える。

見本

Bootstrap2.3.2の設定例赤背景が変更箇所

<div class="btn-group">
	<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
		ココを押す
		<span class="caret"></span>
	</a>
	<ul class="dropdown-menu">
		<li><a href="#">メニュー1</a></li>
		...
	</ul>
</div>

Bootstrap3.xの設定例緑背景が変更箇所

<div class="btn-group">
	<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		ココを押す
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
		<li><a href="#">メニュー1</a></li>
		...
	</ul>
</div>

【設定】

.btn-group > {[button.btn.dropdown-toggle[data-toggle="dropdown"] > span.caret]《ドロップダウンボタン》 + [ul.dropdown-menu > <li>]《ドロップダウンメニュー》}
通常のボタンと区別するために、キャレット<span class="caret"></span>（▼）を入れる

【アクセシビリティの設定】

.dropdown-toggleと同じ要素に
- aria-haspopup="true"属性（支援技術にポップアップメニューが存在するかどうかを伝える）
- aria-expanded="false"属性（支援技術に要素の開閉の状態を伝える）
を入れる

【変更履歴】

【3.3.1】アクセシビリティの設定が追加

分離ボタンドロップダウン（Split button dropdowns）v3.0.1設定変更

同様に、同じマークアップの変更で分割ボタンのドロップダウンを作成し、別のボタンでのみ作成（ボタン部分とメニュー表示キャレットを分離）。

見本

Bootstrap2.3.2の設定例赤背景が変更箇所

<div class="btn-group">
	<button class="btn">ボタン</button>
	<button class="btn dropdown-toggle" data-toggle="dropdown">
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		...
	</ul>
</div>

Bootstrap3.xの設定例緑背景が変更箇所

<div class="btn-group">
	<button type="button" class="btn btn-default">ボタン</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">ドロップダウンの切替</span>
	</button>
	<ul class="dropdown-menu">
		...
	</ul>
</div>

【設定】

.btn-group > {button.btn《ボタン》 + [button.btn.dropdown-toggle[data-toggle="dropdown"] > span.caret + span.sr-only]《ドロップダウンボタン》 + [ul.dropdown-menu > <li>]《ドロップダウンメニュー》}
※通常のボタンとは別に、ドロップダウンメニュー表示用のボタンを入れる

【アクセシビリティの設定】

ドロップダウンボタンには、ユーザー補助用にspan.sr-onlyを入れてドロップダウンの切替であることを示す

【変更履歴】

【3.0.1】ドロップダウンボタンにspan.sr-onlyを入れる

ボタンドロップダウンのサイズ（Sizing）

ボタンのドロップダウンは、すべてのボタンサイズで機能する。

設定例

<div class="btn-group">
	<button type="button" class="btn btn-default btn-{size} dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		ボタン <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		 ...
	</ul>
</div>

サイズの種類クラス変更

　.btn-lg

　.btn-sm

　.btn-xs

【設定】

.btn-group > .btn.btn-{size}に.btn-{size}（上記の「サイズの種類」から選択）を追加

【Bootstrap2.3.2との変更箇所】

大きめ：.btn-large ⇒ .btn-lg
小さめ：.btn-small ⇒ .btn-sm
極小：.btn-mini ⇒ .btn-xs

ボタンドロップアップ（Dropup variation）

.dropupを親要素に追加することにより、要素の上にドロップダウンメニューを起動。

見本

設定例

<div class="btn-group dropup">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		ボタン <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		...
	</ul>
</div>

【設定】

.btn-groupに.dropupを追加

テキストベースの<input>の前後にテキストまたはボタンを追加してフォームコントロールを拡張。.input-groupに単一の.form-controlの前か後の要素に.input-group-addonまたは.input-group-btnを追加して使用。

テキスト`<input>`のみ

<select>要素は、WebKitブラウザで完全にスタイル設定できないため、ここでは使用しないこと。

<textarea>要素は、rows属性が尊重されないため、ここでは使用しないこと。

インプットグループのツールチップとポップオーバーには特別な設定が必要

.input-group内の要素にツールチップやポップオーバーを使用する場合は、不要な副作用（要素の幅が拡大したり、ツールチップまたはポップオーバーが起動される）を避けるため、オプションのcontainer: 'body'を指定する必要がある。

他のコンポーネントと混用しないこと

フォームグループまたはグリッド列クラスをインプットグループと直接混合しないこと。そうするのではなく、インプットグループをフォームグループまたはグリッド関連要素内に入れ子にする。

常にラベルを追加する

すべてのインプットにラベルを付けないと、スクリーンリーダーでフォームに問題が発生する。これらのインプットグループについては、追加のラベルまたは機能が支援技術に伝えられることを確認すること。

使用される正確な技術（表示可能な<label>要素、.sr-onlyクラスを使って隠された<label>要素、またはaria-label, aria-labelledby, aria-describedby, title, placeholder属性の使用）と、追加情報がどのように伝達される必要があるかは、実装しているインタフェースウィジェットの正確なタイプによって異なる。このセクションの例では、ケース固有のアプローチをいくつか提案している。

基本のインプットグループ（Basic example）v3.0設定変更⇒v3.3.6追加変更

1つのアドオンまたはボタンをインプットの両側に配置。また、インプットの両側に配置も可能。

片面に複数のアドオン（.input-group-addonまたは.input-group-btn）はサポートしない。

単一のインプットグループで複数のフォームコントロールはサポートしない。

見本

●前にアドオン

●後にアドオン

.00

●前後にアドオン

$ .00

●ラベル付きアドオン v3.3.6新設

偽のURL

https://example.com/users/

Bootstrap2.3.2の設定例赤背景が変更箇所

<!-- 前にアドオン -->
<div class="input-prepend">
	<span class="add-on">@</span>
	<input type="text" id="prependedInput" class="span2" placeholder="ユーザーネーム">
</div>

<!-- 後にアドオン -->
<div class="input-append">
	<input type="text" id="appendedInput" class="span2" placeholder="受信者のユーザー名">
	<span class="add-on">.00</span>
</div>

<!-- 前後にアドオン -->
<div class="input-prepend input-append">
	<span class="add-on">$</span>
	<input type="text" id="appendedPrependedInput" class="span2">
	<span class="add-on">.00</span>
</div>

<!-- ラベル付きアドオン -->
<label for="basic-url">偽のURL</label>
<div class="input-prepend">
	<span class="add-on">https://example.com/users/</span>
	<input type="text" class="span2" id="basic-url">
</div>

Bootstrap3.xの設定例緑背景が変更箇所

<!-- 前にアドオン -->
<div class="input-group">
	<span class="input-group-addon" id="basic-addon1">@</span>
	<input type="text" class="form-control" placeholder="ユーザーネーム" aria-describedby="basic-addon1">
</div>

<!-- 後にアドオン -->
<div class="input-group">
	<input type="text" class="form-control" placeholder="受信者のユーザー名" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">.00</span>
</div>

<!-- 前後にアドオン -->
<div class="input-group">
	<span class="input-group-addon">$</span>
	<input type="text" class="form-control" aria-label="（最も近いドル）金額">
	<span class="input-group-addon">.00</span>
</div>

<!-- ラベル付きアドオン -->
<label for="basic-url">偽の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 > [span.input-group-addon《アドオン》 + input.form-control《コントロール》]
後にアドオン：.input-group > [input.form-control《コントロール》 + span.input-group-addon《アドオン》]
前後にアドオン：.input-group > [span.input-group-addon《アドオン》 + input.form-control《コントロール》 + span.input-group-addon《アドオン》]
ラベル付きアドオン：<label> + .input-group

【アクセシビリティの設定】

<input>には、
- アドオンが1つだけの場合は、aria-describedby属性（アドオン部のIDを指定）
- アドオンが2つの場合は、aria-label属性（要素に対するラベル付け、代替テキストを指定）
を入れる

【変更履歴】

【3.3.2】アクセシビリティの設定の追加
【3.3.6】ラベル付きアドオンが追加

【Bootstrap2.3.2との変更箇所】

.input-prependと.input-append ⇒ .input-groupに統合
.add-on ⇒ .input-group-addon
inputには、.form-controlを指定
※.form-controlのコントロールの幅は、width:100%に指定されるため、inputに.col-{breakpoint}-*等のカラム幅を指定しても不能に（グリッド表記による幅の変更は可能）
アクセシビリティの設定が追加

インプットグループのサイズ（Sizing）v3.0新設

相対的なフォームサイズクラスを.input-group自体に追加すると、その中の内容は自動的にサイズ変更される。各要素のフォームコントロールサイズクラスを繰り返す必要はない。

設定例

<div class="input-group input-group-{size}">
	<span class="input-group-addon" id="sizing-addon">@</span>
	<input type="text" class="form-control" placeholder="ユーザーネーム" aria-describedby="sizing-addon">
</div>

サイズの種類

●大きめ：.input-group-lg

●小さめ：.input-group-sm

※標準（参考）

【設定】

.input-groupに.input-group-{size}（上記の「サイズの種類」から選択）を追加

【変更履歴】

大きめ：.input-lg ⇒ .input-group-lg（v3RC1の途中）
小さめ：.input-sm ⇒ .input-group-sm（v3RC1の途中）

アドオンをチェックボックスやラジオボタンにする（Checkboxes and radio addons）v3.0新設

インプットグループのアドオン内にテキストではなくチェックボックスまたはラジオボタンのオプションを配置。

見本

●チェックボックスの場合

●ラジオボタンの場合

設定例

<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 > [span.input-group-addon + input[type="checkbox"]]（アドオン）
ラジオボタン：.input-group > [span.input-group-addon + input[type="radio"]]（アドオン）

【アクセシビリティの設定】

チェックボックスやラジオボタン部分の<input>にも、aria-label属性（要素に対するラベル付け、代替テキストを指定）を入れる

ボタンアドオン（Button addons）v3.0設定変更

インプットグループ内のボタンは少し異なっており、1レベルの入れ子が必要。.input-group-addonの代わりに.input-group-btnを使用してボタンを囲む必要がある。これは、再定義できないデフォルトのブラウザスタイルのために必要。

見本

●前にボタン

●後にボタン

●前後にボタン

Bootstrap2.3.2の設定例赤背景が変更箇所

<!-- 前にボタン -->
<div class="input-prepend">
	<button type="button" class="btn">Go!</button>
	<input type="text" class="span2" id="prependInputButton" placeholder="キーワード...">
</div>

<!-- 後にボタン -->
<div class="input-append">
	<input type="text" class="span2" id="appendedInputButton" placeholder="キーワード...">
	<button type="button" class="btn">Go!</button>
</div>

<!-- 前後にボタン -->
<div class="input-prepend input-append">
	<button type="button" class="btn">検索</button>
	<input type="text" class="span2" id="appendedInputButtons" placeholder="キーワード...">
	<button type="button" class="btn">オプション</button>
</div>

Bootstrap3.xの設定例緑背景が変更箇所

<!-- 前にボタン -->
<div class="input-group">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">Go!</button>
	</span>
	<input type="text" class="form-control" placeholder="キーワード...">
</div>

<!-- 後にボタン -->
<div class="input-group">
	<input type="text" class="form-control" placeholder="キーワード...">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">Go!</button>
	</span>
</div>

<!-- 前後にボタン -->
<div class="input-group">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">検索</button>
	</span>
	<input type="text" class="form-control" placeholder="キーワード...">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">オプション</button>
	</span>
</div>

【設定】

.input-group > [span.input-group-btn > button.btn]《ボタンアドオン》

【Bootstrap2.3.2との変更箇所】

.input-prepend（または.input-append） > button.btn ⇒ .input-group > span.input-group-btn > button.btn
※ボタン部分をspan.input-group-btnで囲む

ドロップダウンつきボタンアドオン（Buttons with dropdowns）v3.0設定変更⇒v3.2.0追加変更

アドオン部分がボタンドロップダウンになっている

見本

●前にボタンドロップダウン

●後にボタンドロップダウン

Bootstrap2.3.2の設定例赤背景が変更箇所

<!-- 前にボタンドロップダウン -->
<div class="input-prepend">
	<div class="btn-group">
		<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">アクション <span class="caret"></span></button>
		<ul class="dropdown-menu">
			<li><a href="#">メニュー1</a></li>
			<li><a href="#">メニュー2</a></li>
			<li><a href="#">メニュー3</a></li>
			<li class="divider"></li>
			<li><a href="#">その他リンク</a></li>
		</ul>
	</div><!-- /.btn-group -->
	<input type="text" id="prependedDropdownButton" class="span2">
</div><!-- /.input-prepend -->

<!-- 後にボタンドロップダウン -->
<div class="input-append">
	<input type="text" id="appendedDropdownButton" class="span2">
	<div class="btn-group">
		<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">アクション <span class="caret"></span></button>
		<ul class="dropdown-menu">
			<li><a href="#">メニュー1</a></li>
			<li><a href="#">メニュー2</a></li>
			<li><a href="#">メニュー3</a></li>
			<li class="divider"></li>
			<li><a href="#">その他リンク</a></li>
		</ul>
	</div><!-- /.btn-group -->
</div><!-- /.input-append -->

Bootstrap3.xの設定例緑背景が変更箇所

<!-- 前にボタンドロップダウン -->
<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">アクション <span class="caret"></span></button>
		<ul class="dropdown-menu">
			<li><a href="#">メニュー1</a></li>
			<li><a href="#">メニュー2</a></li>
			<li><a href="#">メニュー3</a></li>
			<li role="separator" class="divider"></li>
			<li><a href="#">その他リンク</a></li>
		</ul>
	</div><!-- /.input-group-btn -->
	<input type="text" class="form-control" aria-label="...">
</div><!-- /.input-group -->

<!-- 後にボタンドロップダウン -->
<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">アクション <span class="caret"></span></button>
		<ul class="dropdown-menu dropdown-menu-right">
			<li><a href="#">メニュー1</a></li>
			<li><a href="#">メニュー2</a></li>
			<li><a href="#">メニュー3</a></li>
			<li role="separator" class="divider"></li>
			<li><a href="#">その他リンク</a></li>
		</ul>
	</div><!-- /.input-group-btn -->
</div><!-- /.input-group -->

【設定】

.input-group > {div.input-group-btn > [button.btn.dropdown-toggle[data-toggle="dropdown"] > span.caret]《ドロップダウンボタン》 + [ul.dropdown-menu > <li>]《ドロップダウンメニュー》}《ボタンアドオン》
後にボタンドロップダウンがつく場合は、ul.dropdown-menuに.dropdown-menu-rightを追加

【変更履歴】

【3.2.0】後にボタンドロップダウンがつく場合は、.pull-right⇒.dropdown-menu-right

【Bootstrap2.3.2との変更箇所】

.btn-group ⇒ .input-group-btn
後にボタンドロップダウンがつく場合は、ul.dropdown-menuに.dropdown-menu-right（～3.1.1は.pull-right）を追加

分離ボタンのアドオン（Segmented buttons）v3.0設定変更⇒v3.2.0追加変更

見本

●前に分離ボタン

●後に分離ボタン

Bootstrap2.3.2の設定例赤背景が変更箇所

<!-- 前に分離ボタン -->
<div class="input-prepend">
	<div class="btn-group">
		<button type="button" class="btn">ボタン</button>
		<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			...
		</ul>
	</div><!-- /.btn-group -->
	<input type="text">
</div><!-- /.input-prepend -->

<!-- 後に分離ボタン -->
<div class="input-append">
	<input type="text">
	<div class="btn-group">
		<button type="button" class="btn">ボタン</button>
		<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			...
		</ul>
	</div><!-- /.btn-group -->
</div><!-- /.input-append -->

Bootstrap3.xの設定例緑背景が変更箇所

<!-- 前に分離ボタン -->
<div class="input-group">
	<div class="input-group-btn">
		<button type="button" class="btn btn-default">ボタン</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">切替ボタン</span>
		</button>
		<ul class="dropdown-menu">
			...
		</ul>
	</div><!-- /.input-group-btn -->
	<input type="text" class="form-control" aria-label="...">
</div><!-- /.input-group -->

<!-- 後に分離ボタン -->
<div class="input-group">
	<input type="text" class="form-control" aria-label="...">
	<div class="input-group-btn">
		<button type="button" class="btn btn-default">ボタン</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">切替ボタン</span>
		</button>
		<ul class="dropdown-menu dropdown-menu-right">
			...
		</ul>
	</div><!-- /.input-group-btn -->
</div><!-- /.input-group -->

【設定】

.input-group > 〔div.input-group-btn > {button.btn《ボタン》 + [button.btn.dropdown-toggle[data-toggle="dropdown"] > span.caret]《ドロップダウンボタン》 + [ul.dropdown-menu > <li>]《ドロップダウンメニュー》}〕《ボタンアドオン》
後に分離ボタンがつく場合は、ul.dropdown-menuに.dropdown-menu-rightを追加

【変更履歴】

【3.2.0】後にボタンドロップダウンがつく場合は、.pull-right⇒.dropdown-menu-right

【Bootstrap2.3.2との変更箇所】

.btn-group ⇒ .input-group-btn
後に分離ボタンがつく場合は、ul.dropdown-menuに.dropdown-menu-right（～3.1.1は.pull-right）を追加

複数のボタン（Multiple buttons）v3.3.6新設

1つのサイドには1つのアドオンしか配置できないが、1つの.input-group-btn内に複数のボタンは配置可能。

見本

設定例

<div class="row">
	<div class="col-lg-6">
		<div class="input-group">
			<div class="input-group-btn">
				<button type="button" class="btn btn-default" aria-label="...">...</button>
				<button type="button" class="btn btn-default" aria-label="...">...</button>
			</div><!-- /.input-group-btn -->
			<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" aria-label="...">...</button>
				<button type="button" class="btn btn-default" aria-label="...">...</button>
			</div><!-- /.input-group-btn -->
		</div><!-- /.input-group -->
	</div><!-- /.col-lg-6 -->
</div><!-- /.row -->

【設定】

.input-group > {div.input-group-btn > [button.btn + button.btn]}《ボタンアドオン》

【アクセシビリティの設定】

ボタン部分の<button>にもaria-label属性（要素に対するラベル付け、代替テキストを指定）を入れる

Bootstrapで利用可能なナビゲーションは、ベースの.navクラスからマークアップを共有。修飾子クラスを入れ替えて各スタイルを切り替える。

タブパネルをナビゲーションで使用するにはタブJavaScriptプラグインが必要

タブ切替可能な領域のあるタブの場合は、タブJavaScriptプラグインを使用する必要がある。マークアップには、追加のroleとARIA属性も必要。詳細については、プラグインのタブナビゲーションを参照。

navをナビゲーションとしてアクセス可能にする

ナビゲーションバーを提供するためにナビゲーション(navs)を使用している場合は、<ul>の最も論理的な親コンテナにrole="navigation"を追加するか、ナビゲーション全体を<nav>要素で囲むようにし、<ul>自体にrole属性を追加しないこと。これは、補助技術に実際のリストとして通知されないようにするためである。

タブナビゲーション（Tabs）v3.3.0設定変更

.nav-tabsクラスには.nav基本クラスが必要。

見本

Bootstrap2.3.2の設定例

<ul class="nav nav-tabs">
	<li class="active">
		<a href="#">ホーム</a>
	</li>
	<li><a href="#">プロフィール</a></li>
	<li><a href="#">メッセージ</a></li>
</ul>

Bootstrap3.xの設定例緑背景が変更箇所

<ul class="nav nav-tabs">
	<li role="presentation" class="active"><a href="#">ホーム</a></li>
	<li role="presentation"><a href="#">プロフィール</a></li>
	<li role="presentation"><a href="#">メッセージ</a></li>
</ul>

【設定】

ul.nav.nav-tabs > li[role="presentation"]
最初に表示するタブは、あらかじめli.activeでアクティブ化しておく

【アクセシビリティの設定】

<li>に、role="presentation"属性（支援技術にコンテンツ表示用の役割を伝える）を入れる

【注意】

タブを使ったコンテンツの切替についてはtab.jsのタブナビゲーションを参照

【追加変更】

【3.3.0】<li>に、role="presentation"属性を入れる

【Bootstrap2.3.2との変更箇所】

アクセシビリティの設定が追加

ピルナビゲーション（Pills）v3.3.0設定変更

同様のHTMLを使用するが、代わりに.nav-pillsを使用：

見本

設定例

<ul class="nav nav-pills">
	<li role="presentation" class="active"><a href="#" data-toggle="pill">ホーム</a></li>
	<li role="presentation"><a href="#" data-toggle="pill">プロフィール</a></li>
	<li role="presentation"><a href="#" data-toggle="pill">メッセージ</a></li>
</ul>

【設定】

ul.nav.nav-pills > li[role="presentation"]
アクティブ化したいリンクは、li.activeにする

【アクセシビリティの設定】

<li>に、role="presentation"属性（支援技術にコンテンツ表示用の役割を伝える）を入れる

【注意】

ピルを使ったコンテンツの切替についてはtab.jsのピルナビゲーションを参照

【追加変更】

【3.3.0】<li>に、role="presentation"属性を入れる

積み重ねピルナビゲーション（Stacked）

.nav-stackedを追加するだけで、ピルナビゲーションを縦に積み重ね可能。

見本

設定例

<ul class="nav nav-pills nav-stacked">
	...
</ul>

【設定】

ul.nav.nav-pillsに.nav-stackedを追加

【Bootstrap2.3.2との変更箇所】

積み重ねタブナビゲーション（ul.nav.nav-tabs.nav-stacked）は、リンクつきリストグループに変更

等幅サイズのナビゲーション（Justified）v3.0新設⇒v3.3.0サポート外

.nav-justifiedを入れて768pxより広い画面で、タブまたはピルを親要素の幅に簡単に合わせることが可能。それより小さい画面では、ナビゲーションリンクは積み重ねられる。

等幅サイズのナビゲーションリンクはv3.3.0以降サポートされていない。⇒v4.0.0で復活している

Safariとレスポンシブな等幅サイズのナビゲーション

v9.1.2以降のSafariでは、ブラウザのサイズを水平に変更すると、更新後にクリアされた調整済みのナビゲーションにレンダリングエラーが発生するというバグを示す。このバグは、等幅サイズのナビゲーションの例にも示される。

見本

●等幅タブナビゲーション

●等幅ピルナビゲーション

設定例

<!-- 等幅タブナビゲーション -->
<ul class="nav nav-tabs nav-justified">
	...
</ul>

<!-- 等幅ピルナビゲーション -->
<ul class="nav nav-pills nav-justified">
	...
</ul>

【設定】

ul.navに.nav-justifiedを追加

ナビゲーションリンクの無効化（Disabled links）

ナビゲーションコンポーネント（タブまたはピル）の場合、灰色のリンクには.disabledを追加し、ホバー効果は追加しないこと。

影響を受けないリンク機能

このクラスは、その機能性ではなく、<a>の外観のみを変更。カスタムJavaScriptを使用してリンクを無効にする。

見本

●タブナビゲーション

●ピルナビゲーション

設定例

<!-- タブナビゲーション -->
<ul class="nav nav-tabs">
	...
	<li role="presentation" class="disabled"><a href="#">メッセージ</a></li>
</ul>

<!-- ピルナビゲーション -->
<ul class="nav nav-pills">
	...
	<li role="presentation" class="disabled"><a href="#">メッセージ</a></li>
</ul>

【設定】

無効化したいリンクを、li[role="presentation"].disabledにする
無効化したいタブのアンカーリンク（<a>）にdata-toggle="tab"やdata-toggle="pill"は入れない

ドロップダウンメニューつきナビゲーション（Using dropdowns）v3.3.1設定変更

見本

●タブナビゲーション

●ピルナビゲーション

設定例

<!-- タブナビゲーション -->
<ul class="nav nav-tabs">
	...
	<li role="presentation" class="dropdown">
		<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ドロップダウン <span class="caret"></span></a>
		<ul class="dropdown-menu">
			...
		</ul>
	</li>
</ul>

<!-- ピルナビゲーション -->
<ul class="nav nav-pills">
	...
	<li role="presentation" class="dropdown">
		<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ドロップダウン <span class="caret"></span></a>
		<ul class="dropdown-menu">
			...
		</ul>
	</li>
</ul>

【設定】

ul.nav > (li[role="presentation"] +) li[role="presentation"].dropdown > {[a.dropdown-toggle[data-toggle="dropdown"] > span.caret]《ドロップダウンリンク》 + [ul.dropdown-menu > <li>]《ドロップダウンメニュー》}
※ul.nav > li.dropdown内にドロップダウンメニューを入れる
ドロップダウンのアンカーリンク（<a>）にはdata-toggle="tab"やdata-toggle="pill"でなくdata-toggle="dropdown"を入れる

【アクセシビリティの設定】

ドロップダウンリンク（a.dropdown-toggle）に、
- role="button"属性（支援技術にボタンの役割を伝える）
- aria-haspopup="true"属性（支援技術にポップアップメニューが存在するかどうかを伝える）
- aria-expanded="false"属性（支援技術に要素の開閉の状態を伝える）
を入れる

【変更履歴】

【3.3.1】アクセシビリティの設定の追加

Bootstrap3.0で廃止になったもの（ナビゲーション関連）

任意方向のタブ（Tabbable in any direction）：

.tabbable.tabs-below（下向きのタブ）
.tabbable.tabs-left（左向きのタブ）
.tabbable.tabs-right（右向きのタブ）

ナビゲーションリスト（Nav lists）：ul.nav.nav-list
ナビゲーションリンク見出し：li.nav-header

ナビゲーションバーは、アプリケーションまたはサイトのナビゲーションヘッダとして機能するレスポンシブ・メタコンポーネント。モバイルビューでは折りたたまれ（切替可能）、利用可能なビューポートの幅が大きくなると水平になる。

等幅サイズのナビゲーションバーリンクはv3.3.0以降サポートされていない。

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

Bootstrapは、ナビゲーションバーのコンテンツに必要なスペースの量が分からないため、コンテンツが2行目に折り返されてしまうという問題が発生する可能性がある。これを解決するには、次の操作を実行：

ナビゲーションバーの項目の量または幅を減らす。
レスポンシブ・ユーティリティクラスを使用して、特定の画面サイズで特定のナビゲーションバー項目を非表示にする。
ナビゲーションバーが折りたたまれたモードと横並びモードの間で切り替わるポイントを変更。@grid-float-breakpoint変数をカスタマイズするか、独自のメディアクエリを追加すること。

JavaScriptプラグインが必要

JavaScriptが無効だと、幅が狭いビューポートの際にナビゲーションバーが折り畳まれたら、ナビゲーションバーを展開して.navbar-collapseのコンテンツを表示することは不可能。

レスポンシブなナビゲーションバーを使用する際は、使用するBootsrapに折り畳みプラグインを組み込む必要がある。

折り畳まれたモバイルナビゲーションバーブレークポイントの変更

ビューポートが@grid-float-breakpointよりも狭い場合、ナビゲーションバーはその垂直モバイルビューに折り畳まれ、ビューポートが少なくとも@grid-float-breakpointの幅にあるときには水平非モバイルビューに展開される。ナビゲーションバーが折りたたまれ/展開されるタイミングを制御するために、この変数をLessソースで調整する。デフォルト値は768px（「小」または「タブレット」画面）。

ナビゲーションバーをアクセス可能にする

<nav>要素を使用するか、<div>などのより一般的な要素を使用する場合は、すべてのナビゲーションバーにrole="navigation"を追加して、支援技術のユーザーにランドマーク領域として明示する。

見本別タブで表示します

レイアウトの違いを見比べて下さい。

●幅一杯のナビゲーションバー
[.navbar > .container-fluid]（ナビゲーションバー） + [.container（ページのコンテンツ）]

ココを押して下さい

●サイトの本体と同じ幅のナビゲーションバー
.container > [[.navbar > .container-fluid]（ナビゲーションバー） + （ページのコンテンツ）]

ココを押して下さい

●メニューのみがサイトの本体と同じ幅のナビゲーションバー
[.navbar > .container]（ナビゲーションバー） + [.container（ページのコンテンツ）]

ココを押して下さい

Bootstrap2.3.2の設定例赤背景が変更箇所

<!-- メニューのみがサイトの本体と同じ幅のナビゲーションバーの場合 -->
<div class="navbar">
	<div class="navbar-inner">
		<div class="container">
			<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</a>
			<a class="brand" href="#">ブランド</a>
			<div class="nav-collapse collapse">
				<ul class="nav">
					<li class="active"><a href="#">ホーム</a></li>
					<li><a href="#">リンク</a></li>
					<li><a href="#">リンク</a></li>
				</ul>
				 <ul class="nav pull-right">
					<li><a href="#">右リンク</a></li>
				</ul>
			</div><!-- /.nav-collapse -->
		</div><!-- /.container -->
	</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->

Bootstrap3.xの設定例緑背景が変更箇所

<!-- メニューのみがサイトの本体と同じ幅のナビゲーションバーの場合 -->
<nav class="navbar navbar-default">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navber" aria-expanded="false">
				<span class="sr-only">ナビゲーションの切替</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">ブランド</a>
		</div><!-- /.navbar-header -->
		<div class="navbar-collapse collapse" id="Navber">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">ホーム</a></li>
				<li><a href="#">リンク</a></li>
				<li><a href="#">リンク</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">右リンク</a></li>
			</ul>
		</div><!-- /.navbar-collapse -->
	</div><!-- /.container -->
</nav>

【設定】

nav.navbar.navbar-default（または div.navbar.navbar-default[role="navigation"]） > div.container（またはdiv.container-fluid） > 〈div.navbar-header > 〔button.navbar-toggle.collapsed[data-toggle="collapse"][data-target="#ID"] > {span.sr-only + [span.icon-bar]×3}〉《モバイル用ナビゲーションボタン》 + a.navbar-brand《ブランド》〕 + {div.navbar-collapse.collapse[ID] > [ul.nav.navbar-nav> <li>]《メニューリスト》}
必ずモバイル用ナビゲーションボタン（button.navbar-toggle[data-toggle="collapse"]）を設定（表示領域の幅768pxで切替）
モバイル用ナビゲーションボタンにはユーザー補助用にspan.sr-onlyで切替がわかるようにする
.navbar-leftまたは.navbar-rightのユーティリティクラスを用いてナビゲーションバーのリンク、フォーム、ボタン、テキストを一列に並べる
※例：リンクを一列に並べるために、左と右で別々の<ul>に置くこと
アクティブ化したいメニューは、li.activeにする

【アクセシビリティの設定】

button.navbar-toggle.collapsedに、aria-expanded="false"属性（支援技術に要素が開閉の状態を伝える）を入れる

【注意】

自動的に折りたためる要素の制御を割り当てるために、data-toggle="collapse"とdata-target="ID" 属性を切替ボタン要素に追加すること（折り畳みプラグインに依存）

【変更履歴】

【3.3.0】button.navbar-toggleに、.collapsedを追加する必要に
【3.3.2】nav.navbarで、role="navigation"（ナビゲーションの役割を支援技術に伝える）の設定が不要に（div.navbar の場合は設定が必要）

【Bootstrap2.3.2との変更箇所】

ナビゲーションバーの設定：div.navbar ⇒ nav.navbar.navbar-default（v3RC2の途中）
ナビゲーションの設定：div.navbar-inner > div.containerは廃止⇒ div.container（またはdiv.container-fluid） > div.navbar-header（v3RC2）
※レスポンシブナビゲーションバーとモバイル用ナビゲーションボタンの設定が必須に（v3RC2）
モバイル用ナビゲーションボタンの部分：.btn.btn-navbar ⇒ .navbar-toggle ⇒ .navbar-toggle.collapsed（3.3.0）
ブランドの設定：.brand ⇒ .navbar-brand
ナビゲーションメニューの設定：.nav-collapse.collapse ⇒ .navbar-collapse.collapse（v3RC2）
メニューリスト：ul.nav ⇒ ul.nav.navbar-nav
縦仕切り線：li.divider-verticalは廃止

<img>のテキストを入れ替えて、ナビゲーションバーのブランドを自分が持つイメージに置き換える。.navbar-brandには独自のpaddingとheightがあるため、イメージに応じていくつかのCSSを再定義する必要がある。

見本

Bootstrap2.3.2の設定例赤背景が変更箇所

<div class="navbar">
	<div class="navbar-inner">
		<a class="brand" href="#">
			<img alt=ブランド" src="..." height="20" width="20">
		</a>
	</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->

Bootstrap3.xの設定例緑背景が変更箇所

<nav class="navbar navbar-default">
  <div class="container-fluid">
		<div class="navbar-header">
			<a class="navbar-brand" href="#">
				<img alt=ブランド" src="..." height="20" width="20">
			</a>
		</div><!-- /.navbar-header -->
	</div><!-- /.container-fluid -->
</nav>

【設定】

a.navbar-brand > <img>

【Bootstrap2.3.2との変更箇所】

a.brand ⇒ a.navbar-brand

見本

設定例

<nav class="navbar navbar-default">
	...
		<div class="navbar-collapse collapse" id="Navber">
			<ul class="nav navbar-nav">
				<li><a href="#">リンク</a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">ドロップダウン <span class="caret"></span></a>
					<ul class="dropdown-menu">
						...
					</ul>
				</li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">右ドロップダウン <span class="caret"></span></a>
					<ul class="dropdown-menu">
						...
					</ul>
				</li>
			</ul>
		</div><!-- /.navbar-collapse -->
	...
</nav>

【設定】

ul.nav.navbar-nav > (<li> +) li.dropdown > {[a.dropdown-toggle[data-toggle="dropdown"] > span.caret]《ドロップダウンリンク》 + [ul.dropdown-menu > <li>]《ドロップダウンメニュー》}
※ul.nav.navbar-nav > li.dropdown内にドロップダウンメニューを入れる

【注意】

モバイルデバイス上での使用に関しては、いくつかの注意点があるので、ナビゲーションバーのドロップダウンを参照

フォームコンテンツを.navbar-formで配置すると、適切な垂直方向の配置と狭いビューポートでの折りたたまれた動作が実現。位置合わせオプションを使用して、ナビゲーションバーのコンテンツ内の位置を決定。

ヘッドアップとして、.navbar-formはmixin経由で.form-inlineとコードの多くを共有。インプットグループのようなフォームコントロールの中には、固定幅をナビゲーションバー内に正しく表示する必要がある場合がある。

見本

Bootstrap2.3.2の設定例赤背景が変更箇所

<form class="navbar-search pull-left">
	<input type="text" class="search-query" placeholder="サイト内検索">
	<button type="submit" class="btn">検索</button>
</form>

Bootstrap3.xの設定例緑背景が変更箇所

<form class="navbar-form navbar-left">
	<div class="form-group">
		<input type="text" class="form-control" placeholder="サイト内検索">
	</div>
	<button type="submit" class="btn btn-default">検索</button>
</form>

【設定】

form.navbar-form > [div.form-group > input.form-control]《コントロール》 + button.btn《ボタン》
※.form-controlのコントロールの幅は自動で調節される

【Bootstrap2.3.2との変更箇所】

検索フォーム：form.navbar-search > input.search-queryはform.navbar-formに統合
inputには、.form-controlを指定

モバイルデバイスの警告

モバイルデバイス上の固定要素内にフォームコントロールを使用することに関するいくつかの注意点があります。詳細については、当社のブラウザサポートの解説に記載。

常にラベルを追加する

すべての入力にラベルを付けないと、スクリーンリーダーでフォームに問題が発生する。これらのインラインフォームでは、.sr-onlyクラスを使用してラベルを非表示にすることが可能。さらに別の方法として、aria-label, aria-labelledby, title属性などで支援技術のラベルを提供する。これらのいずれも存在しない場合、スクリーンリーダーはプレースホルダ属性がある場合はその使用が可能だが、他のラベルの代わりにプレースホルダを使用することは推奨しない。

<form>に存在しない<button>要素に.navbar-btnクラスを追加して、ナビゲーションバーの上下中央に配置。

見本

設定例

<nav class="navbar navbar-default">
	...
		<div class="navbar-collapse collapse" id="Navber">
			<ul class="nav navbar-nav">
				<li><a href="#">リンク</a></li>
			</ul>
			<button type="button" class="btn btn-default navbar-btn">サインイン</button>
		</div><!-- /.navbar-collapse -->
	...
</nav>

【設定】

ボタン（.btn）に.navbar-btnを追加

コンテキスト固有の使用法

標準のボタンクラスと同様に、.navbar-btnは<a>および<input>要素で使用可能。ただし、.navbar-nav内の<a>要素では、.navbar-btnも標準のボタンクラスも使用しないこと。

.navbar-textを持つ要素のテキストの文字列を、通常は<p>タグで囲んで適切なリードと色を付ける。

見本

設定例

<nav class="navbar navbar-default">
	...
		<div class="navbar-collapse collapse" id="Navber">
			<ul class="nav navbar-nav">
				<li><a href="#">リンク</a></li>
			</ul>
			<p class="navbar-text">ココがテキストです</p>
		</div><!-- /.navbar-collapse -->
	...
</nav>

【設定】

p.navbar-textを追加（必ず<p>タグで設定）

通常のナビゲーションバーのナビゲーションコンポーネントにない標準リンクを使用しているユーザーの場合は、.navbar-linkクラスを使用して、デフォルトおよび黒色ナビゲーションバーオプションに適切な色を追加。

見本

設定例

<nav class="navbar navbar-default">
	...
		<div class="navbar-collapse collapse" id="Navber">
			<ul class="nav navbar-nav">
				<li><a href="#">リンク</a></li>
			</ul>
			<p class="navbar-text navbar-right">ココが<a href="#" class="navbar-link">テキスト</a>です</p>
		</div>
	...
</div>

【設定】

p.navbar-text > a.navbar-link

.navbar-leftまたは.navbar-rightユーティリティクラスを使用して、ナビゲーションリンク、フォーム、ボタン、またはテキストを整列させる。どちらのクラスも指定された方向にCSS floatを追加。例えば、ナビゲーションリンクを整列させるには、それぞれのユーティリティクラスを適用して別の<ul>に配置。

これらのクラスは、.pull-leftと.pull-rightのmixinバージョンだが、メディアクエリに領域が設定されているため、デバイスサイズ全体でナビゲーションバーコンポーネントをより簡単に処理可能。

【Bootstrap2.3.2との変更箇所】

左寄せ：.pull-left ⇒ .navbar-left
右寄せ：.pull-right ⇒ .navbar-right

複数のコンポーネントの右揃え

ナビゲーションバーは現在複数の.navbar-rightクラスに制限がある。コンテンツを適切に配置するために、最後の.navbar-right要素に負のマージンを使用。そのクラスを使用する要素が複数ある場合、これらの余白は意図したとおりに機能しない。

v4でそのコンポーネントを書き直せたら、これを再考する。

.navbar-fixed-topを追加し、ナビゲーションバーコンテンツのセンターとパッドに.containerまたは.container-fluidを追加。

見本別タブで表示します

ココを押して下さい

設定例

<body style="padding-top:70px;">
	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container">
			...
		</div><!-- /.container -->
	</nav>

	<div class="container">
		<div class="page-header">
			<h1>ブランド</h1>
		</div>
		<p>ココにサイトの文章が入ります。</p>
		...
	</div><!-- /.container -->
</body>

【設定】

.navbarに.navbar-fixed-topを追加

【注意】

スクロールした時に最上部がナビゲーションバーと重なるので、別途<body>タグにpadding-top:70px;のCSSスタイルを設定

`<body>`に`padding`が必要

<body>の上部にpaddingを追加しない限り、固定ナビゲーションバーが他のコンテンツと重なる。自分で値を試してみるか、下記のスニペットを使用すること。ヒント：デフォルトでは、ナビゲーションバーは高さ50px。

body { padding-top: 70px; }

<head>内のブートストラップCSSの後にこれを必ず組み入れること。

.navbar-fixed-bottomを追加し、ナビゲーションバーコンテンツのセンターとパッドに.containerまたは.container-fluidを追加。

見本別タブで表示します

ココを押して下さい

設定例

<body style="padding-bottom:70px;">
	<nav class="navbar navbar-default navbar-fixed-bottom">
		<div class="container">
			...
		</div><!-- /.container -->
	</nav>

	<div class="container">
		<div class="page-header">
			<h1>ブランド</h1>
		</div>
		<p>ココにサイトの文章が入ります。</p>
		...
	</div><!-- /.container -->
</body>

【設定】

.navbarに.navbar-fixed-bottomを追加

【注意】

スクロールした時に最下部がナビゲーションバーと重なるので、別途<body>タグにpadding-bottom:70px;のCSSスタイルを設定

`<body>`に`padding`が必要

<body>の下部にpaddingを追加しない限り、固定ナビゲーションバーが他のコンテンツと重なる。自分で値を試してみるか、下記のスニペットを使用すること。ヒント：デフォルトでは、ナビゲーションバーは高さ50px。

body { padding-bottom: 70px; }

<head>内のブートストラップCSSの後にこれを必ず組み入れること。

.navbar-static-topを追加してページ全体をスクロールし、センターとパッドのナビゲーションバーコンテンツに.containerまたは.container-fluidを含めることで、全幅のナビゲーションバーを作成。

.navbar-fixed-*クラスとは異なり、<body>のpaddingを変更する必要はない。

見本別タブで表示します

ココを押して下さい

設定例

<body>
	<nav class="navbar navbar-default navbar-static-top">
		<div class="container">
			...
		</div><!-- /.container -->
	</nav>

	<div class="container">
		<div class="page-header">
			<h1>ブランド</h1>
		</div>
		<p>ココにサイトの文章が入ります。</p>
		...
	</div><!-- /.container -->
</body>

【設定】

.navbarに.navbar-static-topを追加

.navbar-inverseを追加して、ナビゲーションバーの外観を変更。

見本

設定例

<nav class="navbar navbar-inverse">
	<div class="container">
			...
	</div><!-- /.container -->
</nav>

【設定】

.navbarに.navbar-defaultではなく、.navbar-inverseを追加

現在のページの位置をナビゲーション階層内に示す。

セパレータは：beforeとcontentによってCSSに自動的に追加される。

見本

Bootstrap2.3.2の設定例赤背景が変更箇所

<ul class="breadcrumb">
	<li><a href="#">ホーム</a> <span class="divider">/</span></li>
	<li><a href="#">ライブラリ</a> <span class="divider">/</span></li>
	<li class="active">データ</li>
</ul>

Bootstrap3.xの設定例

<ul class="breadcrumb">
	<li><a href="#">ホーム</a></li>
	<li><a href="#">ライブラリ</a></li>
	<li class="active">データ</li>
</ul>

【設定】

ul.breadcrumb > <li>
現在のページをアクティブ化したい場合は、li.activeにする

【Bootstrap2.3.2との変更箇所】

仕切りに使う<span class="divider">/</span>は不要に

複数ページのページ設定コンポーネント、またはより簡単なページャーの代替方法を使用して、サイトやアプリのページングリンクを提供。

ページ送りの設定（Default pagination）v3.0設定変更⇒v3.3.7再変更

Rdioに触発された簡単なページ設定。アプリや検索結果に最適。大きなブロックは見逃すのが難しく、簡単に拡大縮小可能で、大きなクリック領域を提供。

見本

Bootstrap2.3.2の設定例赤背景が変更箇所

<div class="pagination">
	<ul>
		<li><a href="#">&laquo;</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="#">&raquo;</a></li>
	</ul>
</div>

Bootstrap3.xの設定例緑背景が変更箇所

<nav aria-label="ページ送り">
	<ul class="pagination">
		<li>
			<a aria-label="前へ" href="#">
				<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="次へ">
				<span aria-hidden="true">&raquo;</span>
			</a>
		</li>
	</ul>
</nav>

【設定】

nav[aria-label] > ul.pagination > <li>
«、»、←、→を使うときは、それぞれ«、»、←、→と記述してエスケープ処理をし、span[aria-hidden="true"]で囲む

【アクセシビリティの設定】

<nav>に、aria-label属性（要素に対するラベル付け）を入れる
エスケープ文字やアイコンを使用する場合は、
- それを囲む<span>に、aria-hidden="true"属性（スクリーンリーダー等で読み上げをスキップさせる）
- "前へ"と"次へ"を意味するリスト部分に、ユーザー補助用のラベルとして[aria-label]とspan.sr-only
をそれぞれ入れる

【変更履歴】

【3.3.2】アクセシビリティの設定として、[aria-label]とspan[aria-hidden="true"]の設定が必要に
【3.3.7】アクセシビリティの設定として、nav[aria-label]で囲むことに

【Bootstrap2.3.2との変更箇所】

div.pagination > ul ⇒ nav[aria-label] > ul.pagination
アクセシビリティの設定が追加

ページ送り構成要素のラベリング

ページ送りの構成要素は、スクリーンリーダーや他の支援テクノロジーへのナビゲーション・セクションと識別するため、<nav>要素で囲む必要がある。
これに加えて、ページのようにすでに複数のナビゲーション・セクション（例えばヘッダ内の主要なナビゲーションやサイドバーのナビゲーション）を持っている可能性がある場合、<nav>にaria-labelの記述をすることが望ましい。
例えばページ送りの構成要素が検索結果のセットとの間で移動するために使用される場合、適切なラベルはaria-label="検索結果ページ"となる。

ページ送りの無効化とアクティブ化（Disabled and active states）

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

見本1：アンカーリンク `<a>` に設定

設定例

<nav aria-label="...">
	<ul class="pagination">
		<li class="disabled"><a href="#" aria-label="前へ"><span aria-hidden="true">&laquo;</span></a></li>
		<li class="active"><a href="#">1<span class="sr-only">(現位置)</span></a></li>
		<li><a href="#">2</a></li>
		...
	</ul>
</nav>

見本2：`<span>` に設置

意図したスタイルを維持したままクリック機能を削除するには、<span>にしてアクティブまたは無効のアンカーを外すか、前/後の矢印の場合はアンカーを省略することを推奨。

設定例

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

【設定】

リンクを無効化したいページのリストを、li.disabledにする
現在のページをアクティブ化したい場合は、li.activeにする
無効またはアクティブ化するページはアンカーリンク（a）でなくspanにしてもよい

【アクセシビリティの設定】

アクティブ化する場合は、li.activeのリンクに、ユーザー補助用にspan.sr-onlyを入れて現在の位置であることを伝える

ページ送りのサイズ（Sizing）

ページ送りのサイズを大きくしたり小さくしたいなら、.pagination-lgまたは.pagination-smを追加。

設定例

<nav aria-label="...">
	<ul class="pagination pagination-{size}">
		<li><a href="#" aria-label="前へ"><span aria-hidden="true">&laquo;</span></a></li>
		<li><a href="#">1</a></li>
		...
	</ul>
</nav>

サイズの種類クラス変更

●大きめ：.pagination-lg

●小さめ：.pagination-sm

※標準

【設定】

.paginationに.pagination-{size}（上記の「サイズの種類」から選択）を追加

【Bootstrap2.3.2との変更箇所】

大きめ：.pagination-large ⇒ .pagination-lg（v3RC1の途中）
小さめ：.pagination-small ⇒ .pagination-sm（v3RC1の途中）
極小：.pagination-miniは廃止

その他Bootstrap3.0で廃止になったもの（ページ送り関連）

配置（Alignment）

センタリング：.pagination-centered
右寄せ：.pagination-right

ページャー（Pager）v3.3.7設定変更

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

デフォルトの実例（Default example）

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

見本

設定例

<nav aria-label="...">
	<ul class="pager">
		<li><a href="#"><span aria-hidden="true">&larr;</span> 前</a></li>
		<li><a href="#">現在</a></li>
		<li><a href="#">次 <span aria-hidden="true">&rarr;</span></a></li>
	</ul>
</nav>

【設定】

nav[aria-label] > ul.pager > <li>
«、»、←、→を使うときは、それぞれ«、»、←、→と記述してエスケープ処理をし、span[aria-hidden="true"]で囲む

【アクセシビリティの設定】

<nav>に、aria-label属性（要素に対するラベル付け）を入れる
エスケープ文字を使用する場合は、それを囲む<span>に、aria-hidden="true"属性（スクリーンリーダー等で読み上げをスキップさせる）を入れる

【変更履歴】

【3.3.2】ラベルとしてエスケープ文字にspan[aria-hidden="true"]の設定が必要に
【3.3.7】ラベルとしてnav[aria-label]で囲むことが必要に

また、各リンクを両端に整列させることも可能。

見本

設定例

<nav aria-label="...">
	<ul class="pager">
		<li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 前</a></li>
		<li><a href="#">現在</a></li>
		<li class="next"><a href="#">次 <span aria-hidden="true">&rarr;</span></a></li>
	</ul>
</nav>

【設定】

li.previousにすると左寄せになり、li.nextにすると右寄せになる

ページャーのリンクは、ページ送りの一般的な.disabledユーティリティクラスも使用可能。

見本

設定例

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

【設定】

リンクを無効化したいページのリストを、li.disabledにする

Components1 (adsbygoogle = window.adsbygoogle || []).push({});

グリフアイコン（Glyphicons）

アイコンの種類（Available glyphs）v3.3.2一部追加

アイコンの設定（How to use）v3.2.0設定変更

他のコンポーネントと混用しないこと

空の要素でのみ使用する

アイコンのフォントの場所を変更する

アクセス可能なアイコン

見本

Bootstrap2.3.2の設定例 赤背景が変更箇所

Bootstrap3.xの設定例 緑背景が変更箇所

実例（Examples）

見本

設定例

アラートで使用の場合

グリフアイコン以外のアイコンフォント

Font Awesome4

Elusive Icons

ドロップダウン（Dropdowns）

ドロップダウンの設定（Example）v3.3.5設定変更

ドロップダウンメニュー

見本 メニューのみを表示

Bootstrap2.3.2の設定例 赤背景が変更箇所

Bootstrap3.xの設定例 緑背景が変更箇所

ボタンドロップダウン

見本

Bootstrap2.3.2の設定例 赤背景が変更箇所

Bootstrap3.xの設定例 緑背景が変更箇所

ボタンドロップアップ

見本

設定例

ドロップダウンメニューの配置（Alignment）v3.1.0設定変更

追加の位置決めが必要な場合がある

推奨されていない.pull-rightの位置合わせ

見本

Bootstrap2.3.2（～3.0.3）の設定例 赤背景が変更箇所

Bootstrap3.x（3.1.0～）の設定例 緑背景が変更箇所

ドロップダウンメニューの見出し（Headers）v3.0新設

見本 メニューを開いた状態で表示

設定例

ドロップダウンメニューの横仕切り線（Divider）v3.3.5設定変更

見本 メニューを開いた状態で表示

Bootstrap2.3.2の設定例

Bootstrap3.xの設定例 緑背景が変更箇所

ドロップダウンメニューリンクの無効化（Disabled menu items）

見本 メニューを開いた状態で表示

設定例

Bootstrap3.0で廃止になったもの（ドロップダウン関連）

ボタングループ（Button groups）v3.3.2設定変更

ボタングループのツールチップとポップオーバーには特別な設定が必要

正しいroleの確保とラベルの提供

基本のボタングループ（Basic example）

見本

Bootstrap2.3.2の設定例

Bootstrap3.xの設定例 緑背景が変更箇所

ボタンツールバー（Button toolbar）

見本

Bootstrap2.3.2の設定例

Bootstrap3.xの設定例 緑背景が変更箇所

ボタングループのサイズ（Sizing）v3.0新設

設定例

サイズの種類

ドロップダウンボタンつきボタングループ（Nesting）v3.0新設

見本

設定例

積み重ねボタングループ（Vertical variation）

見本

設定例

等幅サイズのボタングループ（Justified button groups）v3.0新設

枠線の処理

IE8と枠線

アンカーリンク<a>で設定

見本

設定例

ボタンとして機能するリンク

ボタン<button>で設定 v3.0.3新設

見本

設定例

ボタンドロップダウン（Button dropdowns）

プラグインの依存関係

Components1

Bootstrap2.3.2の設定例赤背景が変更箇所

Bootstrap3.xの設定例緑背景が変更箇所

見本メニューのみを表示

Bootstrap2.3.2の設定例赤背景が変更箇所

Bootstrap3.xの設定例緑背景が変更箇所

Bootstrap2.3.2の設定例赤背景が変更箇所

Bootstrap3.xの設定例緑背景が変更箇所

推奨されていない`.pull-right`の位置合わせ

Bootstrap2.3.2（～3.0.3）の設定例赤背景が変更箇所

Bootstrap3.x（3.1.0～）の設定例緑背景が変更箇所

見本メニューを開いた状態で表示

見本メニューを開いた状態で表示

Bootstrap3.xの設定例緑背景が変更箇所

見本メニューを開いた状態で表示

正しい`role`の確保とラベルの提供

Bootstrap3.xの設定例緑背景が変更箇所

Bootstrap3.xの設定例緑背景が変更箇所

アンカーリンク`<a>`で設定

ボタン`<button>`で設定 v3.0.3新設

Bootstrap2.3.2の設定例赤背景が変更箇所

Bootstrap3.xの設定例緑背景が変更箇所

Bootstrap2.3.2の設定例赤背景が変更箇所

Bootstrap3.xの設定例緑背景が変更箇所

サイズの種類クラス変更

テキスト`<input>`のみ

Bootstrap2.3.2の設定例赤背景が変更箇所

Bootstrap3.xの設定例緑背景が変更箇所

Bootstrap2.3.2の設定例赤背景が変更箇所

Bootstrap3.xの設定例緑背景が変更箇所

Bootstrap2.3.2の設定例赤背景が変更箇所

Bootstrap3.xの設定例緑背景が変更箇所

Bootstrap2.3.2の設定例赤背景が変更箇所

Bootstrap3.xの設定例緑背景が変更箇所

Bootstrap3.xの設定例緑背景が変更箇所