入門
Bootstrap の概要、ダウンロード方法と使用方法、基本的なテンプレートと例など。
Bootstrap の概要、ダウンロード方法と使用方法、基本的なテンプレートと例など。
Bootstrap (現在 v3.3.7) には、すぐに使い始めるための簡単な方法がいくつかあり、それぞれが異なるスキル レベルとユース ケースに適しています。あなたの特定のニーズに合ったものを確認するために読んでください。
jsDelivrの人々は、Bootstrap の CSS と JavaScript の CDN サポートを親切に提供してくれます。これらのBootstrap CDNリンクを使用するだけです。
Bowerを使用して、Bootstrap の Less、CSS、JavaScript、およびフォントをインストールして管理することもできます。
npmを使用して Bootstrap をインストールすることもできます。
require('bootstrap')
Bootstrap の jQuery プラグインをすべて jQuery オブジェクトにロードします。モジュール自体はbootstrap
何もエクスポートしません。/js/*.js
パッケージの最上位ディレクトリにあるファイルをロードすることで、Bootstrap の jQuery プラグインを個別に手動でロードできます。
Bootstrappackage.json
には、次のキーの下にいくつかの追加のメタデータが含まれています。
less
- Bootstrap のメインLessソース ファイルへのパスstyle
- デフォルト設定を使用してプリコンパイルされた Bootstrap の縮小されていない CSS へのパス (カスタマイズなし)Composerを使用して、Bootstrap の Less、CSS、JavaScript、およびフォントをインストールして管理することもできます。
Bootstrap はAutoprefixerを使用してCSS ベンダー プレフィックスを処理します。Bootstrap を Less/Sass ソースからコンパイルし、Gruntfile を使用しない場合は、Autoprefixer をビルド プロセスに自分で統合する必要があります。コンパイル済みの Bootstrap または Gruntfile を使用している場合、Autoprefixer は既に Gruntfile に統合されているため、これについて心配する必要はありません。
Bootstrap は 2 つの形式でダウンロードできます。その中には次のディレクトリとファイルがあり、一般的なリソースを論理的にグループ化し、コンパイルされたバージョンと縮小されたバージョンの両方を提供します。
スターター テンプレートに示されているように、すべての JavaScript プラグインには jQuery を含める必要があることに注意してください。どのバージョンの jQuery がサポートされているかについては、当社までお問い合わせください。bower.json
ダウンロードしたら、圧縮フォルダーを解凍して、(コンパイルされた) Bootstrap の構造を確認します。次のように表示されます。
これは、Bootstrap の最も基本的な形式です。ほぼすべての Web プロジェクトですばやくドロップインして使用するためのプリコンパイル済みファイルです。コンパイル済みのCSS および JS ( bootstrap.*
) と、コンパイルおよび縮小された CSS および JS ( bootstrap.min.*
) を提供します。CSSソース マップ( bootstrap.*.map
) は、特定のブラウザーの開発者ツールで使用できます。オプションの Bootstrap テーマと同様に、Glyphicons のフォントが含まれています。
Bootstrap ソース コードのダウンロードには、コンパイル済みの CSS、JavaScript、およびフォント アセットと、ソースの Less、JavaScript、およびドキュメントが含まれています。より具体的には、以下が含まれます。
、less/
、js/
およびfonts/
は、CSS、JS、およびアイコン フォントのソース コードです (それぞれ)。このdist/
フォルダには、上記のプリコンパイル済みダウンロード セクションにリストされているすべてが含まれています。このdocs/
フォルダーには、ドキュメントのソース コードとexamples/
Bootstrap の使用方法が含まれています。さらに、他のインクルード ファイルは、パッケージ、ライセンス情報、および開発のサポートを提供します。
Bootstrap は、ビルド システムにGruntを使用し、フレームワークを操作するための便利なメソッドを備えています。これは、コードをコンパイルしたり、テストを実行したりする方法です。
Grunt をインストールするには、まずnode.js (npm を含む) をダウンロードしてインストールする必要があります。npm はノード パッケージ モジュールの略で、node.js を介して開発の依存関係を管理する方法です。
次に、コマンドラインから:grunt-cli
でグローバルにインストールしnpm install -g grunt-cli
ます。/bootstrap/
ディレクトリに移動し、 を実行しnpm install
ます。npm はpackage.json
ファイルを確認し、そこにリストされている必要なローカル依存関係を自動的にインストールします。完了すると、コマンド ラインから提供されるさまざまな 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 ドキュメントで作業を開始します。
Bootstrap の多くのコンポーネントを使用して、上記の基本的なテンプレートを構築します。個々のプロジェクトのニーズに合わせて、Bootstrap をカスタマイズおよび調整することをお勧めします。
Bootstrap リポジトリをダウンロードして、以下のすべての例のソース コードを入手してください。例はdocs/examples/
ディレクトリにあります。
Bootlintは公式の Bootstrap HTMLリンターツールです。Bootstrap をかなり「バニラ」な方法で使用している Web ページで、いくつかの一般的な HTML の誤りを自動的にチェックします。Vanilla Bootstrap のコンポーネント/ウィジェットでは、DOM の一部が特定の構造に準拠する必要があります。Bootlint は、Bootstrap コンポーネントのインスタンスが正しく構造化された HTML を持っていることを確認します。Bootstrap Web 開発ツールチェーンに Bootlint を追加して、よくある間違いによってプロジェクトの開発が遅くならないようにすることを検討してください。
Bootstrap の開発に関する最新情報を入手し、これらの役立つリソースを使用してコミュニティに連絡してください。
irc.freenode.net
サーバーの##bootstrap チャンネルで、IRC を使用して仲間の Bootstrappers とチャットします。twitter-bootstrap-3
で質問してください。bootstrap
介して配布するときに Bootstrap の機能を変更または追加するパッケージでキーワードを使用して、最大限の検出可能性を実現する必要があります。Twitter で @getbootstrap をフォローして、最新のゴシップやすばらしいミュージック ビデオを入手することもできます。
Bootstrap は、ページをさまざまな画面サイズに自動的に適応させます。この機能を無効にして、ページがこの応答しない例のように動作するようにする方法は次のとおりです。
<meta>
に記載されているビューポートを省略しますwidth
ます。これは、デフォルトの Bootstrap CSS の後に来るようにしてください。必要に応じて、 with メディア クエリまたは一部のセレクター fu を回避できます。.container
width: 970px !important;
!important
.col-xs-*
は、中/大のクラスに加えて、またはその代わりにクラスを使用します。心配はいりません。極小のデバイス グリッドはすべての解像度に対応しています。IE8 にはまだ Respond.js が必要です (メディア クエリがまだそこにあり、処理する必要があるため)。これにより、Bootstrap の「モバイル サイト」の側面が無効になります。
これらの手順を例に適用しました。ソースコードを読んで、実装された特定の変更を確認してください。
古いバージョンの 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 もサポートされていますが、これらのブラウザーでは一部の 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 を使用する場合は、次の注意事項に注意してください。
別の (サブ) ドメイン (CDN など) でホストされている CSS で Respond.js を使用するには、追加の設定が必要です。詳細については、Respond.js のドキュメントを参照してください。
file://
ブラウザーのセキュリティ ルールにより、Respond.js は、プロトコルを介して表示されるページでは機能しませんfile://
(ローカルの HTML ファイルを開く場合など)。IE8 でレスポンシブ機能をテストするには、HTTP(S) 経由でページを表示します。詳細については、Respond.js のドキュメントを参照してください。
@import
Respond.js は、 経由で参照される CSS では機能しません@import
。特に、一部の Drupal 構成では を使用することが知られています@import
。詳細については、Respond.js のドキュメントを参照してください。
、、、またはbox-sizing: border-box;
と組み合わせた場合、IE8 は完全にはサポートしません。そのため、v3.0.1 ではon s を使用しなくなりました。min-width
max-width
min-height
max-height
max-width
.container
IE8 と@font-face
組み合わせた場合、いくつかの問題があり:before
ます。Bootstrap は、その Glyphicons との組み合わせを使用します。ページがキャッシュされていて、ウィンドウ上にマウスを置かずに読み込まれる (つまり、更新ボタンを押すか、iframe に何かを読み込む) 場合、ページはフォントが読み込まれる前にレンダリングされます。ページ (本文) にカーソルを合わせると、いくつかのアイコンが表示され、残りのアイコンにカーソルを合わせると、それらも表示されます。詳細については、問題 #13863を参照してください。
Bootstrap は、古い Internet Explorer 互換モードではサポートされていません。IE の最新のレンダリング モードを使用していることを確認するには<meta>
、ページに適切なタグを含めることを検討してください。
デバッグ ツールを開いてドキュメント モードを確認します。[ドキュメント モード] を押しF12てチェックします。
このタグは、Bootstrap のすべてのドキュメントと例に含まれており、サポートされている Internet Explorer の各バージョンで可能な限り最高のレンダリングが保証されます。
詳細については、この StackOverflow の質問を参照してください。
Internet Explorer 10 は、デバイスの幅とビューポートの幅を区別しないため、Bootstrap の CSS でメディア クエリを適切に適用しません。通常、これを修正するには、CSS の簡単なスニペットを追加するだけです。
ただし、これはUpdate 3 (別名 GDR3)よりも古い Windows Phone 8 バージョンを実行しているデバイスでは機能しません。このようなデバイスでは、狭い「電話」ビューではなくほとんどデスクトップ ビューが表示されるためです。これに対処するには、バグを回避するために次の CSS と JavaScript を含める必要があります。
詳細と使用ガイドラインについては、Windows Phone 8 と Device-Width を参照してください。
注意点として、Bootstrap のすべてのドキュメントと例にデモンストレーションとしてこれを含めます。
.col-*-1
OS X の v7.1 より前のバージョンの Safari および iOS v8.0 の Safari のレンダリング エンジンでは、グリッド クラスで使用される小数点以下の桁数に問題がありました。したがって、12 個の個別のグリッド列がある場合、列の他の行に比べて不足していることに気付くでしょう。Safari/iOS をアップグレードする以外に、いくつかの回避策があります。
.pull-right
して、右端の配置を取得しますoverflow: hidden
on 要素のサポートは<body>
、iOS と Android ではかなり制限されています。そのために、これらのデバイスのブラウザのいずれかでモーダルの上部または下部をスクロールすると、<body>
コンテンツがスクロールし始めます。Chrome バグ #175502 (Chrome v40 で修正済み) とWebKit バグ #153852を参照してください。
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を参照してください。推奨される回避策:
@screen-*
て、プリンター用紙が極小よりも大きいと見なされるようにします。また、Safari v8.0 では、固定幅.container
の s により、印刷時に Safari が異常に小さいフォント サイズを使用する場合があります。詳細については、 #14868およびWebKit バグ #138192を参照してください。これに対する潜在的な回避策の 1 つは、次の CSS を追加することです。
Android 4.1 (および一部の新しいリリースのようです) には、既定の Web ブラウザー (Chrome ではなく) としてブラウザー アプリが付属しています。残念ながら、ブラウザー アプリには多くのバグがあり、一般的に CSS との矛盾があります。
要素では、 and/orが適用され<select>
ている場合、Android ストック ブラウザはサイド コントロールを表示しません。(詳細については、この StackOverflow の質問を参照してください。) 以下のコード スニペットを使用して、問題のある CSS を削除し、Android ストック ブラウザーでスタイル設定されていない要素としてレンダリングします。ユーザー エージェント スニッフィングは、Chrome、Safari、および Mozilla ブラウザーとの干渉を回避します。border-radius
border
<select>
例を見たいですか?この JS Bin デモをご覧ください。
古いバグのあるブラウザに可能な限り最高のエクスペリエンスを提供するために、Bootstrap はいくつかの場所でCSS ブラウザ ハックを使用して、ブラウザ自体のバグを回避するために特定のブラウザ バージョンに特別な CSS をターゲットにします。これらのハッキングにより、当然のことながら、CSS バリデーターは無効であると不平を言います。いくつかの場所では、まだ完全に標準化されていない最先端の CSS 機能も使用していますが、これらは純粋にプログレッシブ エンハンスメントのために使用されています。
これらの検証警告は、CSS の非ハック部分が完全に検証され、ハック部分が非ハック部分の適切な機能を妨げないため、実際には問題になりません。したがって、これらの特定の警告を意図的に無視する理由です。
私たちの HTML ドキュメントにも、特定の Firefox のバグに対する回避策が含まれているため、些細で取るに足らない HTML 検証警告がいくつかあります。
サードパーティのプラグインやアドオンを公式にサポートしていませんが、プロジェクトで発生する可能性のある問題を回避するための役立つアドバイスを提供しています.
Google マップや Google カスタム検索エンジンなどの一部のサードパーティ ソフトウェアは、要素の最終的な計算幅に影響を与えない* { box-sizing: border-box; }
ようにするルールにより、 Bootstrap と競合します。ボックス モデルとサイズ設定padding
については、CSS トリック を参照してください。
コンテキストに応じて、必要に応じてオーバーライドするか (オプション 1)、領域全体のボックス サイズをリセットすることができます (オプション 2)。
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; }
。
このバグは、サイトで使用している可能性のある他のページ内リンクにも影響を与え、キーボード ユーザーにとっては役に立たなくなることに注意してください。リンクターゲットとして機能する他のすべての名前付きアンカー/フラグメント識別子に同様の一時的な修正を追加することを検討してください。
<h1>
見出し ( - ) をネストする場合<h6>
、主要なドキュメント ヘッダーは<h1>
. 後続の見出しでは、スクリーン リーダーがページの目次を作成できるように、 <h2>
-を論理的に使用する必要があります。<h6>
詳細については、HTML CodeSnifferおよびPenn State の AccessAbilityを参照してください。
現在、Bootstrap で使用できるデフォルトの色の組み合わせの一部 (さまざまなスタイルのボタンクラス、基本的なコード ブロックに使用されるコード ハイライト色の一部、.bg-primary
コンテキスト バックグラウンドヘルパー クラス、白い背景で使用する場合のデフォルトのリンク カラーなど)コントラスト比が低い (推奨比 4.5:1 を下回っている)。これにより、視力の弱いユーザーや色盲のユーザーに問題が発生する可能性があります。これらのデフォルトの色は、コントラストと読みやすさを向上させるために変更する必要がある場合があります。
Bootstrap は MIT ライセンスの下でリリースされており、著作権は 2016 Twitter にあります。より小さなチャンクに煮詰めると、次の条件で記述できます。
詳細については、完全な Bootstrap ライセンスがプロジェクト リポジトリにあります。
コミュニティ メンバーは、Bootstrap のドキュメントをさまざまな言語に翻訳しています。公式にサポートされているものはなく、常に最新であるとは限りません。
翻訳の整理やホストを支援するのではなく、翻訳にリンクするだけです。
新しい、またはより良い翻訳が完成しましたか? プル リクエストを開いてリストに追加します。