TwitterのBootstrapは、現在最も人気のあるフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。シンプルで柔軟で、Web開発をより速くします。
学習のための重要なポイント：
1.モバイルデバイスが推奨されます
2。レイアウトコンテナ
3。グリッドシステム
このレッスンでは、主にBootstrapのグリッドシステムについて学び、レスポンシブでモバイルファーストストリーミンググリッドシステムを提供します。
1つ。モバイルデバイスが推奨されます
HTML5プロジェクトでは、モバイルプロジェクトを行いました。画面とデバイスのクワッド幅を設定し、ユーザースケーリングとスケーリングを実行するかどうかに非常に重要なメタがあります。
//画面幅は、デバイス、初期スケーラブル、最大スケーラブル、およびユーザースケーリングの禁止と一致しています。
二。レイアウトコンテナ
Bootstrapには、ページコンテンツとラスターシステム用の.containerコンテナが必要です。パディングなどの属性により、これらの2つのコンテナクラスを互いにネストすることはできません。
// width <div> ... </div> // 100％幅<div> ... </div>を修正しました
ラスターシステムでは、画面のサイズが増加または減少するにつれて、ブラウザは最大12列まで自動的に割り当てられます。一連の行と列を組み合わせて、ページレイアウトを作成します。作業原則は次のとおりです。
1。「row」は、.container（固定幅）または.container-fluid（100％幅）に含まれて、適切なアライメントとパディングを与える必要があります。
2。「行」を介して水平方向に「列」のセットを作成します。
3.コンテンツは「列」に配置する必要があり、「列」のみを行の直接子要素として使用できます。
4. .rowや.col-xs-4などの事前定義されたクラスを使用して、ラスターレイアウトをすばやく作成できます。
ブートストラップソースコードで定義されているミックスインを使用して、セマンティックレイアウトを作成することもできます。
5.「列」のパディングプロパティを設定して、列間に溝を作成します。 .row要素の負の値を設定します
したがって、マージンは、.container要素のパディングセットを相殺します。
6.負のマージンが、次の例が外側に強調する理由です。ラスター列の内容は連続して配置されています。
7.ラスターシステムの列は、1から12の値を指定することにより範囲にまたがる範囲を表します。たとえば、3つの列の列の列を3つの.col-xs-4を使用して作成できます。
8。「行」に含まれる「列」が12を超える場合、余分な「列」が配置される要素は、全体として別の行に配置されます。
9.グリッドクラスは、分割点のサイズ以上の画面幅のデバイスに適しており、小さな画面デバイスのグリッドクラスをカバーします。したがって、要素に.col-md-*ラスタークラスを適用することは、分割点のサイズ以上の画面幅を持つデバイスに適しており、小さな画面デバイスのラスタークラスを上書きします。したがって、要素に.col-lg-*を適用することは存在しません。これは大画面デバイスにも影響します。
//応答性のある行を作成<div> <div> ... </div> </div> // 12列までのレスポンシブ行を作成します<div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> <div> 7 </div> <div> 8 </div> <div> 9 </div> <div> 10 </div> div> </div> </div> css.a {height：100px; background-color：#eee; border：1px solid #ccc;} //列の総数は12で、各列には複数の列が割り当てられています<div> <div> <div> 1-4 </div> <div> 5-8 </div> <div> 9-12 </div> </div> <div> <div> 1-8 </div> <div> 9-12 </div> </div> 9-12 </div> </div >> </div> 9-12 </div> </div >>ラスターパラメーターテーブル
上の図に示すように、グリッドシステムの最も外側のレイヤーは、ブラウザの4つの幅を区別します：超小画面（<768px）、小さな画面（> = 768px）、中画面（> = 992px）、および大画面（> = 1200px）。内側の.containerコンテナの適応幅は、自動、750px、970px、1170pxです。自動とは、携帯電話の画面に表示されている場合、1つのラインのみを完全に表示することを意味します。
// 4つの画面すべてをアクティブにしますカテゴリ<div> <div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> div> </div> div> //時々、列オフセットを設定して中央のギャップを保つことができます<div> <div> <div> 8 </div> <div> 3 </div> </div> </div> //ネストもできます。また、埋め込みも12です。 2つの列を交換し、左に押し、右に引っ張ります<div> <div> <div> 9 </div> <div> 3 </div> </div> </div>
上記はBootstrapグリッドシステムに関連する情報です。誰にとっても役立つことを願っています！