Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
ブラウザとデバイス（Browsers and devices）
Bootstrapでサポートされているブラウザやデバイスについて、古いものから最新のものまでそれぞれの既知の癖やバグなどを学習する。
サポート対応ブラウザ（Supported browsers）v4.1.3設定変更
Bootstrapでは、主要なブラウザとプラットフォームの最新の安定リリース版をサポート。Windowsでは、Internet Explorer10-11とMicrosoft Edgeをサポート済。
WebKit、Blink、Geckoの最新バージョンを直接かプラットフォームのWebビューAPI経由で使用する代替ブラウザでは、明示的にサポートしていないが、Bootstrapは（ほとんどの場合）これらのブラウザでも正しい表示と機能をするはずである。より具体的なサポート情報は次のとおり。
サポートされているブラウザのバージョンとそのバージョンは、.browserslistrcに記載：
# https://github.com/browserslist/browserslist#readme
>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30Autoprefixerを使用して、ブラウザのバージョンを管理するためにBrowserslistを使用するCSSプレフィックスを使用して、意図したブラウザのサポートを処理。各ツールをプロジェクトに統合する方法については、各ツールの解説に記載。
【変更履歴】
- 【v4.1.3】
- npmプロジェクト間で意図しない継承されたブラウザ設定を避けるため、
package.jsonのbrowserslist設定を.browserslistrcに移動
- npmプロジェクト間で意図しない継承されたブラウザ設定を避けるため、
モバイルデバイス（Mobile devices）v4.5.0一部変更
一般的にBootstrapは各主要プラットフォームの標準ブラウザの最新バージョンをサポート対応済。プロキシブラウザ（Opera Mini、Opera Mobileのターボモード、UC Browser Mini、Amazon Silkなど）はサポートしていない。
| Chrome | Firefox | Safari | Android Browser & WebView | |
|---|---|---|---|---|
| Android | サポート対応 | サポート対応 | 該当なし | Android v5.0以上 サポート対応 |
| iOS | サポート対応 | サポート対応 | サポート対応 | 該当なし |
【変更履歴】
- 【v4.5.0】
- Windows 10 Mobileはサポート終了に伴い削除
デスクトップブラウザ（Desktop browsers）v4.5.0一部変更
同様に、ほとんどのデスクトップブラウザの最新バージョンがサポート済。
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | サポート対応 | サポート対応 | 該当なし | サポート対応 | サポート対応 | サポート対応 |
| Windows | サポート対応 | サポート対応 | IE10以上 サポート対応 | サポート対応 | サポート対応 | サポート非対応 |
Firefoxの場合、最新の通常安定版に加えて、Firefoxの延長サポート版（ESR）のバージョンもサポートしている。
非公式には、Bootstrapは、Chromium、Linux版Chrome、Linux版Firefox、Internet Explorer 9でも十分に表示や動作をするはずだが、正式にはサポートしていない。
Bootstrapが取り組まなければならないいくつかのブラウザのバグのリストが、Bootstrap公式のWall of browser bugsに記載。
【変更履歴】
- 【v4.5.0】
- MacOS：Edgeの公開に伴い対応に
Internet Explorer
Internet Explorer 10以上をサポートしており、IE9以下はサポートしていない。一部のCSS3プロパティとHTML5要素は、IE10では完全にサポートされていないか、完全な機能を実現するために接頭辞付きのプロパティが必要なので注意。CSS3とHTML5の機能のブラウザのサポートの詳細については、Can I use...で確認可能。IE8-9のサポートが必要な場合は、Bootstrap 3を使用すること。
モバイルでのモーダル、ドロップダウン（Modals and dropdowns on mobile）
オーバーフローとスクロール（Overflow and scrolling）
overflow: hidden; のサポート：<body> 要素でのiOSとAndroidではかなり制限される。そのため、いずれかのデバイスのブラウザではモーダルの上部や下部を超えてスクロールすると、<body> のコンテンツがスクロールをし始める。詳細は、Chromeのバグ#175502（Chrome v40で修正済）やWebKitのバグ#153852に記載。
iOSのテキストフィールドとスクロール（iOS text fields and scrolling）
iOS9.2以降、モーダルを開いている間にスクロールジェスチャーの最初のタッチがテキストの <input> か <textarea> の境界内にある場合は、モーダルの下にある <body> のコンテンツがモーダルの代わりにスクロールされる。詳細は、WebKitのバグ#153856に記載。
ナビゲーションバーのドロップダウンのメニュー（Navbar Dropdowns）
.dropdown-backdrop 要素（メニューの外側をクリックするとドロップメニューを閉じる機能）は、z-index作成が複雑なため、iOSのナビゲーションでは使用できない。従って、ナビゲーションバーでドロップダウンを閉じるには、ドロップダウン要素（またはiOSのクリックイベントを発動させる他の要素）を直接クリックする必要がある。
ブラウザのズーム（Browser zooming）
ページズームは、必然的にBootstrapや他のインターネットの両方で一部のコンポーネントでは人為的なレンダリング表示をする。問題によっては、最初に検索してから問題を開いて修正する場合もあるが、大抵はハックの回避策以外には直接的な解決策がないことが多いので、これらを無視する傾向がある。
iOSでの焦点（Sticky :hover/:focus on iOS）
:hover はほとんどのタッチデバイスでは使用不可だが、iOSはこの動作をエミュレートし、1つの要素をタップした後も持続する"sticky"なホバースタイルが維持される。これらのホバースタイルは、ユーザーが別の要素をタップするときにのみ削除される。この動作は主に望ましくないと考えられており、AndroidやWindowsのデバイスでは問題ではない模様。
Bootstrap4のアルファ版とベータ版のリリースでは、ホバーをエミュレートするタッチデバイスブラウザのホバースタイルを無効にするメディアクエリshimを選択するための不完全でコメントアウトされたコードが組み込んだ。この作業は完全には完了や有効になることはないが、完全な破損を避けるため、このshimを廃止し、mixinを疑似クラスのショートカットとして保持することにした。
印刷での注意点（Printing）
モダンブラウザでさえ、印刷上の欠陥がある。
Safari v8.0以降、固定幅の .container クラスを使用すると、印刷時にSafariのフォントサイズが異常に小さくなる可能性がある。詳細はissue#14868やWebKitのバグ#138192に記載。このための可能性のある回避策の一つとして、次のCSSを追加：
設定例
@media print {
.container {
width: auto;
}
}
Androidの標準ブラウザ（Android stock browser）
Android 4.1以降では、標準のWebブラウザとしてChromeではなく「ブラウザ」アプリが提供されているが、残念なことに「ブラウザ」アプリには大概のCSSでバグや不整合がたくさん存在する。
選択メニュー（Select menu）
<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のハックされていない部分を完全に検証しないと、ハックされた部分が意図的にこれらの特定の警告を無視し、ハックされていない部分の適切な機能を妨害しないので実際には問題にならない。
同様に、特定のFirefoxのバグの回避策が組み込まれているため、Bootstrapの解説のHTMLには、些細で重要でないHTML検証警告がいくつかある。