この記事では、Bootstrapの Web ページ レイアウト グリッド システムを紹介し、Bootstrap グリッド システムの動作原理、セル幅の設定、レスポンシブ レイアウト方法を理解します。みんな。 ！

#1. Bootstrap グリッド システムの仕組み

1.1 12 グリッド システム

ブートストラップ チュートリアル"]

1.2 ブートストラップ グリッド システム タグ

Containerとはコンテナのことで、前項で詳しく紹介しました。
• row は行を意味し、水平方向の行を表します
• col はセルです。特定の各セルを表します。書き方は 3 つあります:col、col-grid 番号 (col-3 など) )、col-screen size-グリッド数 (col-md-3 など)。

 
 
 第一个单元 
 
 第二个单元 
 
 第三个单元 
 
 

1.3 ブートストラップ グリッド システム ルール

• 行を使用して、水平方向の列グループを作成します。

• 1 ページに複数の行が存在する場合があります。

• 適切な配置とパディングを実現するには、行をコンテナー内に配置する必要があります。

• コンテンツは列 (col) 内に配置する必要があり、行の直接の子要素にできるのは列のみです。

• 行は列内でネストすることもできます。列自体がコンテナーであるため、列内の行にはコンテナーは必要ありません。

• col-screen size-number of Grid などの事前定義されたグリッド クラスを直接使用して、グリッド レイアウトをすばやく作成できます。

• 事前定義クラスでは、画面サイズに 5 つの値があり、主にレスポンシブ デザインに使用されます。3.1 を参照してください。グリッド番号は 1 ～ 12 の数字で、画面の幅を表します。

各列の幅を設定しない場合、デフォルトの列数は均等に分散されますが、行に 12 列を超えると予期せぬ現象が発生します (私はいくつか実行しました)研究用のテストです。テストする必要はありません。12 個以上レイアウトしたい場合は、テーブルを使用できます)。以下にコードの一部を示しますが、このコードは多少の変更を加えて引き続き使用する予定なので、再度与えることはありません。

         
  
 
 
 
Bootstrap是什么？
 
 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零 开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解 决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简 洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发 者，也能做出很专业、美观的页面，极大地提高了工作效率。 
 
 
 
Bootstrap是什么？
 
 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零 开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解 决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简 洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发 者，也能做出很专业、美观的页面，极大地提高了工作效率。 
 
 
 
Bootstrap是什么？
 
 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零 开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解 决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简 洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发 者，也能做出很专业、美观的页面，极大地提高了工作效率。 
 
 
 
Bootstrap是什么？
 
 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零 开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解 决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简 洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发 者，也能做出很专业、美观的页面，极大地提高了工作效率。 
 
 
 
   

このコードの効果は上の図に示されています。下のセルをさらにいくつかコピーすると、効果を確認できます。

 
Bootstrap是什么？
 
 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零 开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解 决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简 洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发 者，也能做出很专业、美观的页面，极大地提高了工作效率。 
 

3 つを追加してみてください

2.3 可変幅列

セル値を設定する場合、セルが 3 つあり、1 つだけが設定されている場合、残りは以下の 2 つのセルになります。残りのスペースを均等に分割し、可変幅の列を簡単に設定できるようにします。なお、固定値を設定するセルは必ずしも前にある必要はありません。たとえば、2.1 のコードでは、2 番目のセル (col-6) を画面全体に配置し、他のセルは均等に分散。

#2.4 列を自動的に折り返す

• 2.1 の例では、4 つの
  内の列をcol-6 に置き換えて効果を確認します。

  

  2.1 の例を取り上げ、4 つの
  • ## を置き換えます。 # の列を Col-12 に変更して、効果を確認します。

    2.1 の例を取り上げ、4 つの

    ## を置き換えます。 # の列を Col-8 に変更して、効果を確認します。

    col-8 に設定するとセルごとに 1 行を含めることもできますが、テキストは 12/8 しか占めていないことがわかります。これは画面の 3 分の 2 なので、特別な要件がない場合は、各行のセル値を正確に 12 に加算してみてください。

    3. ブートストラップ グリッドのレスポンシブ レイアウト

    3.1 レスポンシブ レイアウトとは

    レスポンシブ レイアウトについて, 簡単に言うと、画面サイズが異なると表示されるページレイアウトが異なるということです。たとえば、携帯電話で表示する場合は 1 行に 1 つのセルのみ、タブレットで表示する場合は 2 つのセルが連続し、コンピュータで表示する場合は 3 つのセルがあります。 Bootstrap ではこの機能を簡単に実装できます。

    3.2 Bootstrap グリッド システムの画面サイズ分割

    下の表をご覧ください。見覚えがあるでしょうか?ブレークポイントとまったく同じです。これは単なる xs です。実際、デフォルトは xs なので、直接省略できます。ご覧のとおり、Bootstrap は 5 つのブレークポイントを通じて画面を 6 つのサイズ タイプに分割します。

    3.3 ブートストラップ グリッドのレスポンシブ レイアウトの例

    2.1 の例を取り上げ、4 つの

    # を置き換えます。 ## を

    に置き換えて、ブラウザのウィンドウサイズを変更して効果を確認してください。このコードの意味は次のとおりです。

    

    もちろん、ポイントをより詳細に変更して、

    。ここにちょっとした裏技があります。1 行に複数の列を表示したい場合は、幅を 12 で割るだけです。

    3.4 応答したくない場合は

    。これにより、どの画面でも一貫性を保つことができます。

    元のアドレス: https://juejin.cn/post/6970846739293011998#Heading-9

    著者: I Lao Liu

    その他のプログラミング関連知識については、

    プログラミング ビデオをご覧ください。 ！

    #xs ≥576px コンテナ コンテナ 720px 960px 1140px 1320px 画面サイズ クラスの接頭辞 #.col-sm- #.col-md-

    すべてのブラウザで同じ効果を表示したい場合は、ブラウザを 2 つの列に分割します。レスポンシブに表示するには、非常に簡単です。すべての画面の下のグリッドの数を同じ値に設定できます。

    md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px		なし (自動)	540px
    					.col-
    	#.col-lg-	.col-xl-	.col-xxl-