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

Bootstrap3移行ガイド

PST(米国太平洋時間)2013/8/19にBootstrap3.0.0が正式に公開されました。これまでのBootstrap2.xから3.xに変更するにはcssやjsファイルを差し替えただけではデザインが崩れてしまいます。そこでBootstrap3の使い方を2.xからの変更箇所を交えて解説しています。

解説は最終版(v3.4.1)に対応しています。
※2019/7/24をもってBootstrap3のサポートは終了したと発表がありました。

※Bootstrap5.xの解説は、Bootstrap5設置ガイドをご覧下さい。
※Bootstrap4.xの解説は、Bootstrap4移行ガイドをご覧下さい。

Bootstrapは、Mark Otto(@mdo)、Jacob Thornton(@fat)の両氏によって2010年の中頃にTwitter社で作成されました。オープンソースのフレームワークになる前に、BootstrapはTwitter Blueprintという名で知られていました。数か月の開発期間を経て、Twitter社は最初のHack Week(社内イベント)を開催し、あらゆる技術レベルの開発者が外部の指導を受けずに飛び込んだため、プロジェクトが急激に大きくなりました。公開前の1年以上の間、同社の社内ツール開発のスタイル・ガイドとして使用され、今日も続いています。

当初2011年8月19日(金)公開され、その後v2とv3による2つの大きな書き換えを含む20回以上の更新をしてきました。Bootstrap2では、フレームワーク全体にオプションのスタイル・シートとしてレスポンシブ機能を追加しました。Bootstrap3は、それを基にしてモバイルファーストのアプローチをデフォルトでレスポンシブするようにライブラリを再度書き直しました。

Bootstrap3公式サイトHistoryより

Bootstrapは当初米Twitter社から提供されていたが、プロジェクトのメイン開発者であるMark Otto、Jacob Thorntonの両氏は2012年9月末までにTwitter社を退社し、Twitter社から分離して独立したオープンソースプロジェクトとなった。
そのため名称が「Twitter Bootstrap」から「Bootstrap」に変更され、サイトもBootstrap3の時点でhttp://twitter.github.com/bootstrap/からhttps://getbootstrap.comに移転した。

※公式サイトの各バージョンの解説は、https://getbootstrap.com/docs/versions/にある(3.0、3.1、3.2を除く)。

名称について

プロジェクトとフレームワークは、常にBootstrapと呼ばれなければなりません。前にTwitterは不要で、大文字は省略形であるBのみでsは大文字ではありません。

Bootstrap3公式サイトNameより

Bootstrap

BootStrap

Twitter Bootstrap

ライセンスについて

Bootstrapは、MITライセンスの下で公開され、2011年の公開から現在まで、著作権はTwitter社が有している。

更新履歴

  • PST 2013/7/27にBootstrap v3RC1が公開された。
  • PST 2013/8/13にBootstrap v3RC2が公開された。
  • PST 2013/8/19にv3.0.0正式版が公開された。
  • PST 2013/10/29にv3.0.1が公開された。
  • PST 2013/11/6にv3.0.2が公開された。
  • PST 2013/12/5にv3.0.3が公開された。
  • PST 2014/1/30にv3.1.0が公開された。
  • PST 2014/2/13にv3.1.1が公開された。
  • PST 2014/6/26にv3.2.0が公開された。
  • PST 2014/10/29にv3.3.0が公開された。
  • PST 2014/11/12にv3.3.1が公開された。
  • PST 2015/1/19にv3.3.2が公開された。
  • v3.3.3については、v3.3.2公開直後にSassでバグが見つかったのでv3.3.2.1として修正版が公開されたが、それをv3.3.3として再パッケージ化したので、混乱を避けるためBootstrap全体のバージョンでは存在しない。
  • PST 2015/3/16にv3.3.4が公開された。
  • PST 2015/5/15にv3.3.5が公開された。
  • PST 2015/11/24にv3.3.6が公開された。
  • PST 2016/7/25にv3.3.7が公開された。
  • PST 2018/12/13にv3.4.0が公開された(アラート、カルーセル、折りたたみ、ドロップダウン、モーダル、タブの各コンポーネントでXSSの脆弱性を修正)。
  • PST 2019/2/13にv3.4.1が公開された(新しいHTMLサニタイザーを実装することにより、ツールチップとポップオーバープラグインのXSSの脆弱性(CVE-2019-8331)を修正)。

Bootstrap3の今後

Bootstrapプロジェクトチームは、2014/10/29のv3.3.0公開時のブログ記事でBootstrap4のalpha版が数週間でできると発表した(2015/8/19にBootstrap v4.0.0-alphaを公開)。

Bootstrap3を出す際に、Bootstrap2のサポートを廃止したが、多くのユーザーに混乱が生じたので、Bootstrap4を公開後も引き続きBootstrap3のバグの改善やドキュメントの更新を行うとした。

2018/1/18に正式版のBootstrap v4.0.0が公開され、Bootstrap3は現在メンテナンスモードにあり、Bootstrap4に注力できるようにするため新しい機能は搭載されないことになった。

さらに2019/7/24をもってサポート終了となり、重要なセキュリティアップデートは行われないことがブログで発表された。

  • モバイルファースト
  • レスポンシブデザインに1本化(bootstrap-responsive.cssは不要に、レスポンシブにしたくない場合は「レスポンシブの無効化」を参照すること)
  • アイコンはpng画像からwebフォントに変更(img/は不要、fonts/が追加)
  • Internet Explorer7とFirefox3.6はサポート外に
  • フラットデザインの導入(フラットにしたくない場合のためにbootstrap-theme.cssが3RC2の途中で追加)
  • 一般的なWeb標準に準拠して、容易にアクセシビリティを高めることが可能

v3.4.xでの変更

3.4.1
ツールチップとポップオーバープラグインのXSSの脆弱性(CVE-2019-8331)を修正するためHTMLサニタイザーを実装
3.4.0
グリッドシステム:左右脇の余白を削除する .row-no-gutters を追加
省略語:<abbr> 要素の二重枠の表示を削除
※アラート、カルーセル、折りたたみ、ドロップダウン、モーダル、タブの各コンポーネントでXSSの問題を解決
※解説のリンク先などを修正

v3.3.xでの変更

3.3.7
Bootstrap3の設置方法:CDNで使用する場合の各提供ファイルのバージョン変更
基本テンプレートの設定:html5shiv.jsのバージョン変更、jQuery3に対応
ページ送り:アクセシビリティの設定が一部変更
カルーセル:オプションのpauseのタイプにnullが追加
3.3.6
Bootstrap3の設置方法:CDNで使用する場合にintegrity属性とcrossorigin属性が追加に
インプットグループ:基本のインプットグループにラベル付きアドオンが追加
インプットグループ:複数のボタンの新設
3.3.5
ドロップダウン:アクセシビリティの設定が一部変更
リストグループ:ボタンによるリストグループの新設
モーダル:アクセシビリティの設定が一部変更
ツールチップ:イベントにinserted.bs.tooltipが追加
ポップオーバー:イベントにinserted.bs.popoverが追加
ボタンプラグイン:ステートフルボタンの廃止
ボタンプラグイン:メソッドの$().button('loading') も廃止
アフィックスプラグイン:メソッドの新設
3.3.4
グリフアイコン:.glyphicon-bitcoin.glyphicon-btc.glyphicon-xbt.glyphicon-yen.glyphicon-jpy.glyphicon-ruble.glyphicon-rubでも使用可能に
モーダル:グリッドシステムの使用の新設
モーダル:メソッドに.modal('handleUpdate')を追加
3.3.2
テーブル:アクセシビリティの設定が追加
フォーム:アクセシビリティの設定変更
フォーム:横並びフォームにラベルを表示する場合とインプットグループを使用する場合が追加
フォーム:アイコンつきコントロールでインプットグループを使用する場合が追加
ヘルパークラス:閉じるアイコンのアクセシビリティの設定が一部変更
グリフアイコン:アイコンの種類が追加
ボタングループ:アクセシビリティの設定が追加
インプットグループ:アクセシビリティの設定が追加
ナビゲーション:ドロップダウンメニューつきナビゲーションでアクセシビリティの設定が追加
ナビゲーションバー:アクセシビリティの設定が一部変更
ページ送り:アクセシビリティの設定が追加
アラート:アラートメッセージを閉じるボタンのアクセシビリティの設定が一部変更
プログレスバー:低いパーセンテージのラベルが自動から手動設定に
メディアオブジェクト:設定変更
モーダル:アクセシビリティの設定が一部変更
アラートメッセージプラグイン:アクセシビリティの設定が一部変更
3.3.1
フォーム:ヘルプテキストにアクセシビリティの設定が追加
フォーム:アイコンつきコントロールでアクセシビリティの設定が追加
ボタンドロップダウン:アクセシビリティの設定が追加
モーダル:切替ボタンに基づくモーダルコンテンツの取得の新設
タブプラグイン:アクセシビリティの設定が一部変更
3.3.0
コード:ユーザー入力で<kbd>を入れ子にすると太字で表記
フォーム:チェックボックス&ラジオボタンにラベルなしが追加
フォーム:静的テキストに横並びフォームでの設定が追加
テーブル:表題(<caption>)のスタイルが追加
グリフアイコン:.glyphicon-euro.glyphicon-eurでも使用可能に
ナビゲーション:タブナビゲーションのアクセシビリティの設定が追加
ナビゲーション:ピルナビゲーションのアクセシビリティの設定が追加
ナビゲーション:等幅サイズのナビゲーションがサポート外に
ナビゲーションバー:一部設定変更
メディアオブジェクト:設定変更
メディアオブジェクト:メディアの配置の新設
動画の埋め込み:<video>にも対応
JavaScriptの概要:プログラムに基づいたAPIのデフォルト設定が追加
モーダル:オプションのremoteが廃止
タブプラグイン:アクセシビリティの設定が一部変更
タブプラグイン:イベントにhide.bs.tabhidden.bs.tabを追加
ボタンプラグイン:切替ボタンのアクセシビリティの設定が追加
折り畳み:アコーディオンの設定の一部設定変更、アクセシビリティの設定の追加とパネルコンテンツでリストグループでの設定が可能に
カルーセル:アクセシビリティの設定が追加
カルーセル:オプションにkeyboardが追加

v3.2.xでの変更

3.2.0
基本のテンプレート:html5shiv.jsのバージョン変更
文字の体裁:文字の配置に文字を折り返さない.text-nowrapの新設
文字の体裁:文字の変換の新設
コード:コード表示<code>のスタイルの変更
フォーム:読み取り専用コントロールの新設
フォーム:水平フォームのサイズの新設
ヘルパークラス:閉じるアイコンのアクセシビリティの設定が一部変更
フォーム:アイコンつきコントロールで.sr-onlyでラベルが隠されたオプションのアイコンが追加
ヘルパークラス:コンテンツの表示と非表示にスクリーンリーダーを除いて非表示(フォーカス時には表示)の新設
レスポンシブユーティリティ:閲覧時の表示/非表示で閲覧時の表示のクラス変更
レスポンシブユーティリティ:印刷時の表示/非表示で印刷時の表示のクラス変更
グリフアイコン:アクセシビリティの設定が追加
インプットグループ:ドロップダウンつきボタンアドオンの一部設定変更
インプットグループ:分離ボタンのアドオンの一部設定変更
アラート:アラートメッセージを閉じるボタンのクラス変更とアクセシビリティの設定が一部変更
プログレスバー:低いパーセンテージのラベルの新設
プログレスバー:ストライププログレスバーの設定変更
プログレスバー:アニメーションプログレスバーの設定変更
リストグループ:リンクの無効の新設
動画の埋め込み:新設
モーダル:アクセシビリティの設定が一部変更
タブプラグイン:アクセシビリティの設定が追加
ツールチップ:オプションにtemplateviewportが追加
ポップオーバー:次のクリックで閉じるの新設
ポップオーバー:オプションにtemplateviewportが追加
アラートメッセージプラグイン:閉じるボタンのクラス変更とアクセシビリティの設定が一部変更
ボタンプラグイン:チェックボックス/ラジオボタンでチェック済み状態の際、<input>checked属性を入れることに
カルーセル:イベントにdirectionrelatedTargetのプロパティが追加
アフィックスプラグイン:オプションにtargetが追加

v3.1.xでの変更

v3.0.xでの変更

Bootstrapは、最新のデスクトップとモバイルブラウザで最適に動作するように作られている。古いブラウザでは、一部のコンポーネントのレンダリングは完全に機能しているが、異なるスタイルの表示が可能。

サポート対応ブラウザ(Supported browsers)

具体的には、次のブラウザとプラットフォームの最新バージョンをサポート。

WebKit、Blink、またはGeckoの最新バージョンを直接またはプラットフォームのWebビューAPI経由で使用する代替ブラウザでは、明示的にサポートしていないが、Bootstrapは(ほとんどの場合)これらのブラウザで正しく表示され、正しく機能するはずである。より具体的なサポート情報は以下のとおり。

モバイルデバイス(Mobile devices)

一般的にBootstrapは各主要プラットフォームの標準ブラウザの最新バージョンをサポート対応済。プロキシブラウザ(Opera Mini、Opera Mobileのターボモード、UC Browser Mini、Amazon Silkなど)はサポート対応していない。

Chrome Firefox Safari
Android サポート対応 サポート対応 該当なし
iOS サポート対応 サポート対応 サポート対応

【変更履歴】

  • 【3.2.0】Android版Firefoxに対応

デスクトップブラウザ(Desktop browsers)

同様に、ほとんどのデスクトップブラウザの最新バージョンがサポート対応済。

Chrome Firefox Internet Explorer Opera Safari
Mac サポート対応 サポート対応 該当なし サポート対応 サポート対応
Windows サポート対応 サポート対応 サポート対応 サポート対応 サポート非対応

Windowsでは、Internet Explorer 8-11をサポート

Firefoxの場合、最新の通常安定版に加えて、Firefoxの延長サポート版(ESR)のバージョンもサポートしている。

Bootstrap3は、Chromium、Linux版Chrome、Linux版Firefox、Internet Explorer7、Microsoft Edgeを正式にはサポートしないが、非公式にはこれらでも十分に表示され動作するはず。
※Microsoft Edgeは、Bootstrap4以降でサポート対象

Bootstrapが取り組まなければならないいくつかのブラウザのバグのリストについては、Bootstrap3公式のWall of browser bugsに記載。

Internet Explorer8と9(Internet Explorer 8 and 9)

Internet Explorer 8,9もサポートしているが、一部のCSS3のプロパティとHTML5の要素がこれらのブラウザで完全にサポートしていないので注意。また、Internet Explorer 8では、Respond.jsを使用してメディアクエリのサポートを有効にする必要がある(設置方法は基本のテンプレート参照)。
※Internet Explorer8,9は、Bootstrap4以降はサポート対象外。

Feature Internet Explorer 8 Internet Explorer 9
border-radius コーナーの角丸 サポート非対応 サポート対応
box-shadow ボックスの影 サポート非対応 サポート対応
transform 2D/3D変形 サポート非対応 -msプレフィックスつきでサポート対応
transition 変遷効果 サポート非対応
placeholder テキストフィールドの初期値 サポート非対応

CSS3とHTML5の機能のブラウザサポートの詳細については、Can I use...に記載。

Internet Explorer 8とRespond.js(Internet Explorer 8 and Respond.js)

Internet Explorer 8の開発環境と運用環境でRespond.jsを使用する際には、以下の注意点がある。

Respond.jsとクロスドメインCSS

別の(サブ)ドメインでホストされているCSS(例:CDN)でRespond.jsを使用するには、追加の設定が必要。詳細については、Respond.jsのドキュメントに記載。

Respond.jsとfile://

ブラウザのセキュリティ規則のため、Respond.jsは(ローカルHTMLファイルを開くときなど)file://プロトコルで表示されるページでは機能しない。Internet Explorer8でレスポンシブ機能をテストするには、HTTP(S)でページを表示すること。詳細については、Respond.jsのドキュメントに記載。

Respond.jsと@import

Respond.jsは@import経由で参照されるCSSでは動作しない。特に、いくつかのDrupal設定は@importを使用することが知られている。詳細については、Respond.jsのドキュメントに記載。

Internet Explorer 8とbox-sizing(Internet Explorer 8 and box-sizing)

Internet Explorer8は、box-sizing: border-box;min-width,max-width,min-height,max-heightとの組み合わせて使用することを完全にサポートしていないため、v3.0.1以降.containersではmax-widthを使用しなくなった。

Internet Explorer 8と@font-face(Internet Explorer 8 and @font-face)

Internet Explorer8は、@font-face:beforeと組み合わせるといくつかの問題がある。Bootstrap3ではグリフアイコンをその組み合わせで使用しているため、ページがキャッシュされ、ウィンドウの上にマウスを置かずに読み込む(つまり、更新ボタンを押すかiframeで何かを読み込む)場合、ページはフォントが読み込まれる前にレンダリングされてしまうので、ページ(body)にカーソルを合わせるといくつかのアイコンが表示され、残りのアイコンの上にカーソルを置くと同様に表示される(詳細については問題#13863に記載)。

Internet Explorerの互換モード(IE Compatibility modes)

Bootstrap3は、古いInternet Explorerの互換モードをサポートしていない。IEの最新のレンダリングモードの使用を確実にするには適切な <meta> タグをページに組み込むこと:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

デバッグツールを開いてドキュメントモードの確認:F12キーを押して「ドキュメントモード」を確認。

このタグは、サポートしている各バージョンのInternet Explorerで最高のレンダリングを実現するため、Bootstrap3の公式のドキュメントと見本のすべてに組み込まれている。
※このサイトも同様。

詳細については、StackOverflowの質問に記載。

Windows8でのInternet Explorer10とWindows Phone8での注意(Internet Explorer 10 in Windows 8 and Windows Phone 8)

Internet Explorer10は、デバイス幅をビューポートの幅と区別しないため、Bootstrap3のCSSメディアクエリが適切に適用されない。これを修正するには、通常は以下のCSSの迅速なスニペットを追加するだけ:

@-ms-viewport       { width: device-width; }

しかし、これはアップデート3(別名GDR3)より古いWindows Phone8を実行しているデバイスでは、狭い「phone」表示でなくほとんどデスクトップ表示が表示されるため、この機能が動作しないので、これを修正するには、バグの回避として以下のCSSやJavaScriptを組み込む必要がある。

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
// Copyright 2014-2018 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
	var msViewportStyle = document.createElement('style')
	msViewportStyle.appendChild(
		document.createTextNode(
			'@-ms-viewport{width:auto!important}'
		)
	)
	document.querySelector('head').appendChild(msViewportStyle)
}

詳細および使用方法のガイドラインについては、Windows Phone8とDevice-Widthに記載。

注意:Bootstrap3.xの公式マニュアルと実例にはこれが組み込まれている
※このサイトでは省略。

Safariのパーセンテージ切上げ機能(Safari percent rounding)

iOSv8.0とOS Xのv7.1以前のバージョンのSafariのレンダリングエンジンには、.col-*-1グリッドクラスで使用される小数点以下の桁数に問題があった。したがって、12個のグリッド列のページを作っていたら、列が他の行の列と比較して短くなっている。Safari/iOSのアップグレードに加えて、回避策としていくつかの選択肢がある。

  • 最後のグリッド列に.pull-rightを追加して、強制的に右端をそろえる
  • 手動でパーセンテージを微調整して、Safariの完璧な切上げ機能を取得する(最初の選択肢よりも難しい)

モーダル、ナビゲーションバー、仮想キーボード(Modals, navbars, and virtual keyboards)

オーバーフローとスクロール(Overflow and scrolling)

<body>要素のoverflow: hiddenサポートは、iOSとAndroid ではかなり制限されている。そのため、これらのいずれかのデバイスのブラウザではモーダルの上部または下部を過ぎてスクロールしたときに、表示されないはずの<body>コンテンツがスクロールを始めてしまう。Chrome bug #175502(Chrome v40で修正済み)や WebKit bug #153852に記載。

iOSのテキストフィールドとスクロール(iOS text fields and scrolling)

iOS9.3以降では、モーダルを開いている間にスクロールジェスチャーの最初のタッチが、テキストの <input><textarea> の境界内にある場合は、モーダルの代わりに <body> のコンテンツ自体がスクロールされる。WebKit bug #153856に記載。

仮想キーボード(Virtual keyboards)

また、固定のナビゲーションバーを使用している場合やモーダル内で入力を使用している場合、iOSでは仮想キーボードが起動したときに固定要素の位置を更新しないレンダリングのバグがある。これには回避策として、要素をposition: absoluteにするか、手動で位置を修正しようとするためのタイマーを呼び出す方法がある。これはBootstrapによって処理されないので、どちらの解決策がアプリケーションに最適か自分で決めること。

.dropdown-backdrop要素(メニューの外側をクリックするとドロップダウンメニューを閉じる機能)は、z-index作成の複雑さのためにiOSの上のナビゲーションでは使用できない。従って、ナビゲーションバーでドロップダウンを閉じるには、ドロップダウン要素(またはiOSのクリックイベントを発生させる他の要素)を直接クリックする必要がある。

ブラウザのズーム(Browser zooming)

ページズームは、必然的にBootstrapや他のインターネットの両方で一部のコンポーネントでは人為的なレンダリング表示をする。問題によっては、最初に検索してから問題を開いて修正する場合もあるが、大抵はハックの回避策以外には直接的な解決策がないことが多いので、これらを無視する傾向がある。

モバイルでの焦点(Sticky :hover/:focus on mobile)

実際のホバリングは、ほとんどのタッチスクリーン上で不可能であるにもかかわらず、ほとんどのモバイルブラウザはエミュレートでホバリングをサポートして :hover で"sticky"する。つまり、:hover スタイルは、ユーザーが要素をタップした後に適用を開始し、他の要素をタップした後のみ適用を停止する。これは、ブートストラップの:hover状態が望ましくないブラウザに"stuck"するようになる可能性がある。一部のモバイルブラウザでは、同様に:focusにも"sticky"がある。現在、このようなスタイルを完全に削除する以外に、これらの問題を簡単に回避する策はない。

印刷での注意点(Printing)

モダンブラウザでさえ、印刷上の欠陥がある。

特にChrome v32では、マージンの設定に関係なく、Webページの印刷中にメディアクエリを解決する際に、Chromeは物理的なページサイズよりも大幅に狭いビューポートの幅を使用する。これにより、印刷時にBootstrapの極小グリッドが予期せずにアクティブ化される可能性がある(詳細は問題#12078Chromeバグ#273306に記載)。推奨する対象方法:

  • 極小グリッドを受け入れ、ページがその下で許容できる範囲で見えるようにする
  • Lessの@screen-*変数の値をカスタマイズして、プリンター用紙が極小グリッドより大きく見えるようにする
  • カスタムメディアクエリを追加して、印刷メディア用のグリッドサイズのブレークポイントを変更する

また、Safari v8.0では、固定幅の .container で印刷時にSafariのフォントサイズが異常に小さくなることがある。詳細は問題#14868WebKitバグ#138192に記載。このための可能性のある回避策の一つとして、次のCSSを追加:

@media print {
	.container {
		width: auto;
	}
}

Androidの標準ブラウザ(Android stock browser)

Android 4.1以降では、標準のWebブラウザとしてChromeではなく"ブラウザ"アプリが提供されているが、残念なことに"ブラウザ"アプリには大概のCSSでバグや不整合がたくさん存在する。

選択メニュー(Select menus)

<select> 要素で border-radius または border を適用すると、Androidの標準ブラウザはサイドのコントロールを表示しない(詳細はこのStackOverflowの質問に記載)。以下のコードスニペットを使用して問題のあるCSSを削除し、Androidの標準ブラウザ上の <select> を非スタイル要素としてレンダリングする。ユーザエージェントのデータ収集解析においてはChrome、Safari、Mozillaブラウザとの干渉を回避している。

<script>
$(function () {
	var nua = navigator.userAgent
	var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
	if (isAndroid) {
		$('select.form-control').removeClass('form-control').css('width', '100%')
	}
})
</script>

実例を見たいなら、このJS Binのデモをチェックすること。

検証ツール(Validators)

古いものやバグの多いブラウザで最善の体験を提供するために、Bootstrapはいくつかの場所でCSSブラウザのハックを使用して、特別なCSSを特定のバージョンのブラウザに設定しブラウザ自体のバグを回避している。これらのハックは当然のことながら、CSS検証ツールにそれらが無効であると訴える。いくつかの場所ではまた標準化されていない最先端CSSの機能を使用しているが、これらは純粋に進歩的な拡張のために使用されている。

これらの検証警告は、CSSの非ハック部分を完全に検証しないと、ハックされた部分が意図的にこれらの特定の警告を無視し、非ハック部分の適切な機能を妨害しないので実際には問題にならない。

BootstrapのHTMLドキュメントには、同様に起因する特定のFirefoxのバグの回避策が組み込まれているため、いくつかの些細で取るに足らないHTMLの検証警告もある。

サードパーティのプラグインまたはアドオンを正式にサポートしているわけではないが、プロジェクトの潜在的な問題を回避するための役立つアドバイスを提供している。

ボックスサイズ(Box-sizing)

GoogleマップやGoogleカスタム検索エンジンを含むサードパーティの一部のソフトウェアは、* { box-sizing: border-box; }によってBootstrapと競合し、paddingを作成するルールは、要素の最終的な計算幅には影響しない。ボックスモデルとサイジングの詳細については、CSS Tricksを参照。

属性に応じて、必要な再定義をしたり(オプション1)、領域全体のボックスサイズをリセットしたりすることが可能(オプション2)。

/* ボックスサイズのリセット
 *
 * Bootstrapの全体的なボックスモデル設定による競合を避けるために、
 * 個々の要素をリセットするか、または領域を再定義する。
 * 2つのオプション、個々の再定義と領域のリセットは、
 * 簡素なCSSとコンパイルされていないLess形式として利用可能。
 */

/* オプション1A:CSSを使用して単一要素のボックスモデルを再定義 */
.element {
	-webkit-box-sizing: content-box;
		 -moz-box-sizing: content-box;
					box-sizing: content-box;
}

/* オプション1B:BootstrapのLess mixinを使用して単一要素のボックスモデルを再定義 */
.element {
	.box-sizing(content-box);
}

/* オプション2A:CSSを使用して領域全体をリセット */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
	-webkit-box-sizing: content-box;
		 -moz-box-sizing: content-box;
					box-sizing: content-box;
}

/* オプション2B:カスタムLess Mixinで領域全体をリセット */
.reset-box-sizing {
	&,
	*,
	*:before,
	*:after {
		.box-sizing(content-box);
	}
}
.element {
	.reset-box-sizing();
}

Bootstrapは、一般的なWeb標準に準拠しており、最小限の労力で障害者支援技術ATを利用してアクセス可能なサイトを作成することが可能。

ナビゲーションをスキップ(Skip navigation)

ナビゲーションには多くのリンクが含まれており、文書内のメインコンテンツの前に来る場合は、ナビゲーションの前に「メインコンテンツへスキップ」というリンクを追加すること(簡単な説明はA11Y Project article on skip navigation linksに記載)。.sr-only クラスを使用すると視覚的にはスキップリンクは視覚的に非表示になり、.sr-only-focusable は一旦フォーカスすると(目の見えるキーボードの使用者のために)リンクが確実に見えるようにする。

<body>
	<a href="#content" class="sr-only sr-only-focusable">メインコンテンツへスキップ</a>
	...
	<div class="container" id="content">
		<!-- メインページのコンテンツ -->
	</div>
</body>

入れ子になった見出し(Nested headings)

入れ子の見出し(<h1><h6>)を使用する場合は、最初の文書の見出しは <h1> にする必要があり、その次の見出しは、論理的に <h2><h6> を使用して、スクリーンリーダーがページの目次を作成できるようにする必要がある。

詳細は、HTML CodeSnifferPenn State’s Accessabilityに記載。

色の対比(Color contrast)

現在、Bootstrapで使用可能なデフォルトの色の組み合わせのいくつか(様々なスタイル付きボタンクラス、基本コードブロックで使用される色を強調する色の一部、.bg-primaryコンテキスト背景色ヘルパークラス、白い背景色でのデフォルトのリンク色)は低いコントラスト比(推奨比4.5:1より低い)を有する。これは、視力の弱いユーザーや色盲のユーザーに問題を引き起こす可能性がある。これらのデフォルトの色は、コントラストと読みやすさを高めるために変更する必要がある。

その他のリソース(Additional resources)