メインコンテンツへスキップ

Bootstrap3の使い方をBootstrap2.xからの変更箇所を交えて解説しています。

アイコンの種類(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のために、アイコンとテキストの間にはスペースを入れること。

見本

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

Elusive Icons

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

ドロップダウンの切替(ボタンまたはリンク)とドロップダウンメニューを.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-menurole="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"が追加

【参考】

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

見本

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-rightdropdown-menu.dropdown-menu-right
  • 左寄せ:.dropdown-menu.pull-leftdropdown-menu.dropdown-menu-left

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

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

設定例

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

【設定】

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

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

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

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との変更箇所】

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

リンクを無効にするには、ドロップダウンリストの<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を入れる

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

基本のボタングループ(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】アクセシビリティの設定が追加

ボタンツールバー(Button toolbar)

複雑なコンポーネントの場合は、<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新設

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

アンカーリンク<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>

ボタン<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内に配置し、適切なメニューマークアップを提供。

ボタンドロップダウンの設定(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-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を追加して使用。

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

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

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

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

見本

●前にアドオン

@

●後にアドオン

.00

●前後にアドオン

$ .00

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

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クラスからマークアップを共有。修飾子クラスを入れ替えて各スタイルを切り替える。

.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"属性(支援技術にコンテンツ表示用の役割を伝える)を入れる

【注意】

【追加変更】

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

【Bootstrap2.3.2との変更箇所】

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

同様の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"属性(支援技術にコンテンツ表示用の役割を伝える)を入れる

【注意】

【追加変更】

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

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

見本

設定例

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

【設定】

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

【Bootstrap2.3.2との変更箇所】

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

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

見本

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


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

設定例

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

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

【設定】

  • ul.nav.nav-justifiedを追加

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

見本

●タブナビゲーション


●ピルナビゲーション

設定例

<!-- タブナビゲーション -->
<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"は入れない

見本

設定例

<!-- タブナビゲーション -->
<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以降サポートされていない。

見本 別タブで表示します

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

●幅一杯のナビゲーションバー
[.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.navbarnav.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.navul.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.branda.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-queryform.navbar-formに統合
  • inputには、.form-controlを指定

<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-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-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スタイルを設定

.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スタイルを設定

.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を追加

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

セパレータは:beforecontentによって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>
  • «»を使うときは、それぞれ&laquo;&raquo;&larr;&rarr;と記述してエスケープ処理をし、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 > ulnav[aria-label] > ul.pagination
  • アクセシビリティの設定が追加

ページ送りの無効化とアクティブ化(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>
  • «»を使うときは、それぞれ&laquo;&raquo;&larr;&rarr;と記述してエスケープ処理をし、span[aria-hidden="true"]で囲む

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

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

【変更履歴】

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

整列化したページャー(Aligned links)

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

見本

設定例

<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にすると右寄せになる

ページャーのリンク無効化(Optional disabled state)

ページャーのリンクは、ページ送りの一般的な.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にする