アプローチ（Approach）

導入のページにはプロジェクトの紹介ツアーとその紹介があるが、ここではBootstrapで何をするのかについて焦点を当てる。それは、他の人がBootstrapから学習し、共に貢献し、改善を助けるために、ウェブ上に構築するBootstrapの概念を説明。

正しいとは言えない、あるいはもっとうまくいくかもしれない方法があれば、GitHubで意見 を提起すること。－ Bootstrapは話し合いが大好き（但し英語）。

 

概要（Summary）

ここではBootstrapのアプローチをどのように解説するのか深く掘り下げてみる。

• コンポーネントはレスポンシブ対応とモバイルファーストでなければならない
• コンポーネントは基本クラスで構築し、修飾子クラスを使って拡張する必要がある
• コンポーネントの状態は、共通のZ-indexスケールに従う必要がある
• 可能な限りJavaScriptよりもHTMLとCSSの実装が好ましい
• 可能な限りカスタムスタイルよりもユーティリティを使用する
• 可能な限り厳密なHTML要件（子セレクタ）を強制しないように

 

レスポンシブ（Responsive）

Bootstrapのレスポンシブスタイルは、レスポンシブ性が高くなるように構築されている。これは、しばしばモバイルファーストと呼ばれている。Bootstrapの解説では、そのほとんどに対応するが、時にはそれが大まかな可能性もある。すべてのコンポーネントがBootstrapで完全にレスポンシブするわけではないが、このレスポンスアプローチは、ビューポートが大きくなるにつれてスタイルを追加するように促すことで、CSSの上書きを減らすのが目的。

Bootstrap全体ではメディアクエリで最も明確にわかります。ほとんどの場合、特定のブレークポイントに適用され始め、より高いブレークポイントまで実行される最小幅のクエリを使用。例えば、.d-none は min-width：0 から無限大に適用される。一方、.d-md-none は中程度のブレークポイント以降に適用される。

コンポーネントの固有の複雑さが必要なときには、max-width を使用することがある。時には、これらの上書きは、コンポーネントのコア機能を書き換えるより機能的にも精神的にも明確に実装やサポート可能。Bootstrapではこのアプローチを制限するよう努めているが、それでも時々使用することがある。

 

クラス（Classes）

ブラウザ間の正規化スタイルシートであるRebootを除き、すべてのスタイルはクラスをセレクタとして使用することを目指している。これは、typeセレクタ（input[type="text"] など）や外側の親クラス（.parent .child など）の操作が簡単すぎて簡単に上書きできないようにすることを意味している。

そのためコンポーネントは、上書きされない共通のプロパティと値の組合せを格納する基本クラスを使用して構築する必要がある。例えば、.btn と .btn-primary。display, padding, border-width などのすべての共通スタイルに .btn を使用し、次に、.btn-primary のような修飾子を使用して、color, background-color, border-color などを追加する。

修飾子クラスは、複数のバリエーションにわたって複数のプロパティまたは値を変更する必要がある場合にのみ使用する。修飾子は必ずしも必要なわけではないので、コードの行を実際に保存していて、作成時に不要な上書きを防ぐ必要がある。修飾子の良い例は、テーマカラークラスとサイズバリエーション。

 

z-indexスケール（z-index scales）

Bootstrapには、コンポーネント要素間とオーバーレイコンポーネント要素間の2つの z-index スケールがある。

コンポーネント要素（Component elements）

• Bootstrapの一部のコンポーネント（ボタングループ、インプットグループ、ページ送りなど）は、border プロパティを変更せずに二重の境界線を防止するため、要素が重なり合うよう構築されている。
• これらのコンポーネントでは、 0 〜 3 のデフォルト z-index スケールを共有。
• 0 はデフォルト（初期値）、1 は :hover、2 は :active/.active、3 は :focus に設定。
• このアプローチは、最高のユーザー優先度に対する期待に合致。要素がフォーカスされている場合は、その要素が表示され、ユーザーの注意を払って表示。アクティブな要素は状態を示すので2番目に高い。ホバーはユーザーの意図を示しているため、ホバーは3番目に高いが、ほとんど何らかの形でホバー可能。

オーバーレイ要素（Overlay components）

Bootstrapには、数種類のオーバーレイとして機能するいくつかのコンポーネントが組み込まれている。これには、z-index の高いものからドロップダウン、常時固定または最上部に到達すると固定されるナビゲーションバー、モーダル、ツールチップ、ポップオーバーの順で組み込まれている。これらのコンポーネントには、1000 から始まる独自の z-index スケールがある。この開始番号は任意に選択されたもので、Bootstrapのスタイルとお使いのプロジェクトのカスタムスタイルの間の小さなバッファとして機能。

各オーバーレイコンポーネントは、共通のUI原則により、ユーザーがフォーカスした要素またはホバーされた要素を常に表示できるように、z-index 値をわずかに増加させる。例えば、モーダルは文書全体の表示をブロック（モーダルのアクションのために他のアクションを保存することは不可）。そのため、ナビゲーションバーの上に配置。

これについての詳細は、z-indexのレイアウトページに記載。

 

JS上のHTMLとCSS（HTML and CSS over JS）

可能な限り、BootstrapではJavaScriptよりもHTMLとCSSを書くことを好む。一般的に、HTMLとCSSの方が多種多様な経験レベルの多くの人々にとってよりアクセス可能になる。ブラウザではJavaScriptよりもHTMLやCSSの方が速く、ブラウザには一般的な機能が多数用意されている。

この原則は、data 属性を使ったBootstrapの最初のクラスのJavaScript APIである。JavaScriptプラグインを使用するのにJavaScriptを記述する必要はほとんどない。代わりにHTMLを記述する。詳細は、JavaScriptのデータ属性に記載。

最後に、Bootstrapのスタイルは一般的なWeb要素の基本的な動作に基づく。可能であればブラウザが提供するものを使用することを推奨。例えば、ほぼすべての要素で .btn クラスを置くことが可能だが、ほとんどの要素はセマンティックな値やブラウザ機能を提供しない。代わりに、<button> や <a> を使用する。

より複雑なコンポーネントについても同様。入力の状態に基づいて親要素にクラスを追加する独自のフォーム検証プラグインを作成することが可能だが、テキストのスタイルを赤色に設定するよりブラウザが提供する :valid/:invalid 疑似要素を使用することを推奨。

 

ユーティリティ（Utilities）

ユーティリティクラス（Bootstrap3以前でいうヘルパークラス）は、CSSの肥大化とページパフォーマンスの低下を防ぐ強力な味方。ユーティリティクラスは、通常はクラスとして表現された不変のプロパティ値の組合せ（.d-block は display: block; を表すなど）である。その主な魅力は、書かなければならないカスタムCSSの量を制限しながらスピーディに使用できるHTMLが書けること。

特にカスタムCSSに関して、ユーティリティは、最も頻繁に繰り返されるプロパティ値の組合せを単一のクラスに減らすことにより、ファイルサイズの増加を抑えるのに役立つ。これはプロジェクトのスケールで劇的な効果をもたらすことが可能。

 

フレキシブルHTML（Flexible HTML）

常に可能なわけではないが、Bootstrapでは、コンポーネントのHTML要件では独断的にならないように努めている。従ってBootstrapではCSSセレクタの単一のクラスに焦点を当て、直接の子セレクタ(>)を回避している。これにより、実装のフレキシブル性が向上し、CSSの簡素化と特定性の低下を防ぐことが可能。

 

コード規約（Code conventions）v4.6.0追加

（Bootstrapの共同作成者である@mdoによる）コードガイド（日本語版※若干古いかも）では、Bootstrap全体でHTMLとCSSを作成する方法について説明している。一般的なフォーマット、常識的なデフォルト、プロパティと属性の順序などのガイドラインを指定。

BootstrapはStylelintを使用して、Sass/CSSでこれらの標準などを適用している。カスタムのStylelint構成はオープンソースであり、他のユーザーでも使用や拡張可能。

vnu-jarを使用して、標準とセマンティックHTMLを適用し、一般的なエラーを検出。