Bootstrap のグリッド システムについて話す

この記事では、Bootstrap のグリッド システムについて説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

関連する推奨事項: 「ブートストラップ基本チュートリアル 」

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

1. データ行 (.row) は、適切な配置と適切な配置を与えることができるように、コンテナー (.container) に含まれている必要があります。パディング (padding)

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

2. 行 (.row) に列 (.column) を追加できますが、列数の合計が均等に分割された合計数を超えることはできません。列 (例: 12)

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

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

4. パディングを設定して列間にスペースを作成し、最初の列と最後のスタックに負のマージンを設定してそれをオフセットします。パディング

の影響は、4 種類のブラウザ (極小画面、小画面、中画面、大画面) が付属するブートストラップ グリッド システムに応答性の効果をもたらします。ブレークポイントは 768px、992px、1220px

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

.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) は、コンテナの行を 12 等分、つまり列に分割します。各列にはpadding-left:15pxとpadding-right:15pxがあり、これにより、最初の列のpadding-leftと最後の列のpadding-rightが中間幅の30pxを占めることになります

.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;
}

行コンテナー (.row) は、-15px の margin-left 値と margin-right 値を定義します。これは、最初の列の左パディングと最後の列の右パディングをオフセットするために使用されます。最初と最後の列の間に隙間がないようにします (.container)

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

基本的な使い方

ブートストラップのフレームワークが異なるため、画面サイズごとにグリッドスタイルが異なりますので、以下では中画面(970px)を例に説明します。

1. 列の組み合わせ

列の組み合わせは、列を結合する数を変更することです (列の合計数は 12 を超えることはできません)。これはテーブル プロパティの列スパンに似ています。列の結合方法には次の 2 つの特性のみが含まれます: 幅パーセンテージでのフローティング

<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;
 }

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

.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%;
  }

列オフセット

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

<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>

効果は次のとおりです。 :

実装原則:

マージン左の 12 分の 1 を使用すると、次のようになります。オフセットがあるため左マージンが多くなります

.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-offset-* を使用して列を右オフセットする場合は、列の合計数とオフセット列は 12 を超えてはなりません。そうでない場合、列は壊れます。表示

列の並べ替え

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

<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>

效果如下：

col-md-4居左，col-md-8居右，如果要互换位置，就需要将col-md-4向右移动8个列的距离，也就是添加类名.col-md-push-8;同时需要将col-md-8向左移动4个列的距离，也就是添加类名.col-md-pull-4

bootstrap仅通过设置left和right来实现定位效果。

.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;
  }

列嵌套

列嵌套可以在一个列中添加一个或做个行（row）容器，然后在这个行容器中插入列，在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度

<div class="container">
       <div class="row">
           <div class="col-md-8">
               我在里面嵌套了一个网格
               <div class="row">
                   <div class="col-md-6">col-md-6</div>
                   <div class="col-md-6">col-md-6</div>
               </div>
           </div>
           <div class="col-md-4">col-md-4</div>
       </div>
       <div class="row">
           <div class="col-md-4">col-md-4</div>
           <div class="col-md-8">
               我在里面嵌套了一个网格
               <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>
       </div>
   </div>

更多编程相关知识，请访问：编程视频！！

以上がBootstrap のグリッド システムについて話すの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。