はじめに · Bootstrap 日本語で

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

ブートストラップ

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

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

ソースコード

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

ソースをダウンロード

サス

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

サスをダウンロード

js配信

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

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

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" 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 の使用方法が含まれています。さらに、他のインクルードファイルは、パッケージ、ライセンス情報、および開発のサポートを提供します。

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

Grunt のインストール

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

次に、コマンドラインから:

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

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

利用可能な Grunt コマンド

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

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

`grunt watch`（時計）

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

`grunt test`(テストを実行)

JSHintを実行し、Karmaのおかげで実際のブラウザーで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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 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://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

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

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

フレームワークの使用

スターターテンプレート

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

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

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

グリッド

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

ジャンボトロン

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

ナロージャンボトロン

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

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

ナビゲーションバー

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

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

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

固定ナビゲーションバー

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

カスタムコンポーネント

カバー

シンプルで美しいホームページを作成するための 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 は、ページをさまざまな画面サイズに自動的に適応させます。この機能を無効にして、ページがこの応答しない例のように動作するようにする方法は次のとおりです。

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

CSS ドキュメント<meta>に記載されているビューポートを省略します
たとえば、各グリッド層のを単一の幅でオーバーライドしwidthます。これは、デフォルトの Bootstrap CSS の後に来るようにしてください。必要に応じて、 with メディアクエリまたは一部のセレクター fu を回避できます。.containerwidth: 970px !important;!important
ナビゲーションバーを使用している場合は、ナビゲーションバーの折りたたみと展開の動作をすべて削除します。
グリッドレイアウトの場合.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-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/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 の極小グリッドが予期せずアクティブになる可能性があります。詳細については、問題 #12078とChrome バグ #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、リンクがフォーカスされるとリンクが確実に表示されるようになります (晴眼のキーボードユーザー向け)。

Chrome ( Chromium バグトラッカーの問題 262171 を参照) および Internet Explorer (ページ内リンクとフォーカス順序に関するこの記事を参照)の長年にわたる欠点/バグのため、スキップリンクのターゲットがを追加することで、少なくともプログラムでフォーカス可能tabindex="-1"です。

さらに、ターゲット上の目に見えるフォーカス表示を明示的に抑制したい場合があります (特に、Chrome は現在tabindex="-1"、マウスでクリックされたときに要素にフォーカスを設定するため) #content:focus { outline: none; }。

このバグは、サイトで使用している可能性のある他のページ内リンクにも影響を与え、キーボードユーザーにとっては役に立たなくなることに注意してください。リンクターゲットとして機能する他のすべての名前付きアンカー/フラグメント識別子に同様の一時的な修正を追加することを検討してください。

<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 ライセンスの下でリリースされており、著作権は 2019 Twitter にあります。より小さなチャンクに煮詰めると、次の条件で記述できます。

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

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

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

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

次のことを禁止します。

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

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

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

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

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

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

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

入門

ダウンロード