Source

アプローチ

Bootstrap をより簡単にカスタマイズおよび拡張できるように、Bootstrap を構築および維持するために使用される指針となる原則、戦略、および手法について学びます。

入門ページでは、プロジェクトとそれが提供するものの紹介ツアーを提供していますが、このドキュメントでは、Bootstrap で行うことの理由に焦点を当てています。他の人が私たちから学び、私たちに貢献し、私たちの改善を助けることができるように、Web 上に構築するという私たちの哲学を説明しています。

正しく聞こえない、または改善できる可能性があるものを見つけましたか? 問題を開きます—それについて話し合うのが大好きです。

概要

これらのそれぞれについて詳しく説明しますが、大まかに言えば、私たちのアプローチの指針となるものは次のとおりです。

  • コンポーネントはレスポンシブでモバイル ファーストである必要があります
  • コンポーネントは基本クラスで構築し、修飾子クラスを介して拡張する必要があります
  • コンポーネントの状態は、共通の z-index スケールに従う必要があります
  • 可能な限り、JavaScript よりも HTML と CSS の実装を優先する
  • 可能な限り、カスタム スタイルよりもユーティリティを使用する
  • 可能な限り、厳密な HTML 要件 (子セレクター) を強制することは避けてください。

レスポンシブ

Bootstrap のレスポンシブ スタイルは、レスポンシブになるように構築されています。これは、モバイル ファーストと呼ばれることが多いアプローチです。私たちはこの用語をドキュメントで使用しており、おおむね同意していますが、場合によっては広すぎる場合があります。すべてのコンポーネントが Bootstrap で完全にレスポンシブである必要はありませんが、このレスポンシブなアプローチは、ビューポートが大きくなるにつれてスタイルを追加するように促すことで、CSS のオーバーライドを減らすことを目的としています。

Bootstrap 全体では、メディア クエリでこれを最も明確に確認できます。ほとんどの場合、min-width特定のブレークポイントで適用を開始し、より高いブレークポイントまで実行するクエリを使用します。たとえば、aは fromから無限大.d-noneまで適用されます。min-width: 0一方、a.d-md-noneは中間ブレークポイント以上から適用されます。

max-widthコンポーネント固有の複雑さが必要な場合に使用します。場合によっては、これらのオーバーライドは、コンポーネントからコア機能を書き直すよりも、機能的および精神的に実装およびサポートする方が明確です。私たちはこのアプローチを制限するよう努めていますが、時々使用します。

クラス

クロスブラウザーの正規化スタイルシートである Reboot を除いて、すべてのスタイルはクラスをセレクターとして使用することを目的としています。これは、スタイルを特定しすぎて簡単にオーバーライドできない型セレクター ( などinput[type="text"]) や不要な親クラス ( など) を避けることを意味します。.parent .child

そのため、コンポーネントは、オーバーライドされない共通のプロパティと値のペアを格納する基本クラスを使用して構築する必要があります。たとえば、.btnと.btn-primary. 、、 など.btnのすべての一般的なスタイルに使用します。次に、色、背景色、境界線の色などを追加するような修飾子を使用します。displaypaddingborder-width.btn-primary

修飾子クラスは、複数のバリアント間で変更する複数のプロパティまたは値がある場合にのみ使用する必要があります。修飾子は必ずしも必要ではないため、実際にコード行を保存し、それらを作成するときに不要なオーバーライドを防止していることを確認してください。修飾子の良い例は、テーマのカラー クラスとサイズ バリアントです。

Z インデックス スケール

z-indexBootstrap には、コンポーネント内の要素とオーバーレイ コンポーネントの2 つのスケールがあります。

構成要素

  • Bootstrap の一部のコンポーネントは、プロパティを変更せずに二重境界線を防止するために、重複する要素で構築されていborderます。たとえば、ボタン グループ、入力グループ、ページネーションなどです。
  • これらのコンポーネントは、 ～の標準z-indexスケールを共有しています。03
  • 0はデフォルト（初期）、1は:hover、2は:active/ .active、および3は です:focus。
  • このアプローチは、ユーザーの優先度が最も高いという私たちの期待に一致します。要素がフォーカスされている場合、それはビュー内にあり、ユーザーの注意を引いています。アクティブな要素は、状態を示すため、2 番目に高くなります。ホバーはユーザーの意図を示すため 3 番目に高いですが、ほとんど何でもホバーできます。

オーバーレイ コンポーネント

Bootstrap には、ある種のオーバーレイとして機能するいくつかのコンポーネントが含まれています。これにはz-index、ドロップダウン、固定およびスティッキー ナビゲーションバー、モーダル、ツールチップ、およびポップオーバーが最も高い順に含まれます。z-indexこれらのコンポーネントには、から始まる独自のスケールがあります1000。この開始番号はランダムであり、スタイルとプロジェクトのカスタム スタイルの間の小さなバッファーとして機能します。

各オーバーレイ コンポーネントはz-index、一般的な UI 原則により、ユーザーがフォーカスした要素やホバーした要素を常に表示したままにすることで、その価値をわずかに高めます。たとえば、モーダルはドキュメントのブロックです (たとえば、モーダルのアクション以外のアクションを実行することはできません)。そのため、それをナビゲーションバーの上に置きます。

詳細については、z-indexレイアウト ページをご覧ください。

JS 上の HTML と CSS

可能な限り、JavaScript よりも HTML と CSS を記述することをお勧めします。一般に、HTML と CSS はより豊富で、さまざまな経験レベルのより多くの人々にとってアクセスしやすいものです。また、HTML と CSS は JavaScript よりもブラウザーで高速に動作し、ブラウザーは通常、多くの機能を提供します。

この原則は、第一級の JavaScript API がdata属性です。JavaScript プラグインを使用するために、ほとんどすべての JavaScript を記述する必要はありません。代わりに、HTML を記述してください。詳細については、JavaScript の概要ページをご覧ください。

最後に、私たちのスタイルは、一般的な Web 要素の基本的な動作に基づいて構築されています。可能な限り、ブラウザが提供するものを使用することをお勧めします。たとえば、.btnほぼすべての要素にクラスを配置できますが、ほとんどの要素はセマンティック値やブラウザー機能を提供しません。そのため、代わりに<button>s と<a>s を使用します。

同じことが、より複雑なコンポーネントにも当てはまります。独自のフォーム検証プラグインを記述して、入力の状態に基づいて親要素にクラスを追加することもできます。これにより、テキストのスタイルを赤にすることができますが、すべてのブラウザーが提供する / 疑似要素を使用することを:validお:invalid勧めします。

ユーティリティ

ユーティリティ クラス (以前は Bootstrap 3 のヘルパー) は、CSS の肥大化とページ パフォーマンスの低下に対抗するための強力な味方です。ユーティリティ クラスは通常、クラスとして表現される単一の不変のプロパティと値のペアです (たとえば、.d-blockを表しdisplay: block;ます)。それらの主な魅力は、HTML を記述し、記述しなければならないカスタム CSS の量を制限する際の使用速度です。

特にカスタム CSS に関しては、ユーティリティは、最も一般的に繰り返されるプロパティと値のペアを 1 つのクラスに減らすことで、ファイル サイズの増加に対処するのに役立ちます。これは、プロジェクトの大規模な規模で劇的な効果をもたらす可能性があります。

柔軟な HTML

常に可能であるとは限りませんが、コンポーネントの HTML 要件が過度に独断的にならないように努めています。したがって、CSS セレクターの単一クラスに焦点を当て、直接の子セレクター ( >) を回避しようとします。これにより、実装の柔軟性が高まり、CSS をよりシンプルで具体的でなくすることができます。