布局系統(tǒng)
- Bootstrap提供了.cintainer和.container-fluid兩種容器布局
- 這兩種樣式是啟用布局柵格系統(tǒng)最基本的要素
- .cintainer是固體自適應(yīng)方式猴伶，.container-fluid是流體100%自適應(yīng)方式
- 容器布局可以嵌套课舍，但一般不推薦使用
- Bootstrap是以移動端優(yōu)先的
柵格系統(tǒng)
- Bootstrap柵格系統(tǒng)是一個以移動為優(yōu)先的網(wǎng)格系統(tǒng);
- 基于12列的布局，5種響應(yīng)尺寸(面向不同屏幕設(shè)備);
- 完全使用flexbox流式布局構(gòu)建的蜗顽，完全支持響應(yīng)式標(biāo)準(zhǔn);具體采用div容器的行布卡、列和對齊內(nèi)容來構(gòu)建響應(yīng)式布局;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--移動設(shè)備優(yōu)先-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--引入Bootstrap CSS-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title></title>
<style>
.row {
border: dashed 1px red;
margin-top: 10px;
}
.col-sm,.aa {
border: solid 1px blue;
background-color: #EFEFEF;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm">
第一列
</div>
<div class="col-sm">
第二列
</div>
<div class="col-sm">
第三列
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm">
第一列
</div>
<div class="col-sm">
第二列
</div>
<div class="col-sm">
第三列
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-2 aa">
第一列
</div>
<div class="col-sm-4 aa">
第二列
</div>
<div class="col-sm-6 aa">
第三列
</div>
</div>
</div>
<!--引入JavaScript和jQuery-->
<!--jQuery第一個，然后Bootstrap （集成了 Popper.js和Bootstrap.js）-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
- .row表示一行雇盖，.col-*表示一列忿等，實(shí)現(xiàn)了智能三列;
- sm表示屏幕類型
- 如果采用的是.container-fluid,會100%占用屏幕的寬度;
- 在.col-sm-的“”位置，還可以強(qiáng)制設(shè)定每列所占有的柵格列;所占的柵格位正好是12列崔挖，超過12列則會換行贸街，小于12例則不能100%占滿;
- 智能計算和強(qiáng)制設(shè)置柵格位都是等寬的，也可以設(shè)置不對稱狸相。
柵格等級
|
超小屏幕<576px |
小屏幕>=576px |
中等屏幕>=768px |
大屏幕>=992px |
超大屏幕>=1200px |
| 最大容器寬度 |
None(auto) |
540px |
720px |
960px |
1140px |
| 類前綴 |
.col- |
.col-sm- |
.col-md- |
.col-lg- |
.col.xl- |
| 列數(shù) |
12 |
- 如果同時使用兩個或以上的級別薛匪，并且比例相同，則遵循移動端優(yōu)先的原則;
- 柵格系統(tǒng)支持只指定其中一種或幾種脓鹃，其它隨機(jī)的方式逸尖，指定數(shù)字奇偶均可;
- 可以通過兩個或以上來實(shí)現(xiàn)不同設(shè)備不同比例的混合布局;
- 使用.w-100可以切割柵格欄位，進(jìn)行分行操作;
- 如果強(qiáng)制設(shè)置了col-3數(shù)值瘸右，那切割后娇跟，將不會自動填充;
例如：
<div class="container">
<div class="row">
<div class="aa col-4 col-sm-2 col-md-5 col-lg-6">第一列</div>
<div class="aa col-3 col-sm-3 col-md-2 col-lg-3">第二列</div>
<div class="w-100"></div>
<div class="aa col- 5 col-sm-7 col-md-5 col-lg-3">第三列</div>
</div>
</div>
隱藏和顯示方法
可實(shí)現(xiàn)在不同尺寸的屏幕上，顯示不同的效果太颤。
| 屏幕尺寸 |
類 |
| 隱藏在所有 |
.d-none |
| 僅在xs上隱藏 |
.d-none .d-sm-block |
| 僅在sm上隱藏 |
.d-none .d-md-block |
| 僅在md上隱藏 |
.d-none .d-lg-block |
| 僅在lg上隱藏 |
.d-none .d-xl-block |
| 僅在xl上隱藏 |
.d-none .d-xl-none |
| 所有人可見 |
.d-block |
| 僅在xs上可見 |
.d-block .d-sm-none |
| 僅在sm上可見 |
.d-block .d-sm-none .d-md-none |
| 僅在md上可見 |
.d-block .d-md-none .d-lg-none |
| 僅在lg上可見 |
.d-block .d-lg-none .d-xl-none |
| 僅在xl上可見 |
.d-block .d-xl-block |
對齊與排列
柵格對齊：
|
樣式（作用域行間） |
| 居頂（默認(rèn)） |
.align-items-start |
| 居中 |
.align-items-center |
| 居底 |
.align-items-end |
行對齊苞俘，用在行中（給行高看效果）
|
樣式（作用域列間） |
| 居頂（默認(rèn)） |
.align-self-start |
| 居中 |
.align-self-center |
| 居底 |
.align-self-end |
列對齊，用在列中
|
樣式（作用域行間） |
| 居左（默認(rèn)） |
.justify-content-start |
| 居中 |
.justify-content-center |
| 居右 |
.justify-content-end |
| 間隔相等（分散） |
.justify-content-around |
| 兩端對齊（分散） |
.justify-content-between |
不是100%填充龄章，實(shí)現(xiàn)水平對齊方式吃谣，用在行中
柵格排列:
- 柵格的列可以排序，使用.order-N,N最大值為12
- 使用.order-first強(qiáng)行設(shè)置列為第一列,.order-last為最后一列使用
- .offset-N或.offset-*-N設(shè)置列的偏移量做裙，N表示棚格列數(shù)
- 使用.ml-N或.mr-N微調(diào)列距離
- 使用.ml-auto和.mr-auto來左右對齊
