ダウンロード

Bootstrap (現在 v3.3.7) には、すぐに使い始めるための簡単な方法がいくつかあり、それぞれが異なるスキル レベルとユース ケースに適しています。あなたの特定のニーズに合ったものを確認するために読んでください。

ブートストラップ

コンパイルおよび縮小された CSS、JavaScript、およびフォント。ドキュメントや元のソース ファイルは含まれません。

ブートストラップをダウンロード

ソースコード

Source Less、JavaScript、フォント ファイル、およびドキュメント。Less コンパイラといくつかのセットアップが必要です。

ソースをダウンロード

サス

Rails、Compass、または Sass のみのプロジェクトに簡単に組み込めるように、Less から Sass に移植されたブートストラップ。

サスをダウンロード

ブートストラップ CDN

jsDelivrの人々は、Bootstrap の CSS と JavaScript の CDN サポートを親切に提供してくれます。これらのBootstrap CDNリンクを使用するだけです。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bower でインストール

Bowerを使用して、Bootstrap の Less、CSS、JavaScript、およびフォントをインストールして管理することもできます。

$ bower install bootstrap

npmでインストール

npmを使用して Bootstrap をインストールすることもできます。

$ npm install bootstrap@3

require('bootstrap')Bootstrap の jQuery プラグインをすべて jQuery オブジェクトにロードします。モジュール自体はbootstrap何もエクスポートしません。/js/*.jsパッケージの最上位ディレクトリにあるファイルをロードすることで、Bootstrap の jQuery プラグインを個別に手動でロードできます。

Bootstrappackage.jsonには、次のキーの下にいくつかの追加のメタデータが含まれています。

  • less- Bootstrap のメインLessソース ファイルへのパス
  • style- デフォルト設定を使用してプリコンパイルされた Bootstrap の縮小されていない CSS へのパス (カスタマイズなし)

Composer でインストール

Composerを使用して、Bootstrap の Less、CSS、JavaScript、およびフォントをインストールして管理することもできます。

$ composer require twbs/bootstrap

Less/Sass に必要な Autoprefixer

Bootstrap はAutoprefixerを使用してCSS ベンダー プレフィックスを処理します。Bootstrap を Less/Sass ソースからコンパイルし、Gruntfile を使用しない場合は、Autoprefixer をビルド プロセスに自分で統合する必要があります。コンパイル済みの Bootstrap または Gruntfile を使用している場合、Autoprefixer は既に Gruntfile に統合されているため、これについて心配する必要はありません。

含まれるもの

Bootstrap は 2 つの形式でダウンロードできます。その中には次のディレクトリとファイルがあり、一般的なリソースを論理的にグループ化し、コンパイルされたバージョンと縮小されたバージョンの両方を提供します。

jQueryが必要

スターター テンプレートに示されているように、すべての JavaScript プラグインには jQuery を含める必要があることに注意してください。どのバージョンの jQuery がサポートされているかについては、当社までお問い合わせください。bower.json

プリコンパイル済みブートストラップ

ダウンロードしたら、圧縮フォルダーを解凍して、(コンパイルされた) Bootstrap の構造を確認します。次のように表示されます。

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

これは、Bootstrap の最も基本的な形式です。ほぼすべての Web プロジェクトですばやくドロップインして使用するためのプリコンパイル済みファイルです。コンパイル済みのCSS および JS ( bootstrap.*) と、コンパイルおよび縮小された CSS および JS ( bootstrap.min.*) を提供します。CSSソース マップ( bootstrap.*.map) は、特定のブラウザーの開発者ツールで使用できます。オプションの Bootstrap テーマと同様に、Glyphicons のフォントが含まれています。

ブートストラップ ソース コード

Bootstrap ソース コードのダウンロードには、コンパイル済みの CSS、JavaScript、およびフォント アセットと、ソースの Less、JavaScript、およびドキュメントが含まれています。より具体的には、以下が含まれます。

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/js/およびfonts/は、CSS、JS、およびアイコン フォントのソース コードです (それぞれ)。このdist/フォルダには、上記のプリコンパイル済みダウンロード セクションにリストされているすべてが含まれています。このdocs/フォルダーには、ドキュメントのソース コードとexamples/Bootstrap の使用方法が含まれています。さらに、他のインクルード ファイルは、パッケージ、ライセンス情報、および開発のサポートを提供します。

CSS と JavaScript のコンパイル

Bootstrap は、ビルド システムにGruntを使用し、フレームワークを操作するための便利なメソッドを備えています。これは、コードをコンパイルしたり、テストを実行したりする方法です。

Grunt のインストール

Grunt をインストールするには、まずnode.js (npm を含む) をダウンロードしてインストールする必要があります。npm はノード パッケージ モジュールの略で、node.js を介して開発の依存関係を管理する方法です。

次に、コマンドラインから:
  1. grunt-cliでグローバルにインストールしnpm install -g grunt-cliます。
  2. ルート/bootstrap/ディレクトリに移動し、 を実行しnpm installます。npm はpackage.jsonファイルを確認し、そこにリストされている必要なローカル依存関係を自動的にインストールします。

完了すると、コマンド ラインから提供されるさまざまな Grunt コマンドを実行できるようになります。

利用可能な Grunt コマンド

grunt dist(CSS と JavaScript をコンパイルするだけです)

/dist/コンパイルおよび縮小された CSS および JavaScript ファイルを使用してディレクトリを再生成します。Bootstrap ユーザーとして、これは通常必要なコマンドです。

grunt watch(時計)

Less ソース ファイルを監視し、変更を保存するたびに CSS に自動的に再コンパイルします。

grunt test(テストを実行)

JSHintを実行し、PhantomJSでQUnitテストをヘッドレスで実行します。

grunt docs(ドキュメント アセットのビルドとテスト)

を介してドキュメントをローカルで実行するときに使用される CSS、JavaScript、およびその他のアセットをビルドおよびテストしますbundle exec jekyll serve

grunt(絶対にすべてをビルドし、テストを実行します)

CSS と JavaScript をコンパイルおよび縮小し、ドキュメント Web サイトを構築し、ドキュメントに対して HTML5 バリデーターを実行し、カスタマイザー アセットを再生成します。Jekyllが必要です。通常、Bootstrap 自体をハッキングする場合にのみ必要です。

トラブルシューティング

依存関係のインストールまたは Grunt コマンドの実行で問題が発生した場合は、まず/node_modules/npm によって生成されたディレクトリを削除します。その後、再実行しnpm installます。

基本テンプレート

この基本的な HTML テンプレートから始めるか、これらの例を変更してください。テンプレートと例をカスタマイズして、ニーズに合わせて調整していただければ幸いです。

以下の HTML をコピーして、最小限の Bootstrap ドキュメントで作業を開始します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Bootstrap の多くのコンポーネントを使用して、上記の基本的なテンプレートを構築します。個々のプロジェクトのニーズに合わせて、Bootstrap をカスタマイズおよび調整することをお勧めします。

Bootstrap リポジトリをダウンロードして、以下のすべての例のソース コードを入手してください。例はdocs/examples/ディレクトリにあります。

フレームワークの使用

スターター テンプレートの例

スターター テンプレート

コンテナと一緒にコンパイルされた CSS と JavaScript です。

Bootstrap テーマの例

ブートストラップのテーマ

オプションの Bootstrap テーマをロードして、視覚的に強化されたエクスペリエンスを実現します。

複数のグリッドの例

グリッド

4 つの層すべて、ネストなどを含むグリッド レイアウトの複数の例。

ジャンボトロンの例

ジャンボトロン

ジャンボトロンを中心に、ナビゲーション バーといくつかの基本的なグリッド列を構築します。

狭いジャンボトロンの例

ナロージャンボトロン

デフォルトのコンテナとジャンボトロンを絞り込んで、よりカスタムなページを構築します。

動作中のナビゲーションバー

ナビゲーションバーの例

ナビゲーションバー

いくつかの追加コンテンツとともに navbar を含む非常に基本的なテンプレート。

静的トップ ナビゲーション バーの例

固定トップ ナビゲーション バー

静的トップ ナビゲーション バーといくつかの追加コンテンツを備えた超基本的なテンプレート。

固定ナビゲーションバーの例

固定ナビゲーションバー

いくつかの追加コンテンツとともに固定トップ ナビゲーション バーを備えた超基本的なテンプレート。

カスタム コンポーネント

1 ページのテンプレートの例

カバー

シンプルで美しいホームページを作成するための 1 ページ テンプレートです。

カルーセルの例

カルーセル

ナビゲーション バーとカルーセルをカスタマイズしてから、新しいコンポーネントをいくつか追加します。

ブログのレイアウト例

ブログ

カスタム ナビゲーション、ヘッダー、タイプを備えたシンプルな 2 列のブログ レイアウト。

ダッシュボードの例

ダッシュボード

固定サイドバーとナビゲーション バーを備えた管理ダッシュボードの基本構造。

サインイン ページの例

サインインページ

シンプルなサインイン フォーム用のカスタム フォーム レイアウトとデザイン。

正当化されたナビゲーションの例

正当化されたナビゲーション

正当化されたリンクを含むカスタム ナビゲーション バーを作成します。注意喚起!あまりサファリフレンドリーではありません。

固定フッターの例

固定フッター

コンテンツがフッターよりも短い場合は、ビューポートの下部にフッターを追加します。

ナビゲーションバー付きの固定フッターの例

ナビゲーションバー付きの固定フッター

ビューポートの下部にフッターを取り付け、上部に固定ナビゲーション バーを配置します。

実験

反応しない例

応答しないブートストラップ

ドキュメントに従ってBootstrap の応答性を簡単に無効にできます。

オフキャンバス ナビゲーションの例

オフキャンバス

Bootstrap で使用するトグル可能なオフキャンバス ナビゲーション メニューを作成します。

ツール

ブートリント

Bootlintは公式の Bootstrap HTMLリンターツールです。Bootstrap をかなり「バニラ」な方法で使用している Web ページで、いくつかの一般的な HTML の誤りを自動的にチェックします。Vanilla Bootstrap のコンポーネント/ウィジェットでは、DOM の一部が特定の構造に準拠する必要があります。Bootlint は、Bootstrap コンポーネントのインスタンスが正しく構造化された HTML を持っていることを確認します。Bootstrap Web 開発ツールチェーンに Bootlint を追加して、よくある間違いによってプロジェクトの開発が遅くならないようにすることを検討してください。

コミュニティ

Bootstrap の開発に関する最新情報を入手し、これらの役立つリソースを使用してコミュニティに連絡してください。

  • The Official Bootstrap Blogを読み、購読してください。
  • irc.freenode.netサーバーの##bootstrap チャンネルで、IRC を使用して仲間の Bootstrappers とチャットします。
  • Bootstrap の使用については、タグを使用して StackOverflowtwitter-bootstrap-3で質問してください。
  • 開発者は、npmまたは同様の配信メカニズムをbootstrap介して配布するときに Bootstrap の機能を変更または追加するパッケージでキーワードを使用して、最大限の検出可能性を実現する必要があります。
  • Bootstrap Expoで、Bootstrap を使って構築している人々の感動的な例を見つけてください。

Twitter で @getbootstrap をフォローして、最新のゴシップやすばらしいミュージック ビデオを入手することもできます。

応答性の無効化

Bootstrap は、ページをさまざまな画面サイズに自動的に適応させます。この機能を無効にして、ページがこの応答しない例のように動作するようにする方法は次のとおりです。

ページの応答性を無効にする手順

  1. CSS ドキュメント<meta>に記載されているビューポートを省略します
  2. たとえば、各グリッド層の を単一の幅でオーバーライドしwidthます。これは、デフォルトの Bootstrap CSS の後に来るようにしてください。必要に応じて、 with メディア クエリまたは一部のセレクター fu を回避できます。.containerwidth: 970px !important;!important
  3. ナビゲーション バーを使用している場合は、ナビゲーション バーの折りたたみと展開の動作をすべて削除します。
  4. グリッド レイアウトの場合.col-xs-*は、中/大のクラスに加えて、またはその代わりにクラスを使用します。心配はいりません。極小のデバイス グリッドはすべての解像度に対応しています。

IE8 にはまだ Respond.js が必要です (メディア クエリがまだそこにあり、処理する必要があるため)。これにより、Bootstrap の「モバイル サイト」の側面が無効になります。

応答性を無効にしたブートストラップ テンプレート

これらの手順を例に適用しました。ソースコードを読んで、実装された特定の変更を確認してください。

反応しない例を見る

v2.x から v3.x への移行

古いバージョンの Bootstrap から v3.x への移行をお考えですか? 移行ガイドをご覧ください。

ブラウザとデバイスのサポート

Bootstrap は、最新のデスクトップおよびモバイル ブラウザーで最適に動作するように構築されています。つまり、古いブラウザーでは、特定のコンポーネントのレンダリングが完全に機能していても、異なるスタイルで表示される場合があります。

対応ブラウザ

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

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

モバイルデバイス

一般的に言えば、Bootstrap は各主要プラットフォームのデフォルト ブラウザの最新バージョンをサポートしています。プロキシ ブラウザ (Opera Mini、Opera Mobile の Turbo モード、UC Browser Mini、Amazon Silk など) はサポートされていないことに注意してください。

クロム ファイアフォックス サファリ
アンドロイド 対応 対応 なし
iOS 対応 対応 対応

デスクトップ ブラウザ

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

クロム ファイアフォックス インターネットエクスプローラ オペラ サファリ
マック 対応 対応 なし 対応 対応
ウィンドウズ 対応 対応 対応 対応 サポートされていません

Windows では、Internet Explorer 8 ~ 11 がサポートされています

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

非公式には、Bootstrap は、Linux 用の Chromium と Chrome、Linux 用の Firefox、Internet Explorer 7、および Microsoft Edge で適切に表示され、適切に動作するはずですが、これらは公式にはサポートされていません。

Bootstrap が対処しなければならないブラウザーのバグのリストについては、Wall of browser bugs を参照してください。

Internet Explorer 8 および 9

Internet Explorer 8 および 9 もサポートされていますが、これらのブラウザーでは一部の CSS3 プロパティおよび HTML5 要素が完全にサポートされていないことに注意してください。さらに、Internet Explorer 8 では、Respond.jsを使用してメディア クエリのサポートを有効にする必要があります。

特徴 インターネット エクスプローラー 8 Internet Explorer9
border-radius サポートされていません 対応
box-shadow サポートされていません 対応
transform サポートされていません サポートあり、-ms接頭辞付き
transition サポートされていません
placeholder サポートされていません

CSS3および HTML5 機能のブラウザー サポートの詳細については、Can I use...を参照してください。

Internet Explorer 8 と Respond.js

Internet Explorer 8 の開発環境および運用環境で Respond.js を使用する場合は、次の注意事項に注意してください。

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

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

Respond.js とfile://

ブラウザーのセキュリティ ルールにより、Respond.js は、プロトコルを介して表示されるページでは機能しませんfile://(ローカルの HTML ファイルを開く場合など)。IE8 でレスポンシブ機能をテストするには、HTTP(S) 経由でページを表示します。詳細については、Respond.js のドキュメントを参照してください。

Respond.js と@import

Respond.js は、 経由で参照される CSS では機能しません@import。特に、一部の Drupal 構成では を使用することが知られています@import詳細については、Respond.js のドキュメントを参照してください。

Internet Explorer 8 とボックスのサイズ変更

、、、またはbox-sizing: border-box;と組み合わせた場合、IE8 は完全にはサポートしません。そのため、v3.0.1 ではon s を使用しなくなりました。min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 と @font-face

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

IE 互換モード

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

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

デバッグ ツールを開いてドキュメント モードを確認します。[ドキュメント モード] を押しF12てチェックします。

このタグは、Bootstrap のすべてのドキュメントと例に含まれており、サポートされている Internet Explorer の各バージョンで可能な限り最高のレンダリングが保証されます。

詳細については、この StackOverflow の質問を参照してください。

Windows 8 および Windows Phone 8 の Internet Explorer 10

Internet Explorer 10 は、デバイスの幅ビューポートの幅を区別しないため、Bootstrap の CSS でメディア クエリを適切に適用しません。通常、これを修正するには、CSS の簡単なスニペットを追加するだけです。

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

ただし、これはUpdate 3 (別名 GDR3)よりも古い Windows Phone 8 バージョンを実行しているデバイスでは機能しません。このようなデバイスでは、狭い「電話」ビューではなくほとんどデスクトップ ビューが表示されるためです。これに対処するには、バグを回避するために次の CSS と JavaScript を含める必要があります。

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/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 Phone 8 と Device-Width を参照してください。

注意点として、Bootstrap のすべてのドキュメントと例にデモンストレーションとしてこれを含めます。

Safari パーセントの丸め

.col-*-1OS X の v7.1 より前のバージョンの Safari および iOS v8.0 の Safari のレンダリング エンジンでは、グリッド クラスで使用される小数点以下の桁数に問題がありました。したがって、12 個の個別のグリッド列がある場合、列の他の行に比べて不足していることに気付くでしょう。Safari/iOS をアップグレードする以外に、いくつかの回避策があります。

  • 最後のグリッド列に追加.pull-rightして、右端の配置を取得します
  • パーセンテージを手動で微調整して、Safari に最適な丸めを取得します (最初のオプションよりも困難です)。

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

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

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

iOS テキスト フィールドとスクロール

iOS 9.3 の時点で、モーダルが開いている間、スクロール ジェスチャの最初のタッチがテキスト<input>またはの境界内にある場合、モーダル自体ではなく、モーダルの下のコンテンツがスクロールされます<textarea>WebKit バグ #153856<body>を参照してください。

仮想キーボード

また、固定ナビゲーション バーを使用している場合、またはモーダル内で入力を使用している場合、iOS にはレンダリング バグがあり、仮想キーボードがトリガーされたときに固定要素の位置が更新されないことに注意してください。これに対するいくつかの回避策には、要素を に変換するposition: absoluteか、フォーカスのタイマーを呼び出して手動で配置を修正することが含まれます。これは Bootstrap によって処理されないため、アプリケーションに最適なソリューションを決定するのはユーザー次第です。

z-indexing が複雑なため、この.dropdown-backdrop要素は iOS のナビゲーションでは使用されません。したがって、ナビゲーション バーのドロップダウンを閉じるには、ドロップダウン要素 (またはiOS でクリック イベントを発生させるその他の要素) を直接クリックする必要があります。

ブラウザのズーム

ページのズームは、Bootstrap と Web の残りの部分の両方で、一部のコンポーネントでレンダリング アーティファクトを必然的に提示します。問題によっては、修正できる場合があります (最初に検索してから、必要に応じて問題を開きます)。ただし、ハッキーな回避策以外に直接的な解決策がないことが多いため、これらを無視する傾向があります。

スティッキー:hover/:focusモバイル

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

印刷

一部の最新のブラウザーでも、印刷が風変わりな場合があります。

特に Chrome v32 では、余白の設定に関係なく、Web ページの印刷中にメディア クエリを解決する際に、Chrome は物理的な用紙サイズよりも大幅に狭いビューポート幅を使用します。これにより、印刷時に Bootstrap の極小グリッドが予期せずアクティブになる可能性があります。詳細については、問題 #12078Chrome バグ #273306を参照してください。推奨される回避策:

  • 極小のグリッドを採用し、その下でページが適切に見えるようにします。
  • Less 変数の値をカスタマイズし@screen-*て、プリンター用紙が極小よりも大きいと見なされるようにします。
  • カスタム メディア クエリを追加して、印刷メディアのみのグリッド サイズ ブレークポイントを変更します。

また、Safari v8.0 では、固定幅.containerの s により、印刷時に Safari が異常に小さいフォント サイズを使用する場合があります。詳細については、 #14868およびWebKit バグ #138192を参照してください。これに対する潜在的な回避策の 1 つは、次の CSS を追加することです。

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

Android ストック ブラウザ

Android 4.1 (および一部の新しいリリースのようです) には、既定の Web ブラウザー (Chrome ではなく) としてブラウザー アプリが付属しています。残念ながら、ブラウザー アプリには多くのバグがあり、一般的に CSS との矛盾があります。

メニューを選択

要素では、 and/orが適用され<select>ている場合、Android ストック ブラウザはサイド コントロールを表示しません。(詳細については、この StackOverflow の質問を参照してください。) 以下のコード スニペットを使用して、問題のある CSS を削除し、Android ストック ブラウザーでスタイル設定されていない要素としてレンダリングします。ユーザー エージェント スニッフィングは、Chrome、Safari、および Mozilla ブラウザーとの干渉を回避します。border-radiusborder<select>

<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 デモをご覧ください。

バリデーター

古いバグのあるブラウザに可能な限り最高のエクスペリエンスを提供するために、Bootstrap はいくつかの場所でCSS ブラウザ ハックを使用して、ブラウザ自体のバグを回避するために特定のブラウザ バージョンに特別な CSS をターゲットにします。これらのハッキングにより、当然のことながら、CSS バリデーターは無効であると不平を言います。いくつかの場所では、まだ完全に標準化されていない最先端の CSS 機能も使用していますが、これらは純粋にプログレッシブ エンハンスメントのために使用されています。

これらの検証警告は、CSS の非ハック部分が完全に検証され、ハック部分が非ハック部分の適切な機能を妨げないため、実際には問題になりません。したがって、これらの特定の警告を意図的に無視する理由です。

私たちの HTML ドキュメントにも、特定の Firefox のバグに対する回避策が含まれているため、些細で取るに足らない HTML 検証警告がいくつかあります。

サードパーティのサポート

サードパーティのプラグインやアドオンを公式にサポートしていませんが、プロジェクトで発生する可能性のある問題を回避するための役立つアドバイスを提供しています.

ボックスサイジング

Google マップや Google カスタム検索エンジンなどの一部のサードパーティ ソフトウェアは、要素の最終的な計算幅に影響を与えない* { box-sizing: border-box; }ようにするルールにより、 Bootstrap と競合します。ボックス モデルとサイズ設定paddingについては、CSS トリック を参照してください。

コンテキストに応じて、必要に応じてオーバーライドするか (オプション 1)、領域全体のボックス サイズをリセットすることができます (オプション 2)。

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via 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;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

アクセシビリティ

Bootstrap は一般的な Web 標準に準拠しており、 ATを使用しているユーザーがアクセスできるサイトを最小限の労力で作成できます。

ナビゲーションをスキップ

ナビゲーションに多くのリンクが含まれていて、DOM のメイン コンテンツの前にある場合は、ナビゲーションのSkip to main content前にリンクを追加します (簡単な説明については、スキップ ナビゲーション リンクに関する A11Y プロジェクトの記事を参照してください)。クラスを使用する.sr-onlyと、スキップ リンクが視覚的に非表示になり.sr-only-focusable、リンクがフォーカスされるとリンクが確実に表示されるようになります (晴眼のキーボード ユーザー向け)。

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

ネストされた見出し

<h1>見出し ( - ) をネストする場合<h6>、主要なドキュメント ヘッダーは<h1>. 後続の見出しでは、スクリーン リーダーがページの目次を作成できるように、 <h2>-を論理的に使用する必要があります。<h6>

詳細については、HTML CodeSnifferおよびPenn State の AccessAbilityを参照してください。

色のコントラスト

現在、Bootstrap で使用できるデフォルトの色の組み合わせの一部 (さまざまなスタイルのボタンクラス、基本的なコード ブロックに使用されるコード ハイライト色の一部、.bg-primary コンテキスト バックグラウンドヘルパー クラス、白い背景で使用する場合のデフォルトのリンク カラーなど)コントラスト比が低い (推奨比 4.5:1 を下回っている)。これにより、視力の弱いユーザーや色盲のユーザーに問題が発生する可能性があります。これらのデフォルトの色は、コントラストと読みやすさを向上させるために変更する必要がある場合があります。

その他のリソース

ライセンスに関するよくある質問

Bootstrap は MIT ライセンスの下でリリースされており、著作権は 2016 Twitter にあります。より小さなチャンクに煮詰めると、次の条件で記述できます。

次のことを行う必要があります。

  • Bootstrap の CSS および JavaScript ファイルを作品で使用する場合は、それらに含まれているライセンスおよび著作権表示を保管してください。

これにより、次のことが可能になります。

  • Bootstrap の全部または一部を、個人的、私的、社内、または商業目的で自由にダウンロードして使用する
  • 作成したパッケージまたはディストリビューションで Bootstrap を使用する
  • ソースコードを修正する
  • ライセンスに含まれていない第三者に Bootstrap を変更して配布するためのサブライセンスを付与する

次のことを禁止します。

  • Bootstrap は保証なしで提供されているため、作成者とライセンス所有者に損害賠償の責任を負わせます。
  • Bootstrap の作成者または著作権所有者に責任を負わせます。
  • Bootstrap の一部を適切な帰属なしに再配布する
  • Twitter が所有するマークを、Twitter があなたの配布を支持していることを表明または示唆するような方法で使用すること。
  • 問題の Twitter ソフトウェアを作成したことを表明または示唆する可能性のある方法で、Twitter が所有するマークを使用すること

次のことは必要ありません。

  • Bootstrap自体のソース、またはBootstrapに加えた変更のソースを、それを含む再配布に含める
  • Bootstrap に加えた変更を Bootstrap プロジェクトに送信します (ただし、そのようなフィードバックは推奨されます)。

詳細については、完全な Bootstrap ライセンスがプロジェクト リポジトリにあります。

翻訳

コミュニティ メンバーは、Bootstrap のドキュメントをさまざまな言語に翻訳しています。公式にサポートされているものはなく、常に最新であるとは限りません。

翻訳の整理やホストを支援するのではなく、翻訳にリンクするだけです。

新しい、またはより良い翻訳が完成しましたか? プル リクエストを開いてリストに追加します。