溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“bootstrap中有沒有柵格布局”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“bootstrap中有沒有柵格布局”吧!
bootstrap中有柵格布局；柵格布局指的是將一行分為12個柵格，將12個柵格分配給不同的div元素來進行布局，可以通過設置列所占有的柵格的個數來設置列的寬度，是通過列數來定義模塊化的頁面布局方式。
本教程操作環境：Windows10系統、bootstrap5版、DELL G3電腦
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中有沒有柵格布局”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
