本文只涉及bootstrap基本使用，不提供代碼案例。以便於快速瞭解bootstrap是什麼。詳細使用規則還是要看官方文檔。
注意：bootstrap的核心是掌握容器和柵格系統。
1.什麼是Bootstrap?
- Bootstrap 是twitter公司推出的，專門用於開發響應式佈局、移動設備優先的 WEB 框架。
- Bootstrap當前最新的版本的Bootstrap4, 但當下企業使用最多的是Bootstrap3
2.Bootstrap3和4的區別
- 2.1、CSS預處理器不同, Bootstrap3採用Less, Bootstrap4採用SASS
- 2.2、格柵種類不同, Bootstrap3提供4種格柵, Bootstrap4提供5種格柵
- 2.3、使用單位不同, Bootstrap3使用px作爲單位, Bootstrap4使用rem作爲單位
- 2.4、內部佈局方式不同, Bootstrap3使用float佈局, Bootstrap4使用flexbox佈局
2.5 … …
3.Bootstrap兼容性
- Bootstrap 的目標是在最新的桌面和移動瀏覽器上有最佳的表現，也就是說，在較老舊的瀏覽器上可能會導致某些組件表現出的樣式有些不同，但是功能是完整的。
- IE8以上都能完美使用, IE8以下需要通過一些額外的配置來保證其完整性
4.Bootstrap3模板
使用下方模板粘貼至html文件中，需要修改引入文件路徑，即可開啓Bootstrap3的使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--可以讓部分國產瀏覽器默認採用高速模式渲染頁面：-->
<meta name="renderer" content="webkit">
<!--使用edge渲染，不使用IE渲染。-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- meta:vp爲了保證頁面在移動端也正常運行-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap3模板</title>
<!-- 導入Bootstrap CSS文件-->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- [if xxx] ![endif這個是IE中的條件註釋，只有在IE瀏覽器下才會執行] It:表示小於運算符
HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素（header、footer、nav等）和媒體查詢（media queries）功能
注意點：由於同源策略，Respond.js文件不能通過file://協議（就是直接將 html 頁面拖拽到瀏覽器中）直接打開，需要在http://（服務器協議）中打開。
-->
<!--[if It IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
5.Bootstrap4模板
使用下方模板粘貼至html文件中，需要修改引入文件路徑，即可開啓Bootstrap4的使用
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!-- meta:vp爲了保證頁面在移動端也正常運行-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 導入Bootstrap CSS文件-->
<link rel="stylesheet" href="css/bootstrap.css">
<title>03.Bootstrap4模板</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src="js/jquery-1.12.4.js"></script>
<!--在Bootstrap4中很多的提示、彈窗都是通過popper.min.js實現的，所以需要導入-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.3.1.js"></script>
</body>
</html>
注意：若使用webStrom編輯器，可設置模板快捷鍵。便於快速應用模板。詳見webStrom快捷鍵設置方法
6.Bootstrap容器
1.Bootstrap容器
- 1.1、在Bootstrap中容器是響應式佈局的基礎, Bootstrap推薦將所有內容都定義在容器之中
- 1.2、並且容器是啓用Bootstrap柵格系統必不可少的前置條件
-2. Bootstrap中提供了兩個容器: container/container-fluid
-
2.1、container容器(固定容器):
- 只要給標籤添加了container類名, 這個標籤就變成了Bootstrap的container容器
- 只要這個標籤變成了Bootstrap的container容器, 在不同視口大小下就會有不同的固定寬度
-
2.2、container-fluid(自適應寬度容器)
- 只要給標籤添加了container-fluid類名, 這個標籤就變成了Bootstrap的container-fluid容器
- 只要這個標籤變成了Bootstrap的container-fluid容器, 那麼容器的寬度永遠都是100%自適應
-
3.Bootstrap對視口劃分：Bootstrap4將視口劃分爲了5鍾
- 超小屏幕(xs): <576px
- 小屏幕(sm): >=576px
- 中等屏幕(md):>=768
- 大屏幕(lg): >=992px
- 超大屏幕(xl): >= 1200px
-
4、容器實現原理
- 想了解容器的實現原理。直接查看bootstrap的css文件中對應的container、container-fluid類名即可，其原理使用的是CSS3新增的媒體查詢。
7、Bootstrap柵格系統
-
1.Bootstrap柵格系統
Bootstrap的柵格系統使用一系列的"行"和"列"來實現複雜的響應式佈局
默認情況下柵格系統會將一行的內容等分爲12份,
然後我們可以通過綁定類名的方式指定這一行中的每一列佔用多少分 -
2.Bootstrap柵格系統格式
<容器>
<行>
<列>我們的內容</列>
<列>我們的內容</列>
... ...
</行>
</容器>
- 3.Bootstrap柵格系統特點
- 3.1默認情況下行的寬度和所在容器一樣
- 3.2默認情況下所有列的寬度是等分所在行的寬度
- 3.3可以通過col-num方式指定當前列佔用12分之幾
- 3.4如果一行中內容的寬度超過了12分, 那麼將自動換行
- 4.Bootstrap柵格系統實現原理
- bootstrap3：通過float實現
- bootstrap4：通過伸縮項flex實現
- 5.Bootstrap柵格系統尺寸設置
-
5.1.柵格系統列的尺寸設置
Bootstrap的固定寬度容器提供了5種響應的尺寸,
同樣Bootstrap也給列提供了5種響應的尺寸
col-: 設置超小屏幕
col-sm-:設置小屏幕
col-md-:設置中等屏幕
col-lg-:設置大屏幕
col-xl-*:設置超大屏幕 -
5.2.柵格系統列的尺寸特點
1.如果只設置了小屏幕的大小（col-）, 那麼大屏幕也會採用小屏幕設置的大小
2.如果值設置了大屏幕的大小（col-xl-）, 那麼小屏幕默認100%
3.如果大小屏幕都設置了大小, 那麼在什麼屏幕就顯示什麼尺寸
-
<div class="col-6">第1列</div>
<div class="col-4">第2列</div>
<div class="col-3">第3列</div>
<div class="col-xl-4">第2列</div>
<div class="col-xl-3">第3列</div>
<div class="col-xl-6 col-lg-1">第1列</div>
<div class="col-xl-4 col-lg-6">第2列</div>
<div class="col-xl-3 col-lg-1">第3列</div>
- 6.柵格系統-溝槽
BootStrap默認的柵格和列間有間隙溝槽，一般是左右-15px的margin或padding處理，您可以使用.no-gutters類來消除它，這將影響到.row行、列平行間隙及所有子列
添加.no-gutters類後，padding消失，但容器左右有間隙
給容器添加類.px-0，容器左右間隙消失
<div class="container px-0"><!--容器-->
<div class="row no-gutters">
<div class="col-4">第1列</div>
<div class="col-4">第2列</div>
<div class="col-3">第3列</div>
</div>
</div>
- 7.柵格系統列-對齊方式
Bootstrap4的格柵系統是使用伸縮佈局實現的, 所以也可以通過類名快速的設置伸縮項的在主軸和側軸對齊方式- 水平方向
默認同主軸起點對齊:justify-content-start
設置同主軸終點對齊：給row添加justify-content-end類名
設置同主軸中間對齊：justify-content-center
設置同主軸兩端對齊：justify-content-between - 垂直方向
設置同側軸頂部對齊：align-items-start
設置同側軸底部對齊：align-items-end
設置同側軸中部對齊：align-items-center
- 水平方向
- 8、柵格系統-列偏移
offset-*: 當前列偏移多少份位置
注意點: 寫在那一列就是那一列偏移 - 9、柵格系統列-列排序
order-*: 從小到大順序排序, 小的在前面, 大的在後面
注意點: 沒有排序的列(沒有添加order屬性的列)位置不會發生變化, 只有排序的列(添加order屬性的列)才參與位置變化