はじめに

ダウンロード方法や使い方を含むBootstrapの概要や、いくつかの基本的なテンプレートや例など。

ブラウザとデバイス

Bootstrapは最新のブラウザやデバイス、いくつか古いものまで幅広く対応しています。以下の既知のバグに関する詳細な情報を参照してください。

目次

サポートブラウザ

Bootstrapは、主要なブラウザとプラットフォームの最新の安定版リリースをサポートしています。Windowsでは、Internet Explorer 9-11 / Microsoft Edgeをサポートしています。より具体的なサポート情報は下に記述しています。

モバイルデバイス

一般的に言えば、Bootstrapは主要なプラットフォームのデフォルトブラウザの最新バージョンをサポートしています。

Chrome Firefox Opera Safari Android Browser & WebView
Android Supported Supported Not supported N/A Android v5.0+ supported
iOS Supported N/A Not supported Supported N/A

デスクトップブラウザ

同様に、ほとんどのデスクトップブラウザの最新バージョンがサポートされています。

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac Supported Supported N/A N/A Supported Supported
Windows Supported Supported Supported Supported Supported Not supported

Firefoxの場合、最新の正常な安定版リリースに加えて、最新のExtended Support Release (ESR)バージョンもサポートしています。

非公式に、Chromium、Linux用のChrome、Linux用のFirefox、およびInternet Explorer 8以下でも、Bootstrapは十分に動作しているように見えますが、公式にサポートはされていません。

Bootstrapが取り組まなければならないブラウザのバグの一覧は、ブラウザバグ板をご覧ください。

Internet Explorer 9

Internet Explorer 9 もサポートされていますが、いくつかのCSS3やHTML5の要素が完全にはサポートされていないkと完全にはサポートされていないことをご承知ください。

Feature Status
border-radius Supported
box-shadow Supported
transform Supported, with -ms prefix
transition Not supported
placeholder Not supported
Flexbox Not supported

ブラウザの CSS3 と HTML5 の機能サポートの詳細は、Can I use…をご覧ください。

Internet Explorer 8 のサポート

v4 では、Bootstrap は、もはや IE8 をサポートしていません。もし IE8 のサポートが必要なら、Bootstrap 3を使うことをお勧めします。 Bootstrap 3 はまだバグ修正とドキュメントの変更のために私達のチームによってサポートされています。しかし、新機能が追加されることはありません。

その代わり、IE8 で Bootstrap 4 を穴埋めサポートするために、サードパーティの JavaScript を追加することができます。次のものが必要です:

このために提供されるサポートはありませんが、Slack チャンネルのコミュニティから、いくつかのヘルプが見つけられるかもしれません。

IE 互換モード

Bootstrap は、古い Internet Explorer 互換モードでサポートされていません。IE の最新のレンダリングモードを使っていることを確認して、ページに以下の適切な <meta> タグを使うことを検討してください:

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

デバッグツールを開いてドキュメントモードを確認してください: F12 キーを押して "Document Mode" を確認してください。

このタグは、IE のサポートされているそれぞれのバージョンでベストなレンダリングができることを保証するために、全ての Bootstrap のドキュメントと例で使われています。

もっと情報が必要な場合は、この StackOverflow の質問 をご覧ください。

Windows Phone 8 の Internet Explorer 10

Update 3 (a.k.a. GDR3) より古い Windows Phone 8 の Internet Explorer 10 では、 @-ms-viewportルールにおいて、device widthviewport width を区別できません。したがって、BootstrapのCSSでメディアクエリが適切に適用されません。これに対処するには、バグを回避するために以下の JavaScript を使う必要があります。

// Copyright 2014-2015 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.head.appendChild(msViewportStyle)
}

より詳しい情報と使い方のガイドラインは、Windows Phone 8 とデバイス幅 をお読みください。

注意点として、全ての Bootstrap のドキュメントと例においてデモンストレーションとして上記JSを使用しています。

モーダル、ナビゲーションバー、仮想キーボード

オーバーフローとスクロール

<body> 要素の overflow: hidden; のサポートは、iOS と Android ではかなり限定されます。このどちらのデバイスのブラウザでも、モーダルのトップかボトムを超えてスクロールすると <body> の中身がスクロールを始めます。

仮想キーボード

また、固定ナビゲーションバーを使ったりモーダル内で入力を使っていると、iOS には仮想キーボードが起動されたときに固定要素の位置が更新されないレンダリングのバグがあることにも注意してください。これに対する数少ない回避策として、要素を position: absolute; に変更するか、手動で位置補正を試みるためのタイマーを起動する方法があります。これは Bootstrap では対応していないので、あなた自身でどちらの解決策が自分のアプリケーションに最適かを決めてください。

z-indexの複雑さのせいで、iOS ではナビゲーションに .dropdown-backdrop が使えません。そのため、ナビゲーションバーのドロップダウンを閉じるために、直接ドロップダン要素をクリックしなければなりません(または他の要素でクリック・イベントを発火させます)。

ブラウザズーム

Bootstrap や web の他の場所でも、ページのズームはいくつかのコンポーネントで必然的にレンダリングの歪みが生じます。この問題については、修正できるでしょう(最初に探して必要であればissueを開いてください)。しかしながら、たいていハッカーのような回避策以外に直接的な解決策がないので無視する傾向があります。

モバイルにおける:hover/:focusの張り付き

ほとんどのタッチスクリーンでは実際にホバーはできませんが、ほとんどのモバイルブラウザはホバーのサポートを模倣して、:hover を “スティッキー(張り付き)” にしています。言い換えると、ひとつの要素をタップした後に :hover のスタイルを適用し始めて、ユーザーが他の要素をタップした後に適用を停止しているだけです。モバイルファーストのサイトでは、この振る舞いは本来好ましくありません。

デフォルトでは無効になっていますが、Bootstrapには、この問題の回避策が含まれています。$enable-hover-media-querytrue に設定することで、Sassからコンパイルする際、Bootstrapは :hover スタイルがhoverを模倣するブラウザで効かないようにするために mq4-hover-shim を使い、:hover スタイルの張り付きを防ぎます。この問題を回避するにはいくつかの注意点があります; 詳細については、shimのドキュメントを参照してください。

印刷

いくつかのモダンなブラウザにおいてでさえ、印刷がおかしくなる可能性があります。

特に、Chrome v32 ではマージンの設定に関わらず、ウェブページの印刷でメディアクエリを解決するときに、物理的な用紙サイズより著しく狭いビューポート幅を使用します。これは、Bootstrap の極小グリッドが印刷時に予想外にアクティブになるという結果になりえます。詳細は #12078 をご覧ください。

また、Safari v8.0 では、固定幅の .container が印刷時に異常に小さいフォントを使う問題を起こします。詳細は、#14868 をご覧ください。これに対する見込みのある回避策は、次の CSS を追加することです:

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

Android標準ブラウザ

非常識にも、Android 4.1 (と間違いなくもっと新しいリリースでも) ではデフォルトのブラウザとして(Chromeと対照的な)ブラウザアプリを同梱して出荷しています。不幸なことに、そのブラウザアプリには総じて CSS にたくさんのバグと矛盾があります。

セレクトメニュー

<select> 要素において、Android の標準ブラウザは border-radiusborder が適用されているとサイドコントロールを表示しません。(詳細は、この StackOverflow の質問をご覧ください。)Android の標準ブラウザで、目障りな CSS を取り除き、<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 のデモを確認してください。

バリデータ

古くてバグだらけのブラウザに最大限可能な良い体験を提供するために、いろいろな箇所で特定のブラウザのバージョンに対して特別な CSS を適用するのに Bootstrap は CSS ブラウザハックを使って、ブラウザ自体のバグを回避しています。当然のことながら、これらのハックでは CSS バリデータがそれらが無効であるとエラーを出します。数箇所で、まだ完全に標準ではないテスト段階の CSS の機能も使っていますが、これらは純粋に革新的な拡張のために使われています。

なぜこうした特定の警告を無視するかと言うと、これらのバリデーションの警告は、CSS のハックじゃない部分が完全に検証していますし、ハックな部分はハックじゃない部分の正しい機能に干渉しないので、実のところ問題ないからです。

同様に、HTML のドキュメントには、特定の Firefox のバグの回避策が書かれているので、ささいで取るに足らない HTML のバリデーションの警告があります。