ブートストラップラスター解析

Center (コンテナ)

1. Center: クラス名 .container のコンテナ。コンテナの幅は画面デバイスごとに異なります。コンテナの両側に空白があります。
   各サイズの中心の幅は次のとおりです:

   画面デバイス	中心の幅
   max-width:768px	xsは親要素の幅を継承します(つまり、width:100%)
   最小幅:768px	sm 750px
   最小幅:992px	md 970px
   最小幅:1200px	lg 1170px

りー

1. 画面の幅に関係なく、container.container にはコンテンツがブラウザの端に直接触れないように、常に左右に 15 ピクセルのパディングが含まれます。コンテナー内に別のコンテナーをネストしないでください。container-fluid のコンテナーは、768px より小さい画面のコンテナーと同じであり、その親要素の幅を継承します。

2. .container コンテナは、レスポンシブな幅に幅の制約を与えるために使用されます。サイズの変更に応じて、コンテナーは実際にはパーセンテージに基づいて変更されるため、変更を加える必要はありません。

Row (row)

Row: クラス名 .row のコンテナーで、列 (col) 用の合計スペースがあり、合計 12 列に分割されます。

1. コンテナの両側のパディング値をオフセットするために、行の両端に 2 つの負の 15px マージン値が存在します。 .row はコンテナ外で使用すると無効になります。

2. .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;
     }}
   .container-fluid {
     padding-right: 15px;
     padding-left: 15px;
     margin-right: auto;
     margin-left: auto;
   }

Column

各列の両側に 15px のパディング値があります。 .row コンテナの外では決して Col を使用しないでください。そうしないと、col が無効になります。

1. 各列のパディング値は、コンテンツがブラウザの端にくっついたり、列がくっついたりしないように、コンテンツに隙間を設けます。

2. ==列はパーセンテージに従って割り当てられます (ページの中央の幅のパーセンテージを基準とするため、ページの中央が広いほど、各列の幅も大きくなります)==。

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

   //五列的宽度
   .col-xs-5 {
     width: 41.66666667%;
   }// 四列的宽度
   .col-xs-4 {
     width: 33.33333333%;
   }// 三列的宽度
   .col-xs-3 {
     width: 25%;
   }// 占两列的宽度
   .col-xs-2 {
     width: 16.66666667%;
   }// 每列的宽度是版心宽度的8.33333333%
   .col-xs-1 {
     width: 8.33333333%;
   }...
   // 如果是中等屏幕 类名为.col-md-1
   //       小屏幕   类名为：.col-sm-1
   //       大屏幕   类名为：.col-lg-1
   @media (min-width:768px) {
       .col-sm-1 {
           width: 8.33333333%;
       }
       .col-sm-2 {
           width: 16.66666667%;
       }
       ...
   }
   @media (min-width: 992px) {
       .col-md-1 {
           width: 8.33333333%;
       }
       .col-md-2 {
           width: 16.66666667%;
       }
       ...
   }
   @media (min-width:1200px) {
       .col-lg-1 {
           width: 8.33333333%;
       }
       .col-lg-2 {
           width: 16.66666667%;
       }
       ...
   }

コンテナ/行/列を設定したら、列に新しいグリッド システムを作成し、列に直接行を追加するだけです。コンテナを設定する必要はありません。列の両側のパディング値は行の両側の負のマージン値を正確にオフセットでき、列はコンテナと同等であるためです。

オフセット

オフセットは主に列の左マージンの値によって決まります。 1 列によるオフセットはマージン左: 8.3333333% (1/12)、2 列によるオフセットはマージン左: 16.66666667% (つまり 2/12)

1. 栅格嵌套

)

実際のアプリケーションでは、位置とソートの呼び出しに重点が置かれ、HTML の上から下、左から右への p の固定レイアウトを壊すことができます。

1. プルとプッシュは、位置の右側と左側の値によって実装されます。プルは、右側の値:8.33333333% (1/12); > 左:8.33333333%(1/12);

以上がブートストラップラスター解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。