Bootstrap のグリッドシステムについて話す-ブートストラップのチュートリアル-php.cn

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

青灯夜游

リリース： 2021-02-01 11:31:38

転載

1575 人が閲覧しました

この記事では、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>

ログイン後にコピー

効果は次のとおりです:

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

すべての列が浮動状態のままであることを確認します

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

ログイン後にコピー

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

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

実装原則:

マージン左の 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>

ログイン後にコピー

效果如下：

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

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 のグリッドシステムについて話す