Bootstrap グリッド system_html/css_WEB-ITnose の詳細説明

ブートストラップ フレームワークのグリッド システムはコンテナを 12 等分に分割します。これを使用する場合、実際の状況に応じて LESS/SASS ソース コードを再コンパイルして 12 の値を変更できます。ブートストラップ フレームワークのグリッド システムは次のように動作します。

1. データ行 (.row) は、適切な配置とパディングを与えることができるように、コンテナー (.container) に含まれている必要があります。 .column) を行 (.row) に追加できますが、列数の合計が均等に分割された列の合計数 (例: 12) を超えることはできません。

<div class="container"><div class="row"></div></div>

3. 特定のコンテンツを配置する必要があります。内部の列コンテナー (.column) 内にあり、列コンテナー (.row) の直接の子要素として使用できるのは列 (.column) だけです

4. パディング (padding) を設定して列間のスペースを作成し、次に、最初の列のパディングを設定し、最後のスタックでパディングの効果を相殺するために負のマージンを設定します

は、4 種類のブラウザ (超小型画面、小型画面) に付属するブートストラップ グリッド システムで応答性の効果があります、中画面および大画面）、そのブレークポイントは 768px、992px、1220px

コンテナ (.container)、その幅はブラウザ解像度ごとに異なります: 自動、760px、970px、1170px;

<div class="container"><div class="row">  <div class="col-md-4"></div>  <div class="col-md-8"></div></div></div>

Row コンテナ (. row) は、コンテナーの行を 12 等分、つまり列に分割します。各列にはpadding-left:15pxとpadding-right:15pxがあり、これにより最初の列のpadding-leftと最後の列のpadding-rightが中央の幅の30pxを占めることになります

.container {  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;  @media (min-width: 768px) {  .container {    width: 750px;  }  @media (min-width: 992px) {  .container {    width: 970px;  }  @media (min-width: 1200px) {  .container {    width: 1170px;  }

rowコンテナー ( .row) は、margin-left と margin-right の値 -15px を定義します。これは、最初の列の左パディングと最後の列の右パディングをオフセットするために使用されます。これにより、最初の列と最後の列の間の距離が調整されます。最後の列とコンテナー (.container) スペースはありません

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {  position: relative;  min-height: 1px;  padding-right: 15px;  padding-left: 15px;}

基本的な使い方

ブートストラップ フレームワークは画面サイズごとに異なるグリッド スタイルを使用するため、以下では中画面 (970px) を次のように扱います。例。 1. 列の結合

列の結合は、結合する列の数を変更することです (列の合計数は 12 を超えることはできません)。これは、テーブルの Colspan 属性と似ていますが、次の 2 つの特徴だけがあります。幅のパーセンテージに基づいてフローティングします

.row {  margin-right: -15px;  margin-left: -15px;}

効果は次のとおりです:

すべての列が左にフロートされるようにします

<div class="container">           <div class="row">               <div class="col-md-4">col-md-4</div>               <div class="col-md-8">col-md-8</div>           </div>           <div class="row">               <div class="col-md-4">col-md-4</div>               <div class="col-md-4">col-md-4</div>               <div class="col-md-4">col-md-4</div>           </div>           <div class="row">               <div class="col-md-3">col-md-3</div>               <div class="col-md-6">col-md-6</div>               <div class="col-md-3">col-md-3</div>           </div>       </div>

各列の組み合わせの幅を定義します

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {    float: left; }

列オフセット

場合によっては、2 つの隣接する列を近づけたくないが、マージンやその他の技術的手段を使用したくない場合があります。これは、列オフセット (オフセット) を使用して実現できます。列オフセットを使用するには、次のように、列要素にクラス名 .col-md-offset-* (アスタリスクはオフセットされる列の組み合わせの数を表します) を追加するだけです。このクラス名の列がオフセットされます。列要素 .col-md-offset-4 を先頭に追加します。これは、列が 4 列の幅だけ右にオフセットされていることを示します

.col-md-12 {    width: 100%;  }  .col-md-11 {    width: 91.66666667%;  }  .col-md-10 {    width: 83.33333333%;  }  .col-md-9 {    width: 75%;  }  .col-md-8 {    width: 66.66666667%;  }  .col-md-7 {    width: 58.33333333%;  }  .col-md-6 {    width: 50%;  }  .col-md-5 {    width: 41.66666667%;  }  .col-md-4 {    width: 33.33333333%;  }  .col-md-3 {    width: 25%;  }  .col-md-2 {    width: 16.66666667%;  }  .col-md-1 {    width: 8.33333333%;  }

効果は次のとおりです:

実装原理:

margin-left と同じ数のオフセットの 12 分の 1 を使用します

<div class="container">           <div class="row">               <div class="col-md-4">1111</div>               <div class="col-md-4 col-md-offset-2">111</div>               <div class="col-md-2">333</div>           </div>           <div class="row">               <div class="col-md-4 col-md-offset-4">列偏移</div>               <div class="col-md-2">col-md-2</div>               <div class="col-md-2">col-md-2</div>           </div>       </div>

col-md-offset-* を使用して列を右オフセットする場合、合計は列数とオフセット列を確保する必要があります 12 以下です。そうでない場合、列は壊れた行で表示されます

列の並べ替え

列の並べ替えは、列の方向を変更し、浮動距離を設定することです。ブートストラップ グリッド システムでは、クラス名を追加することでこれが行われます。 Col-md-push-* およびcol-md-pull-*

.col-md-offset-12 {   margin-left: 100%;}  .col-md-offset-11 {    margin-left: 91.66666667%;  }  .col-md-offset-10 {    margin-left: 83.33333333%;  }  .col-md-offset-9 {    margin-left: 75%;  }  .col-md-offset-8 {    margin-left: 66.66666667%;  }  .col-md-offset-7 {    margin-left: 58.33333333%;  }  .col-md-offset-6 {    margin-left: 50%;  }  .col-md-offset-5 {    margin-left: 41.66666667%;  }  .col-md-offset-4 {    margin-left: 33.33333333%;  }  .col-md-offset-3 {    margin-left: 25%;  }  .col-md-offset-2 {    margin-left: 16.66666667%;  }  .col-md-offset-1 {    margin-left: 8.33333333%;  }  .col-md-offset-0 {    margin-left: 0;  }

効果は次のとおりです:

col-md-4 は左側、col-md-8 は右側です。位置を入れ替えたい場合は、col-md-4 を 8 列分右に移動する必要があります。つまり、クラス名を追加すると同時に、col-md-push-8 を移動する必要があります。 md-8 を 4 列左に追加します。つまり、クラス Name.col-md-pull-4 を追加します

bootstrap は、左右を設定することによってのみ位置決め効果を実現します。

<div class="container">       <div class="row">          <div class="col-md-4">col-md-4</div>          <div class="col-md-8">col-md-8</div>       </div>   </div>

列のネスト

列のネストでは、列を追加するか行 (行) コンテナーを作成し、この行コンテナーに列を挿入し、列コンテナーに行コンテナー (行) を挿入できます。 width は 100%、現在の外側列の幅です

.col-md-pull-12 {    right: 100%;  }  .col-md-pull-11 {    right: 91.66666667%;  }  .col-md-pull-10 {    right: 83.33333333%;  }  .col-md-pull-9 {    right: 75%;  }  .col-md-pull-8 {    right: 66.66666667%;  }  .col-md-pull-7 {    right: 58.33333333%;  }  .col-md-pull-6 {    right: 50%;  }  .col-md-pull-5 {    right: 41.66666667%;  }  .col-md-pull-4 {    right: 33.33333333%;  }  .col-md-pull-3 {    right: 25%;  }  .col-md-pull-2 {    right: 16.66666667%;  }  .col-md-pull-1 {    right: 8.33333333%;  }  .col-md-pull-0 {    right: 0;  }  .col-md-push-12 {    left: 100%;  }  .col-md-push-11 {    left: 91.66666667%;  }  .col-md-push-10 {    left: 83.33333333%;  }  .col-md-push-9 {    left: 75%;  }  .col-md-push-8 {    left: 66.66666667%;  }  .col-md-push-7 {    left: 58.33333333%;  }  .col-md-push-6 {    left: 50%;  }  .col-md-push-5 {    left: 41.66666667%;  }  .col-md-push-4 {    left: 33.33333333%;  }  .col-md-push-3 {    left: 25%;  }  .col-md-push-2 {    left: 16.66666667%;  }  .col-md-push-1 {    left: 8.33333333%;  }  .col-md-push-0 {    left: 0;  }