ブートストラップ3はモバイルファーストです。この意味では、ブートストラップコードは小さな画面デバイス（モバイルデバイス、タブレットなど）で始まり、大画面デバイス（ラップトップ、デスクトップなど）のコンポーネントとグリッドに拡張されます。
1。モバイルデバイスの優先戦略
1。コンテンツ：最も重要なことを決定します。
2。レイアウト
より小さな幅の優先設計。
モバイルデバイスには基本的なCSSが推奨され、メディアクエリはタブレットとデスクトップコンピューターを対象としています。
3。徐々に強化されました
画面サイズが大きくなると要素を追加します。
画面またはビューポートのサイズが大きくなると、システムは自動的に最大12列に分割されます。下の図に示すように：
2。ブートストラップグリッドシステムの作業原則（グリッドシステム）
グリッドシステムは、コンテンツを含む一連の行と列を介してページレイアウトを作成します。ブートストラップメッシュシステムの仕組みのリストは次のとおりです。
1.適切なアライメントとパディングを取得するには、列を.containerクラスに配置する必要があります。
2。行を使用して、列の水平グループを作成します。
3.コンテンツは列に配置する必要があり、列のみが行の直接の子要素になることができます。
4. .rowや.col-xs-4などの事前定義されたグリッドクラスを使用して、グリッドレイアウトをすばやく作成できます。より少ないハイブリッドクラスは、より多くのセマンティックレイアウトに使用できます。
5。列は、パディングを介して列の内容の間にギャップを作成します。この内側のマージンは、.rowsのマージンによって負であり、6番目の列、最後の列の行のオフセットを示しています。
7.グリッドシステムは、スパンする12の使用可能な列を指定することにより作成されます。たとえば、3つの等しい列を作成するには、3つの.col-xs-4を使用します。
3。メディア調査
メディアクエリは非常にシックな「条件付きCSSルール」です。特定の規定の条件に基づいて、一部のCSSにのみ適用されます。これらの条件が満たされている場合、対応するスタイルが適用されます。
ブートストラップのメディアクエリを使用すると、ビューポートのサイズに基づいてコンテンツを移動、表示、非表示にすることができます。以下のメディアクエリは、ブートストラップグリッドシステムに重要なブレークポイントのしきい値を作成するために、より少ないファイルで使用されます。
/* Ultra-Smallデバイス（携帯電話、768px未満）* //* Bootstrapのデフォルトではメディアクエリなし*//*小型デバイス（タブレット、768pxから始まる）*/ @ @ @ @width： @screen-sm-min）{...}/*メディアデバイス（デスクトップ）デバイス（1200pxから始まる大きなデスクトップ） */ @メディア（min-width： @screen-lg-min）{...}メディアクエリコードにMax-Widthを含めることがあり、CSSのより小さな範囲の画面サイズへの影響を制限します。
@media（max-width： @screen-xs-max）{...} @media（min-width： @screen-sm-min）and（max-width： @screen-sm-max）{...} @media（min-width： @screen-md-min）and（max-width： @screen-md-max {...メディアクエリには2つの部分、最初にデバイス仕様、次にサイズルールがあります。上記の場合、次のルールが設定されています。
次のコード行を見てみましょう。
@media（min-width： @screen-sm-min）および（max-width： @screen-sm-max）{...}
min-width： @screen-sm-minのすべてのデバイスの場合、画面幅が @screen-sm-maxよりも小さい場合、一部の処理が実行されます。
4。グリッドオプション
次の表は、ブートストラップメッシュシステムが複数のデバイスでどのように機能するかをまとめたものです。
5。基本的なグリッド構造
ブートストラップグリッドの基本構造は次のとおりです。
<div> <div> <div> </div> <div> </div> </div> <div> ... </div> </div> <div> ....
これが特定のコードの例です。
<div> <h1> hello、world！</h1> <div> <！ - 小型デバイス携帯電話（<768px） - > <div style = "background：＃f00"> 1 </div> <div style = "background：＃b2b0b0"> 2 </div> <div style = "背景：＃ff6a00"> style = "background：＃4cff00"> 5 </div> <div style = "background：＃0ff"> 6 </div> <div style = "background：＃0094ff"> 7 </div> <div style = "背景：＃0094ff"> 7 </div> <div style = " style = "背景：＃ff006e"> 10 </div> <div style = "background：＃ac5050"> 11 </div> <div style = "background：＃54bd4f"> 12 </div> </div> <div> <！ - 小さなデバイスタブレット（≥768px） - > <div style = " ＃ffd800 "> 1 </div> <div style =" background：＃ac5050 "> 1 </div> </div> <div> <！ - 中サイズのデスクトップコンピューター（≥992px） - > <div style =" （≥1200px） - > <div style = "background：＃ac5050"> 1 </div> <div style = "background：＃54bd4f"> 1 </div> </div> </div> </div>
6。オフセット列
オフセットは、よりプロフェッショナルなレイアウトに役立つ機能です。それらは、列のためのより多くのスペースを作るために使用できます。たとえば、.col-xs =*クラスはオフセットをサポートしていませんが、空のセルを使用してこれを実現することができます。
大画面モニターでオフセットを使用するには、.col-md-offset-* classを使用します。これらのクラスは、列の左マージンを *列で増やします。ここで、 *範囲は1から11です。
以下の例では、<div> .. </div>があり、.col-md-offset-3クラスを使用してこのdivを中心にします。
<div> <div> <div style = "background-color：＃dedef8;"> <p>テストオフセット列--- 3列がここでオフセットされます</p> </div> </div> <div> div style = "＃f00"> 1 </div> <div style = " style = "background：＃ffd800"> 4 </div> <div style = "background：＃4cff00"> 5 </div> <div style = "background：＃0ff"> 6 </div> <div style = "背景：＃0094ff"> 7 </div> <div style = " style = "background：＃ff006e"> 10 </div> <div style = "background：＃ac5050"> 11 </div> <div style = "background：＃54bd4f"> 12 </div> </div> </div> div>
表示効果：
7。ネストされた列
コンテンツ内のデフォルトのグリッドをネストするには、新しい.rowを追加し、既存の.col-md-*列内に.col-md-*列のセットを追加します。ネストされた行には一連の列が含まれている必要があり、この列のセットの列の数は12を超えることはできません（実際、12列を占有する必要があるという要件はありません）。
次の例では、レイアウトには2つの列があり、2番目の列は2つの行と4つのボックスに分割されます。
<div> <div> <div style = "background：＃b2b0b0">最初の列< /div> <div style = "background：＃dedef8"> 2番目の列 - itにネストされた4つのdivがあります<div> <div style = "背景="＃0094ff ">私はコンテンツです。 </div> <div> <div style = "background：＃ff00dc">私はコンテンツ3 <br/> <br/> <br/> </div> <div style = "background：＃ff006e">コンテンツ4 </div> </div> </div> </div> </div>
表示効果：
8。列の並べ替え
ブートストラップメッシュシステムのもう1つの完璧な機能は、ある順序で列を簡単に書き込み、別の順序で表示できることです。
.col-md-push-*および.col-md-pull-*クラスを使用して、組み込みのグリッド列の順序を簡単に変更できます。ここで、*は1から11の範囲です。
以下の例では、2つの列レイアウトがあり、サイドバーのように左列が狭くなっています。 .col-md-push-*および.col-md-pull-*クラスを使用して、2つの列の順序を交換します。
<div> <div> <div style = "背景：＃ff00dc">左</div> <div style = "background：＃ff006e">右</div> </div> </div>
表示効果：
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。