ブートストラップにグリッドレイアウトはありますか?

WBOY
リリース: 2022-06-16 11:10:13
オリジナル
2987 人が閲覧しました

ブートストラップにはグリッド レイアウトがあります。グリッド レイアウトとは、行を 12 のグリッドに分割し、レイアウトのために 12 のグリッドを異なる div 要素に割り当てることを指します。列の占有率を設定できます。グリッドの数は、列の占有率を設定するために使用されます。列の幅と列の数は、モジュール式ページ レイアウトの定義に使用されます。

ブートストラップにグリッドレイアウトはありますか?

このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 5、DELL G3 コンピューター

ブートストラップにはグリッド レイアウトがありますか

ブートストラップにはグリッド レイアウトがあります

1. グリッド レイアウトとは何ですか?

Web ページのレイアウトを作成する場合、これまではテーブルを分割して Web ページを大小の表に分割し、その表から要素を埋め込んでいくテーブル レイアウトが使用されていました。その後、div css レイアウトに発展しました。 div CSS経由でfloatします。 float:right と float:left のレイアウト。

ブートストラップではグリッド レイアウトが使用されるようになりました。簡単に言うと、行は 12 個のグリッドに分割されます。レイアウト用に 12 個のグリッドをさまざまな DIV 要素に割り当てます。

  • Bootstrap にグリッド レイアウトを導入し、ページをテーブルのようなレイアウトに分割しました。

  • 各行は 12 列で構成され、列が占める列の数を設定することで列の幅を設定します

  • #さまざまなデバイス幅に対応する 5 つのレスポンシブ サイズを備えたレスポンシブ レイアウトをサポートします

  • フレックスボックス フロー レイアウトを使用してページ レイアウトを実現します。

  • div を使用してコンテナ、行、列のレイアウトを実現します

2。グリッド レイアウトを実装するにはどうすればよいですか?

まず第一に、ブートストラップ、Webpack の読み込み、CND 参照の使用など、さまざまな方法があります。バージョン 3.37 を CDN からローカル コンピューターに直接ダウンロードしました。次に、リンク タグを使用してそれを参照します。これは、Jquery を参照するのと似ています。

次に、レイアウトに従ってグリッドを割り当てます。たとえば、3 列の大きな水平レイアウトを実装するとします。次に、12/3=4 個のグリッドを各 DIV に割り当てます。

3 つの列が等しくない場合は、左側に約 3 個、中央に 5 個、右側に 4 個のグリッドが存在します。

具体的な操作:

  • 最初にグリッドを格納するコンテナ div を配置し、その div にコンテナ クラスを追加してコンテナを実装します。

  • is 行クラスをサブ要素に追加して行レイアウトを実装し、col-* を使用して列レイアウトを実装します。

  • クラス名がcontainer-fluidの場合、デフォルトは占有されます。 width は 100%、ページ全体を占めます

  • col- を使用する場合、サイズが設定されていない場合、デフォルトで幅はインテリジェントに均等に分割されます。が設定されている場合、ページ スペースは比例的に分割されます

  • ただし、同じ行内の * のサイズは 12 を超えることはできません。12 未満の場合もあり、空白が存在します。 12 を超えると、超過部分は次の行に配置されます

  • <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>栅格布局</title>
      <!--  移动端优先-->
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!--  引入bootstrap.css文件-->
      <link rel="stylesheet" href="css/bootstrap.css">
      <style>
        .row {
          border: 1px dashed #000;
          margin-top: 20px;
        }
        .col {
          border: 1px solid #0069d9;
          background: #f1b0b7;
        }
      </style>
    </head>
    <body>
    <!--  不设置*的大小,默认平分列的宽度-->
    <div>
      <div>
        <div class="col col-sm">第一列</div>
        <div class="col col-sm">第二列</div>
        <div class="col col-sm">第三列</div>
      </div>
    </div>
    <!--设置container-fluid默认占满宽度-->
    <div>
      <div>
        <div class="col col-sm">第一列</div>
        <div class="col col-sm">第二列</div>
        <div class="col col-sm">第三列</div>
      </div>
    </div>
    <!--当设置*的大小时,默认按照比例分割宽度-->
    <div>
      <div>
        <div class="col col-sm-5">第一列</div>
        <div class="col col-sm-2">第二列</div>
        <div class="col col-sm-5">第三列</div>
      </div>
    </div>
    <!--小于12时,会出现空白区域-->
    <div>
      <div>
        <div class="col col-sm-3">第一列</div>
        <div class="col col-sm-2">第二列</div>
        <div class="col col-sm-3">第三列</div>
      </div>
    </div>
    <!--当超出12时,会自动换行-->
    <div>
      <div>
        <div class="col col-sm-5">第一列</div>
        <div class="col col-sm-5">第二列</div>
        <div class="col col-sm-7">第三列</div>
      </div>
    </div>
    <!--首先引入jQuery文件,再引入poper文件,最后引入bootstrap文件-->
    <script src="js/jquery.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>
    </body>
    </html>
    ログイン後にコピー

3. グリッド レイアウト クラス パラメーターの意味は何ですか?

グリッドクラスには4つのcol-lg-1、col-md-1、col-sm-1、col-xs-1があり、大画面(large)、中画面(middl)、小画面(smll)、極度の画面に対応します。小さい画面(xs)。このうち、col は列を意味し、真ん中はサイズの略称、最後は div によって割り当てられたグリッド サイズ (例は 1/12 を占める)

関連する推奨事項:

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

以上がブートストラップにグリッドレイアウトはありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート