ブートストラップにはグリッド レイアウトがあります。グリッド レイアウトとは、行を 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 列で構成され、列が占める列の数を設定することで列の幅を設定します
2。グリッド レイアウトを実装するにはどうすればよいですか?
まず第一に、ブートストラップ、Webpack の読み込み、CND 参照の使用など、さまざまな方法があります。バージョン 3.37 を CDN からローカル コンピューターに直接ダウンロードしました。次に、リンク タグを使用してそれを参照します。これは、Jquery を参照するのと似ています。 次に、レイアウトに従ってグリッドを割り当てます。たとえば、3 列の大きな水平レイアウトを実装するとします。次に、12/3=4 個のグリッドを各 DIV に割り当てます。 3 つの列が等しくない場合は、左側に約 3 個、中央に 5 個、右側に 4 個のグリッドが存在します。 具体的な操作:栅格布局 第一列第二列第三列第一列第二列第三列第一列第二列第三列第一列第二列第三列第一列第二列第三列
3. グリッド レイアウト クラス パラメーターの意味は何ですか?
グリッドクラスには4つのcol-lg-1、col-md-1、col-sm-1、col-xs-1があり、大画面(large)、中画面(middl)、小画面(smll)、極度の画面に対応します。小さい画面（xs）。このうち、col は列を意味し、真ん中はサイズの略称、最後は div によって割り当てられたグリッド サイズ (例は 1/12 を占める) 関連する推奨事項:ブートストラップ チュートリアル#
以上がブートストラップにグリッドレイアウトはありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
