Bootstrap のグリッドシステムの詳細な分析-ブートストラップのチュートリアル-php.cn

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

Bootstrap のグリッドシステムの詳細な分析

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

1.1 12 グリッドシステム

グリッドはグリッド、英語では Grid です。ある場所がグリッドであり、ある場所がラスターである理由は、翻訳の習慣が異なるだけです。 12 グリッド方式とは、画面全体を幅に応じて 12 等分し、1 等分は画面幅の 12 分の 1 を表します。なぜ 10 等分などではなく 12 等分なのでしょうか。部品については、12 が 1、2、3、4、6 の最小公倍数であるためです。経験によれば、この分割が最も美しく実用的です。もちろん、36 グリッドや 10 グリッドシステムも見てきましたが、使用の観点からは、確かに 12 グリッドシステムほど便利ではありません。 [関連する推奨事項: "

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

12 グリッドシステムでは、画面を左側と右側に分割したい場合、左側が 3 分の 1 を占め、左側が 3 分の 1 を占め、右側は 3 分の 3 を占めます。次に、左側の幅を 4 グリッドに、右側の幅を 8 グリッドに設定できます。左右の半分が必要な場合は、それぞれを 6 グリッドに設定するだけです。画面全体に 1 ページだけを設定する必要がある場合は、それを 12 グリッドに直接設定できます。ほら、すごく便利じゃないですか？

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

ブートストラップグリッドシステム設計には、container、row、col という 3 つのタグがあります:

row は行を意味し、水平方向の行を表します
col はセルです。特定の各セルを表します。書き方は 3 つあります:col、col-grid 番号 (col-3 など) )、col-screen size-グリッド数 (col-md-3 など)。

以下は画面を等幅の3つの単位に分割するサンプルコードですが、具体的なコードの書き方については深く考える必要はなく、グリッドの構造を簡単に理解するだけで十分です。システムについては後で説明します。詳細な説明。

<div class="container">
    <div class="row">
        <div class="col">
            第一个单元
        </div>
        <div class="col">
            第二个单元
        </div>
        <div class="col">
            第三个单元
        </div>
    </div>
</div>

ログイン後にコピー

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

行を使用して、水平方向の列グループを作成します。
1 ページに複数の行が存在する場合があります。
適切な配置とパディングを実現するには、行をコンテナー内に配置する必要があります。
コンテンツは列 (col) 内に配置する必要があり、行の直接の子要素にできるのは列のみです。
行は列内でネストすることもできます。列自体がコンテナーであるため、列内の行にはコンテナーは必要ありません。
col-screen size-number of Grid などの事前定義されたグリッドクラスを直接使用して、グリッドレイアウトをすばやく作成できます。
事前定義クラスでは、画面サイズに 5 つの値があり、主にレスポンシブデザインに使用されます。3.1 を参照してください。グリッド番号は 1 ～ 12 の数字で、画面の幅を表します。

#2. ブートストラップグリッドシステムのセル幅設定

#2.1 デフォルトの等幅レイアウト

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

col、col-gridnumberを使用して幅を設定する場合、プレビュー効果のウィンドウ幅を最大に設定してください。そうしないと、効果のずれが発生する可能性があります。また、この設定は実際には推奨しません。応答性を望まない場合でも、応答性の高いグリッドレイアウトを使用してください。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
 
    <title>网格系统演示</title>
  </head>
  <body>
  
    <div>
        <div>
            <div>
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            <div>
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            <div>
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            <div>
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            
        </div>
    </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

ログイン後にコピー

このコードの効果は上の図に示されています。下のセルをさらにいくつかコピーすると、効果を確認できます。 Bootstrap のグリッドシステムの詳細な分析

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

ログイン後にコピー

Bootstrap のグリッドシステムの詳細な分析

2.2 各列の幅を設定します

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

のcol は、col-3、col-6、col-3 などの値に置き換えられます。つまり、3 つの数値の合計は 12 になります。もちろん、1 行の合計が 12 であれば、1 つまたは複数のセルを削除または追加することもできます。このような簡単な設定により、セルの幅を非常に便利に変更できます。以下の図は、col をそれぞれcol-2、col-2、col-4、col-4に設定した後の表示効果を示しています

2.3 可変幅列

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

Bootstrap のグリッドシステムの詳細な分析

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

各セルに幅の値が設定されている場合、行内にある場合、残りのスペースにセルが収まらなくなると、自動的に折り返されます。

2.1 の例では、4 つの
内の列をcol-6 に置き換えて効果を確認します。
- ## を置き換えます。 # の列を 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 つのサイズタイプに分割します。
  
  #xs ≥576pxコンテナコンテナ720px960px1140px1320px画面サイズクラスの接頭辞 #.col-sm-#.col-md-
  3.3 ブートストラップグリッドのレスポンシブレイアウトの例
  2.1 の例を取り上げ、4 つの <div class="col"> # を置き換えます。 ## を <div class="col-12col-md-6col-lg-4"><code> に置き換えて、ブラウザのウィンドウサイズを変更して効果を確認してください。このコードの意味は次のとおりです。 <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0d333468f544f4c93537e842e7d7db6~tplv-k3u1fbpfcp-watermark.awebp" alt="Bootstrap のグリッドシステムの詳細な分析" ></p>もちろん、ポイントをより詳細に変更して、<p></p> <div class="col-12col- sm-6 列-md-4 列-md-3 列-lg-2"> <code>。ここにちょっとした裏技があります。1 行に複数の列を表示したい場合は、幅を 12 で割るだけです。
  3.4 応答したくない場合は
  すべてのブラウザで同じ効果を表示したい場合は、ブラウザを 2 つの列に分割します。レスポンシブに表示するには、非常に簡単です。すべての画面の下のグリッドの数を同じ値に設定できます。
  。これにより、どの画面でも一貫性を保つことができます。
  元のアドレス: https://juejin.cn/post/6970846739293011998#Heading-9
  著者: I Lao Liu
  
  その他のプログラミング関連知識については、
  プログラミングビデオをご覧ください。！
  
  md
  ≥768px lg
  ≥992px xl
  ≥1200px xxl
  ≥1400px
  
  なし (自動) 540px
  
  .col-
  #.col-lg- .col-xl- .col-xxl-