はじめにのページでは、プロジェクトとその機能について紹介していますが、このドキュメントでは、Bootstrapで行うことを なぜ 行うのかに焦点を当てます。他の人が私たちから学び、私たちと一緒に貢献し、私たちの改善を助けることができるように、ウェブ上での構築に対する私たちの哲学を説明しています。
何かおかしな点や、もっと良い方法があるのではないかとお考えですか？イシューを開く-あなたと一緒に議論したいと思います。
要約
それぞれの項目については後ほど詳しく説明しますが、大まかには以下のようなアプローチをとっています。
- コンポーネントは、レスポンシブでモバイルファーストであるべき
- コンポーネントは、ベースクラスで構築され、モディファイアクラスで拡張されるべきである。
- コンポーネントの状態は、共通のz-index スケールに従うべきである。
- 可能な限り、JavaScriptではなく、HTMLとCSSで実装すること
- 可能な限り、カスタムスタイルではなくユーティリティを使用する
- 可能な限り、厳格なHTML 要件（children selectors）の適用を避ける。
レスポンシブ
Bootstrapのレスポンシブスタイルは、レスポンシブであることを前提に作られており、このアプローチはしばしばmobile-firstと呼ばれます。私たちはこの用語をドキュメントで使用しており、ほぼ同意していますが、時にそれは広すぎることがあります。Bootstrapでは、すべてのコンポーネントが完全にレスポンシブでなければならないわけではありませんが、このレスポンシブアプローチは、ビューポートが大きくなるとスタイルを追加するように促すことで、CSSのオーバーライドを減らすことを目的としています。
Bootstrap全体では、メディアクエリでこれを最も明確に見ることができます。ほとんどの場合、特定のブレークポイントで適用され始め、より高いブレークポイントまで続くmin-widthクエリを使用します。例えば、.d-noneはmin-width: 0から無限大まで適用されます。一方、.d-md-noneは、中程度のブレークポイントから上に適用されます。
コンポーネント固有の複雑さが必要な場合には、max-widthを使用することもあります。時には、コンポーネントのコア機能を書き換えるよりも、このようなオーバーライドの方が機能的にも精神的にもスッキリした状態で実装やサポートができることもあります。私たちはこのような方法を制限するように努めていますが、時折使用することがあります。
クラス
クロスブラウザ対応の正規化スタイルシート「Reboot」を除き、私たちのスタイルはすべてクラスをセレクタとして使用することを目的としています。これは、タイプセレクタ（例：input[type="text"]）や、スタイルを簡単にオーバーライドできないような特殊なものにする余計な親クラス（例：.parent .child）を避けることを意味します。
そのため、コンポーネントは、一般的な、オーバーライドできないプロパティと値のペアを格納するベースクラスで構築されるべきです。例えば、.btnや.btn-primaryなどです。ここでは、display、padding、border-widthなどの一般的なスタイルには.btnを使用します。そして、.btn-primaryのようなモディファイアを使って、色や背景色、ボーダーカラーなどを追加します。
修飾子クラスは、複数のバリアントで変更すべき複数のプロパティや値がある場合にのみ使用してください。修飾子は必ずしも必要なものではないので、作成する際には実際にコードの行数を節約し、不必要なオーバーライドを防いでいることを確認してください。修飾子の良い例としては、テーマのカラークラスやサイズバリアントなどがあります。
z-index scales
Bootstrapには、コンポーネント内の要素とオーバーレイコンポーネントの2つのz-indexスケールがあります。
コンポーネント要素
- Bootstrapのコンポーネントの中には、
borderプロパティを修正しなくてもダブルボーダーにならないように、要素が重なって作られているものがあります。例えば、ボタングループ、入力グループ、ページネーションなどです。 - これらのコンポーネントは、
0から3の標準的なz-indexスケールを共有しています。 0はデフォルト（初期）、1は:hover、2は:active/.active、3は:focusです。- このアプローチは、ユーザーの優先度が最も高いという私たちの期待にマッチしています。フォーカスされた要素は、視界に入り、ユーザーの注意を引くことになります。アクティブな要素は、状態を示すので2番目に高い。ホバーはユーザーの意図を示すので3番目に高いですが、ほとんど すべて のものがホバーされます。
オーバーレイコンポーネント
Bootstrapには、ある種のオーバーレイとして機能するコンポーネントがいくつかあります。これには、z-indexの大きい順に、ドロップダウン、固定およびスティッキーナビバー、モーダル、ツールチップ、ポップオーバーが含まれます。これらのコンポーネントには、1000から始まる独自のz-indexスケールがあります。この開始値は任意に選ばれたもので、弊社のスタイルとお客様のプロジェクトのカスタムスタイルの間の小さなバッファとして機能します。
各オーバーレイコンポーネントは、一般的なUIの原則により、ユーザーがフォーカスしたりホバーした要素が常に表示されたままになるように、z-indexの値をわずかに増加させます。例えば、モーダルはドキュメントブロック（例：モーダルのアクションを除いて他のアクションを取ることができない）なので、それをナビバーの上に配置します。
これについては、z-index レイアウトページで詳しく説明しています。
JSよりHTMLとCSS
可能な限り、私たちはJavaScriptよりもHTMLとCSSを書きたいと考えています。一般的には、HTMLとCSSの方が普及しており、様々な経験値を持つより多くの人がアクセスできます。また、HTMLとCSSは、JavaScriptよりもブラウザでの処理が速く、一般的にブラウザが多くの機能を提供してくれます。
この原則は、data属性を使った私たちのファーストクラスのJavaScript APIです。私たちのJavaScriptプラグインを使用するために、ほとんどすべてのJavaScriptを記述する必要はありません。これについては、JavaScriptの概要で詳しく説明しています。
最後に、私たちのスタイルは、一般的なウェブ要素の基本的な動作に基づいています。可能な限り、ブラウザが提供するものを使用したいと考えています。たとえば、ほとんどの要素に.btnクラスを付けることができますが、ほとんどの要素は意味的な価値やブラウザの機能を提供していません。そこで、代わりに<button>や<a>を使用しています。
より複雑なコンポーネントについても同様です。入力の状態に応じて親要素にクラスを追加し、それによってテキストに赤のスタイルを与えるフォーム検証プラグインを独自に書くこともできますが、私たちはすべてのブラウザが提供する:valid/:invalid疑似要素を使用することを好みます。
ユーティリティ
Bootstrap 3ではヘルパーとなったユーティリティクラスは、CSSの肥大化やページパフォーマンスの低下に対処する強力な味方です。ユーティリティクラスは、通常、クラスとして表現された単一の、不変のプロパティと値のペアです（例えば、.d-blockは、display: block;を表します）。ユーティリティクラスの最大の魅力は、HTMLを記述する際のスピードと、カスタムCSSの記述量を制限することです。
特にカスタムCSSに関しては、ユーティリティーを使って、よく繰り返されるプロパティと値のペアを一つのクラスにまとめることで、ファイルサイズの増大に対処することができます。これは、プロジェクトの規模に応じて劇的な効果を発揮します。
柔軟なHTML
常に可能というわけではありませんが、私たちはコンポーネントのためのHTML要件に過度に固執しないように努めています。そのため、CSSのセレクタでは単一のクラスに焦点を当て、直接の子セレクタ(>)は避けるようにしています。これにより、実装の自由度が増し、CSSをよりシンプルに、より特殊にしないようにしています。
コード規則
コードガイド（Bootstrapの共同制作者、@mdoによる）は、BootstrapでHTMLとCSSをどのように記述するかを文書化したものです。一般的なフォーマット、常識的なデフォルト、プロパティと属性の順序などのガイドラインが明記されています。
私たちはStylelintを使用して、Sass/CSSにこれらの標準やその他のものを適用しています。私たちのカスタムStylelint設定はオープンソースであり、他のユーザーが使用したり拡張したりすることができます。
私たちはvnu-jarを使って、標準的でセマンティックなHTMLを実現し、一般的なエラーも検出しています。