第五章のBootStrapグリッドシステム

Bootstrapは、Twitterから、現在最も人気のあるフロントエンドフレームワークです.BootstrapはHTML、CSS、JAVACSCRIPTに基づいており、簡潔で柔軟であり、Web開発をより迅速にすることができます.
学習のポイント:
1.移動機器優先2.レイアウトコンテナ3.グリッドシステム
このレッスンでは、Bootstrapのグリッドシステムを主に学習し、応答型、モバイルデバイス優先のストリームグリッドシステムを提供します.
一.移動機器優先
HTML 5のプロジェクトでは、モバイル端末のプロジェクトを行いました.画面とデバイスの等幅を設定したり、ユーザーのスケールを実行するかどうか、スケールの問題を設定したりするのに非常に重要なmetaがあります.

//   ：         、      、             
 

二.配置容器
Bootstrapはページの内容とグリッドシステムを1つ包む必要がある.container容器.paddingなどのプロパティのため、この2つのコンテナクラスは互いにネストできません.

//    

...
 
//100%  

...

グリッドシステムでは、ブラウザが画面のサイズの増減に伴って最大12列まで自動的に割り当てられます.ページレイアウトは、一連の行(row)と列(column)の組み合わせによって作成されます.次のように動作します.
1.「行(row)」は、に含める必要がある.container(固定幅)または.container−fluid(100%幅)では、適切な配列(aligment)および補間(padding)を付与する.
2.「行(row)」で水平方向に「列(column)」のセットを作成します.
3.あなたの内容は「列(column)」内に置くべきで、「列(column)」だけが行(row)」の直接サブ要素として使用できます.
4.類似rowと.col-xs-4という事前定義されたクラスは、グリッドレイアウトを迅速に作成するために使用できます.Bootstrapソースコードで定義されたmixinを使用して、意味化されたレイアウトを作成することもできます.
5.「列(column)」にpaddingプロパティを設定することで、列と列の間隔(gutter)を作成します.通過する.row要素設定負
marginはそれによって相殺する.container要素が設定したpaddingは、間接的に「行(row)」に含まれる「列(column)」でpaddingを相殺します.
6.負の値のmarginは、次の例がなぜ外側に突出しているのかの原因です.グリッド列の内容を1行に並べます.
7.グリッドシステム内の列は、1〜12の値を指定することによってその範囲を表す.例えば、3つの等幅の列を3つ用いることができる.col-xs-4で作成します.
8.「行(row)」に含まれる「列(column)」が12より大きい場合、余分な「列(column)」が存在する要素は、全体として別の行に並べ替えられます.
9.グリッドクラスは、スクリーン幅が境界点の大きさ以上のデバイスに適用され、小さなスクリーンデバイスに対してグリッドクラスが上書きされる.したがって、要素には任意のものが適用する.col-md-*グリッドクラスは、スクリーン幅が境界点サイズ以上のデバイスに適しており、小さなスクリーンデバイスに対してグリッドクラスを上書きする.したがって、要素には任意のものが適用する.col-lg-*は存在せず、大画面デバイスにも影響します.

//        


...

 
//     12       


1
2
3
4
5
6
7
8
9
10
11
12

 
//        CSS
.a {
height: 100px;
background-color: #eee;
border: 1px solid #ccc;
} 
//      12，      


1-4
5-8
9-12


1-8
9-12

 

グリッドパラメータテーブル
上の図に示すように、グリッドシステムの最外層は、超小画面(<768 px)、小画面(>=768 px)、中画面(>=992 px)、大画面(>=1200 px)の4つの幅のブラウザを区別している.内層containerコンテナの適応幅は、自動、750 px、970 px、および1170 pxである.自動的には、携帯電話の画面であれば、1行の表示を全面的に独占するという意味です.

//          


4
4
4
4
4
4
4
4
4
4
4
4

 
//           ，       


8
3

 
//     ，     12  



1-8
9-12


11-12


 
//          ，push     ，pull     


9
3

上記はBootStrapグリッドシステムに関する資料ですが、皆さんの役に立つことを願っています.