ホームページ > 記事 > ウェブフロントエンド > ブートストラップにグリッドレイアウトはありますか?

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

WBOYオリジナル: 2022-06-16 11:10:132976ブラウズ

ブートストラップにはグリッドレイアウトがあります。グリッドレイアウトとは、行を 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 を占める)

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

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

関連記事

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