bootstrap中有柵格佈局嗎

bootstrap中有柵格佈局；柵格佈局指的是將一行分為12個柵格，將12個柵格分配給不同的div元素來進行佈局，可以通過設定列所佔有的柵格的個數來設定列的寬度，是通過列數來定義模組化的頁面佈局方式。

本教學操作環境：Windows10系統、bootstrap5版、DELL G3電腦

bootstrap中有柵格佈局嗎

bootstrap中有柵格佈局

1.什麼是柵格佈局？

以前的網頁製作佈局用的是tabel佈局，通過把表格將網頁分為大大小小的表格，再從表格中填充元素。後來發展為div+css佈局。通過div+css浮動。flaot:right和float:left.佈局。

現在bootstrap運用的是柵格佈局。簡單來說就是把一行分為12個柵格。將12個柵格分配給不同的DIV元素來進行佈局。

在Bootstrap中引入了柵格佈局，將頁面分成類似於表格一樣的佈局
每一行由12列組成，可以通過設定列所佔有的列的個數來設定列的寬度
支援響應式佈局，分別有5種響應尺寸，分別對應不同的裝置寬度
使用flexbox流式佈局來實現頁面佈局
使用div來實現容器、行、列的佈局

2.如何實現柵格佈局?

首先，使用bootstrap由很多方式，webpack載入或者使用CND參照等。我是直接從CDN上下載3.37版本到本地。再通過link標籤參照。這點和參照Jquery類似。

其次，根據佈局分配柵格。舉個例子，比如說要實現水平的三列等大布局。那麼就給每個DIV分配12/3=4個柵格，

如果是三列不等大的，左邊大約為3個柵格，中間為5個，右邊為4個

具體操作：

首先佈置一個容器div用來存放柵格，為div新增container類實現容器
為子元素新增row類實現行的佈局，而列的佈局使用col-*來實現
當類名為container-fluid的話，預設佔據的寬度為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.柵格佈局class引數是什麼意思?

柵格的class有四個col-lg-1，col-md-1，col-sm-1,col-xs-1,分別對應大螢幕（large)，中等螢幕（middl），小螢幕（smll），極小（xs）。其中col表示列的意思column，中間為尺寸的縮寫，最後是div分配的柵格大小（例子是佔用的是1/12）