ダウンロード

Bootstrap (翻訳対象バージョン v3.3.5) には、さまざまな熟練度や用途に応じて、すぐに始められる簡単な方法が用意されています。どれがあなたのニーズに合うか、読み通して見つけてください。

Bootstrap

コンパイルされて圧縮された CSS と JavaScript とフォント。ドキュメントやソースファイルは含まれていません。

Bootstrap をダウンロード

ソースコード

Less のソース、JavaScript とフォントファイルとドキュメント。Less コンパイラとセットアップが必要です。

ソースをダウンロード

Sass

Rails や Compass や Sass だけのプロジェクトに簡単に取り込めるように Less から Sassに移植された Bootstrap

Sass をダウンロード

CDN 版 Bootstrap

Bootstrap の CSS と JavaScript は MaxCDN の丁寧な CDN サポートで公開しています。この Bootstrap CDN リンクを使うだけです。

<!-- コンパイルして圧縮された最新版の CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- オプションのテーマ -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- コンパイルして圧縮された最新版の JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Bower でインストール

Bower を使っても、Bootstrap の Less、CSS、JavaScript、フォントのインストールや管理ができます:

$ bower install bootstrap

npm でインストール

npm を使っても、Bootstrap をインストールできます:

$ npm install bootstrap

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

Bootstrap の package.json は以下のキーの下にいくつかの追加メタデータを含んでいます:

  • less - Bootstrap のメイン Less ソース・ファイルへのパス
  • style - デフォルトの設定(カスタマイズなし)でプリ・コンパイルした Bootstrap の無圧縮 CSS へのパス

Composer でインストール

Composer を使っても、Bootstrap の Less、CSS、JavaScript、フォントのインストールや管理ができます:

$ composer require twbs/bootstrap

Autoprefixer には Less/Sass が必要

Bootstrap は、CSS ベンダー・プリフィックス を扱うのに Autoprefixer を使っています。Gruntfile を使わずに Bootstrap を Less/Sass のソースからコンパイルしているなら、自分でビルド・システムに Autoprefixer を統合する必要があります。プリ・コンパイル済みの Bootstrap や Gruntfile を使っているなら、Autoprefixer は既に Gruntfile に統合されているので、心配する必要はありません。

ファイル構成

Bootstrap は2つの形式でダウンロードできます。論理的にグループ分けされた共通リソースと、コンパイルしたものと圧縮をしたものの両方が、以下のようなディレクトリやファイル構成になっています。

jQuery が必要

スターター・テンプレートで紹介しているように、全ての JavaScript プラグインは jQuery がインクルードされている必要があることに注意してください。どのバージョンの jQuery がサポートされているかは、bower.json を調べてください

コンパイル済み Bootstrap

ダウンロードしたら、圧縮されたフォルダを解凍して、(コンパイル済みの)Bootstrap の構成を確認してください。こんな感じになっていると思います:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── 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.min.*)と同様に、コンパイルした CSS と JS (bootstrap.*)があります。CSS のソース・マップ(bootstrap.*.map)はブラウザの開発ツールを使う際に利用できます。オプションの Bootstrap テーマと同様に、Glyphicons 提供のフォントが含まれています。

Bootstrap のソースコード

ダウンロードした Bootstrap のソースコードにはコンパイルされた CSS と JavaScript とフォントが、ソースの Less と JavaScript とドキュメントと一緒に含まれています。より具体的には、以下に示すような構成です:

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

less/js/fonts/は(それぞれ) CSS のソースコードと JS とアイコンフォントです。dist/フォルダには上記のコンパイルされたところに一覧した全てが含まれています。docs/フォルダにはドキュメントのソースコードと、Bootstrap の使い方のexamples/ が含まれています。それ以外には、パッケージとライセンス情報と開発をサポートするファイルが含まれています。

CSS と JavaScript のコンパイル

Bootstrap はそのビルドシステムに、フレームワークと連動するのに便利な方法である Grunt を使っています。コードのコンパイル方法、テストの走らせ方、その他を紹介します。

Grunt のインストール

Grunt をインストールするには、最初に node.js をダウンロードしてインストールしなくていけません( npm も含めて)。npm は node packaged modules のことで、node.js の開発環境の依存関係を管理する方法です。

コマンドラインから、:
  1. grunt-clinpm install -g grunt-cli とグローバルにインストールします。
  2. ルートである /bootstrap/ ディレクトリに移動して、npm install と実行します。npm が package.json ファイルを見て、そこにリストされたローカルの依存関係に基づいて必要なものをインストールします。

インストールが終わると、いろいろな Grunt のコマンドをコマンドラインから実行できるようになります。

利用できる Grunt のコマンド

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

コンパイルして圧縮された CSS と JavaScript のファイルがある /dist/ ディレクトリを再生成します。 Bootstrap のユーザーには、ふつうこれが欲しいコマンドです。

grunt watch (監視)

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

grunt test (テストの実行)

PhantomJS の中で、JSHint を実行して、何も考えずに QUnit テストを実行します。

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

jekyll serve を使ってローカルでドキュメンテーションを実行中の CSS や JavaScript その他のアセットをビルドしてテストします。

grunt (全てのビルドとテストの実行)

CSS と JavaScript のコンパイルと圧縮、ウェブサイトのドキュメントのビルド、ドキュメントに逆らう HTML5 検証ツールの実行、Customizer アセットの再生成、その他。Jekyll が必要です。通常、あなたが Bootstrap そのものをハックしている場合にのみ必要です。

トラブルシューティング

インストール時の依存関係や Grunt のコマンドの実行で問題が起きた場合は、最初に npm が生成した /node_modules/ ディレクトリを削除して、npm install を再度実行してください。

基本テンプレート

この基本的な HTML テンプレートから始めるか、こちらのサンプルに手を加えてください。あなたのお望みに合うように、テンプレートやサンプルをカスタマイズしてください。

最小限の Bootstrap ドキュメントで始めるために、下の HTML をコピーしてください。

<!DOCTYPE html>
<html lang="ja">
  <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://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/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.11.3/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 をカスタマイズしたり改造することを推奨します。

フレームワークの使用

スターター・テンプレート

何もない基本形:1つのコンテナとコンパイル済みの CSS と JavaScript

Bootstrap テーマ

視覚的に向上した体験のために自由に選べる Bootstrap テーマをロード

グリッド

全ての4ティアとネスティング等を使ったグリッドレイアウトの複数の例

ジャンボトロン

ジャンボトロンの周りにナビバーといくつかの基本グリッドカラムを使って構築

狭いジャンボトロン

デフォルトのコンテナとジャンボトロンを狭くした、よりカスタムなページを構築

ナビバーの動作

ナビバー

いくつかの追加コンテンツが一緒になったナビバーを含んだ超基本テンプレート

静的な上部ナビバー

いくつかの追加コンテンツが一緒になった静的な上部ナビバーのある超基本テンプレート

固定したナビバー

いくつかの追加コンテンツが一緒になった固定した上部ナビバーのある超基本テンプレート

カスタム・コンポーネント

カバー

シンプルで美しいホームページを構築するための1ページ・テンプレート

カルーセル

ナビバーとカルーセルをカスタマイズして、いくつか新しい部品を追加

ブログ

カスタム・ナビゲーションとヘッダと手本のあるシンプルな2カラムのブログ・レイアウト

ダッシュボード

固定したサイドバーとナビバーがついた管理者ダッシュボードのための基本構成

サイン・イン ページ

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

位置揃えしたナビ

位置揃えしたリンクを備えたカスタムナビバー。注意!Safari 向きではありません。

くっついたフッタ

中身がビューポートより短いときのためにビューポートの最下部にフッタを配置

ナビバーとくっついたフッタ

最上部に固定したナビバーをつけてビューポートの最下部にフッタを配置

実験

非レスポンシブな Bootstrap

ドキュメントにあるように Bootstrap のレスポンシブを簡単に無効化

オフキャンバス

Bootstrap を使った切り替え可能なオフキャンバス・ナビゲーション・メニュー

ツール

Bootlint

Bootlint は公式の Bootstrap HTML リント・ツールです。Bootstrap を正しく「ありきたりな」方法で使っているウェブ・ページのいろいろな一般的な HTML の誤りを自動でチェックします。ありきたりな Bootstrap の部品やウィジェットは、一定の構造に従うために DOM をその一部に必要とします。Bootlint は Bootstrap の部品のインスタンスが正しい構造の HTML を持っているかどうかをチェックします。一般的な誤りでプロジェクト開発を遅らせないように、Bootlint を Bootstrap ウェブ開発のツールチェーンに加えることをご検討ください。

コミュニティ

Bootstrap の開発環境を最新にして、役立つリソースのあるコミュニティにも手を伸ばしましょう。

  • Bootstrap 公式ブログを購読する。
  • irc.freenode.net サーバの ##bootstrap チャンネル で IRC を使って Bootstrapper 達とチャットする。
  • Bootstrap を使う上で困ったら、StackOverflow で twitter-bootstrap-3 タグを使って質問する。
  • 開発者は、npm や似たような配信メカニズムで配布するときは、Bootstrap の機能を改造したり追加したパッケージに bootstrap というキーワードを使って最大限見つけられるようにする。
  • Bootstrap Expo でみんなが Bootstrap で構築した感動的なサンプルを探す。

最新の噂話やすばらしいミュージック・ビデオのために、Twitter で @getbootstrap をフォローすることもできます。

レスポンシブの無効化

Bootstrap は自動的にあなたのページをいろいろな画面サイズに適合させます。これはあなたのページがこのノンレスポンシブな例みたいになるように、レスポンシブ機能を無効にする方法です。

ページのレスポンシブを無効にする手順

  1. CSS のドキュメントに記述されているビューポートの <meta> を省きます。
  2. width: 970px !important; のように、グリッド列それぞれの .containerwidth を一つの幅に上書きします。 これはデフォルトの Bootstrap の CSS の後に来ることを確認してください。メディアクエリやなんらかの fu セレクタで !important を避けることもできます。
  3. ナビバーを使っている場合は、折りたたんだり広がったりするナビバーを取り除いてください。
  4. グリッドレイアウトのために、中/大サイズに .col-xs-* クラスを加えるか置き換えるかしてください。極小デバイスのグリッドは全ての解像度に調整されるので心配いりません。

(メディアクエリがまだ存在し、処理される必要があるので) IE8 のための Respond.js はまだ必要です。 これは Bootstrap の"モバイルサイト"っぽさを無効にします。

レスポンシブを無効にした Bootstrap テンプレート

この手順を適用した例です。ソースコードを読んで、変更が加えられた箇所を見てください。

非レスポンシブな例を見る

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

古いバージョンの Bootstrap から v3.x への移行方法を見ますか? 移行ガイドを確認してください。

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

Bootstrap は最新のデスクトップやモバイルのブラウザでちゃんと動くように構築されていますが、古いブラウザでは、全ての機能が使えますが、異なるスタイルで表示されたり、特定のコンポーネントのレンダリング結果が異なることがあります。

サポートされるブラウザ

具体的には、以下のブラウザとプラットフォームの最新版をサポートしています。Windows では、Internet Explorer 8-11 をサポートしています。より具体的なサポート情報は下に記述しています。

Chrome Firefox Internet Explorer Opera Safari
Android Supported Supported N/A Not Supported N/A
iOS Supported N/A Not Supported Supported
Mac OS X Supported Supported Supported Supported
Windows Supported Supported Supported Supported Not Supported

非公式には、Bootstrap は Chromium、Linux 版 Chrome、Linux 版 Firefox、Internet Explorer 7 で十分に動作するように見えますが、公式にはサポートされていません。

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

Internet Explorer 8 と 9

Internet Explorer 8 と 9 もサポートされていますが、これらのブラウザではいくつかの CSS3 プロパテイと HTML5 要素が完全にはサポートされていないことをご承知ください。それに加えて、Internet Explorer 8 はメディアクエリを有効にするために Respond.js が必要です。

Feature Internet Explorer 8 Internet Explorer 9
border-radius Not supported Supported
box-shadow Not supported Supported
transform Not supported Supported, with -ms prefix
transition Not supported
placeholder Not supported

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

Internet Explorer 8 と Respond.js

Internet Explorer 8 向けに開発や制作の環境において Respond.js を使っている場合は、以下の警告に注意してください。

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

Respond.js を CSS とともに異なる(サブ)ドメインにホストして使う場合(例えば CDN )は、いくつか追加のセッットアップが必要です。詳細は、Respond.js のドキュメントをご覧ください

Respond.js と file://

ブラウザのセキュリティ・ルールのために、Respond.js は(ローカルの HTML ファイルを開くときのような) file:// プロトコルでのページ・ビューでは動作しません。IE8 でレスポンシブ機能を試すためには、HTTP(S) 越しでページを見てください。詳細は、Respond.js のドキュメントをご覧ください

Respond.js と @import

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

Internet Explorer 8 と box-sizing

IE8 は box-sizing: border-box;min-width, max-width, min-height, や max-heightと同時に使われることを完全にはサポートしていません。そのため、私達は v3.0.1 ではもう .containermax-width を使っていません。

Internet Explorer 8 と @font-face

IE8 は :before をつけて @font-face を使うといくつか問題がおきます。Bootstrap はこの組合せを Glyphicon で使っています。ページがキャッシュされてウィンドウでマウスの移動なしでロードされると(例えば、更新ボタンを押されたり、iframe に何かをロードしたり)フォントがロードされる前にページがレンダリングされます。ページ(本文)を横切るとアイコンのいくつかが表示され、残りのアイコンを横切るとさらに表示されます。詳しくは、問題点 #13863 をご覧ください。

IE の互換モード

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

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

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

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

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

Windows 8 と Windows Phone 8 の Internet Explorer 10

Internet Explorer 10 はデバイスの幅ビュー・ポートの幅を区別しないので、Bootstrap の CSS でメディアクエリを正しく適用できません。これを解決するには、通常は CSS の断片をさっと追加するだけです:

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

しかしながら、これは Update 3 (a.k.a. GDR3) より古い Windows Phone 8 が走るデバイスでは機能しないので、そのようなデバイスでは、狭い"携帯電話"画面の代わりにたいていデスクトップ画面が表示されます。これに対処するには、バグを回避するために以下の CSS と JavaScript を使う必要があります

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-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/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 Phone 8 とデバイス幅をお読みください。

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

Safari のパーセント丸め

OS X の Safari v7.1 以前と iOS v8.0 の Safari で見受けられるように、Safari のレンダリングエンジンは .col-*-1 グリッド・クラス内で使われている小数に問題がありました。12 の個別グリッド・カラムがあると、他の列のカラムに比べて短くなっていることに気づくと思います。Safari や iOS をアップグレードした上で、 回避のための選択肢がいくつかあります:

  • 最後のグリッドカラムに .pull-right をつけて右端に強制配置されるようにする。
  • Safari が完璧な丸めをするようにパーセンテージを手動で微調整する(最初の選択肢より難しい)。

この問題には注意を続けて、簡単な解決策があればコードをアップデートします。

モーダルとナビバーと仮想キーボード

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

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

仮想キーボード

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

ナビバーのドロップダウン

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

ブラウザのズーム

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

モバイルでの張り付いた :hover/:focus

たいていのタッチ・スクリーンでは実際にホバーはできませんが、たいていのモバイル・ブラウザはホバーのサポートをエミュレートして、:hover を「張り付き」にしています。言い換えると、ひとつの要素をタップした後に :hover のスタイルを適用し始めて、ユーザーが他の要素をタップした後に適用を停止しているだけです。これは、Bootstrap の :hover の状態が、そのようなブラウザで不必要に「動かなく」なることを引き起こします。いくつかのモバイル・ブラウザでも :focus は張り付いたようになります。今のところこれらの問題に対する単純な回避策は、そのようなスタイルを完全に取り除く以外にありません。

印刷

いくつかのモダンなブラウザにおいてでさえ、印刷はおかしくなりえます。特に、Chrome v32 はマージンの設定があっても、ウェブページの印刷中メディアクエリを解決するときに物理的な用紙サイズより著しく狭いビューポート幅を使用します。これは、Bootstrap の極小グリッドが印刷時に予想外にアクティブになるという結果になりえます。詳細は #12078 をご覧ください。提案されている回避策としては:

  • 極小グリッドで括って、ページが許せる見栄えであることを確認します。
  • プリンター用紙が極小より大きいことを考慮して、Less の @screen-* 変数の値をカスタマイズします。
  • 印刷メディアのためだけに、グリッドサイズの区切りを変更する専用メディアクエリを追加します。

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

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

Android 標準ブラウザ

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

メニュー選択

<select> 要素において、Android の標準ブラウザは border-radiusborder が適用されているとサイド・コントロールを表示しません。(詳細は、この 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 のデモを確認してください。

ヴァリデータ

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

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

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

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

サードパーティーのプラグインやアドオンを公式にはサポートしていませんが、プロジェクトでおこりうる問題を回避する手助けになるアドバイスを提供します。

Box-sizing

Google マップと Google カスタム検索エンジンを含むいくつかのサードパーティのソフトウェアは、padding が最終的に計算された要素の幅に影響しないという仕様から、Bootstrap と * { box-sizing: border-box; } で競合します。詳しくは box model and sizing at CSS Tricks をご覧ください。

場合によっては、必要に応じて上書きするか(オプション1)、領域全ての box-sizing をリセットする(オプション2)ことになるでしょう。

/* Box-sizing のリセット
 *
 * Bootstrap のグローバルな box モデル設定に起因する競合を回避するために、個別の
 * 要素をリセットするか、領域を上書きします。個別に上書きするか、領域をリセット
 * するかの2つの方法があり、普通の CSS と未コンパイルの Less 形式として利用可能です。
 */

/* Option 1A: CSS 経由で、単一の要素の box model を上書きする */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Bootstrap の Less の記述を使って、単一の要素の box model を上書きする */
.element {
  .box-sizing(content-box);
}

/* Option 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;
}

/* Option 2B: カスタムな Less の記述で領域全てをリセットする */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

アクセシビリティ

Bootstrap は一般的なウェブ標準に準拠していて、-最小限の労力で- AT を使った利用しやすいサイトを作成することができます。

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

もしナビゲーションにたくさんのリンクがあったり、ナビゲーションが DOM のメインコンテンツの前に来ている場合は、ナビゲーションの前にメインコンテンツにスキップするリンクをつけてください(簡単な説明は、この 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" tabindex="-1">
    <!-- メイン・ページのコンテンツ -->
  </div>
</body>

ネストした見出し

見出し(<h1> - <h6>)がネストしている場合、最初のドキュメントの見出しは <h1> になります。その後に続く見出しは、読み上げソフトがページのコンテンツのテーブルを構成できるように <h2> - <h6> を論理的な使用するべきです。

詳細は、HTML CodeSnifferPenn State's AccessAbility をご覧ください。

色のコントラスト

今のところ、Bootstrap で利用できるデフォルト・カラーの組合せ(いろいろなスタイルされたボタン・クラス、コードのハイライト色に使われている基本コード・ブロック.bg-primaryコンテキストの背景ヘルパー・クラス、白い背景に使われるデフォルトのリンク色のような)のいくつかは、(推奨される割合 4.5:1 に基づいて)低コントラストな割合になっています。これは弱視や視覚障碍のユーザーに問題になります。これらのデフォルト色は、コントラストと読みやすさを向上させるために変更する必要があるかも知れません。

追加リソース

ライセンス FAQ

Bootstrap は MIT ライセンスの元に公開されており、2015 年 Twitter 社に著作権があります。細かく分けて要約すると、以下の条件で説明できます。

あなたに必要なのは:

  • 制作物の中で使う場合は、Bootstrap の CSS や JavaScript のファイルに含まれるライセンスや著作権の表記をそのままにすること。

あなたに許されるのは:

  • Bootstrap を自由にダウンロードしたり、全部でも一部でも、個人的にでも私的にでも社内用にでも商業目的にでも、自由に使うこと。
  • 制作するパッケージや配布物に Bootstrap を使うこと。
  • ソースコードを改変すること。
  • ライセンスに含まれないサード・パーティに、Bootstrap を改変したり配布するサブ・ライセンスを認めること。

あなたに禁止するのは:

  • 正当な理由なく著作者や権利所有者であると偽って、Bootstrap の有する権利に損害を与えること。
  • Bootstrap のクリエイターや著作権所有者であると偽ること。
  • 正しい帰属なしに Bootstrap の一部を再配布すること。
  • Twitter 社が所有する商標を使って、Twitter 社があなたの配布を許諾したと言ったりほのめかすこと。
  • Twitter 社が所有する商標を使って、紛らわしい表現であなたが Twitter 社のソフトウェアを作ったと言ったりほのめかすこと。

あなたに要求しないのは:

  • 再配布物に、Bootstrap 自身のソースやあなたが施した変更箇所を含めること。
  • Bootstrap プロジェクトにあなたが Bootstrap に施した変更を提出すること(そういうフィードバックは私達を勇気づけますが)。

これ以上の情報として、プロジェクトのリポジトリの中に Bootstrap の完全なライセンスがあります。

翻訳

コミュニティのメンバー達は Bootstrap のドキュメントをいろいろな言語に翻訳しています。どれひとつとして公式にはサポートされていませんし、いつも最新版とは限りません。

私達は組織や翻訳版のホスティングを手助けしません。ただ、それらをリンクするだけです。

新しいか、もっといい翻訳ができましたか?私達のリンクに加えるために pull request を開いてください。