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）
相關推薦：bootstrap教程
以上是bootstrap中有柵格佈局嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！
