一、Bootstrap簡介
Bootstrap 是目前受歡迎的前端框架之一，是基於HTML，CSS，JavaScript的，它簡潔靈活，使web開發更加快捷
中文官網：http://www.bootcss.com/
官網：http://getbootstrap.com/
推薦：https://v3.bootcss.com/
1.優點
2. 版本
二、 Bootstrap 使用
控制權在框架本身，使用者要安裝框架所規定的某種規範進行開發
Bootstrap 使用四部曲：
2.1 建立資料夾結構
2.2 建立html骨架結構
2.3 引入相關樣式檔案
2.4 書寫內容
三、Bootstrap 佈局容器
四、Bootstrap 柵格系統
4.1 柵格系統簡介
注意：
rem 是把整個螢幕劃分為若干等份
而柵格系統是把頁面內容劃分為若干等寬的列
不同螢幕下container一定會進行一個縮放的效果，這時候把container劃分為12等份，如果是在大螢幕下，每列的寬就會變寬了，那麼內容就會相對大一些，如果container變小了，每列的寬度也會跟著變小了，頁面的內容就會發生相應的縮放，就會實現縮放的效果
總結：在BootStrap中，是把整個大的容器 container劃分為12等份，container寬度不同，那麼每一列的寬度也會不同，頁面的內容也會隨著寬度的變化而發生縮放的效果
4.2 柵格選項引數
4.3 柵格系統的基本使用
基本使用（一）
栗子：
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
我們發現，這些 div 並沒有平均分成 4 等份，想要實現列的平均劃分，需要新增類字首
我們當前是在大螢幕下，所以類字首是 .col-lg
4個盒子平均佔滿12等份，每個盒子佔3份
- 如果子元素的 份數相加等於12，那麼子元素就能佔滿整個 container 的寬度
栗子：
<style>
[class^=col]{
border: 2px solid pink;
}
</style>
<div class="container">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
栗子2：
<div class="container">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
</div>
- 如果孩子的份數相加 小於12，那麼就佔不滿整個寬度
<div class="container">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-1">4</div>
</div>
3. 如果孩子的份數相加 大於12 ，多餘的那一列會另起一行來顯示
<div class="container">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-3">4</div>
</div>
基本使用（二）
栗子1： 在中等螢幕下，讓孩子各佔 4份
<div class="container">
<div class="col-lg-3 col-md-4">1</div>
<div class="col-lg-3 col-md-4">2</div>
<div class="col-lg-3 col-md-4">3</div>
<div class="col-lg-3 col-md-4">4</div>
</div>
栗子2： 在小螢幕下，讓孩子佔6份
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6">1</div>
<div class="col-lg-3 col-md-4 col-sm-6">2</div>
<div class="col-lg-3 col-md-4 col-sm-6">3</div>
<div class="col-lg-3 col-md-4 col-sm-6">4</div>
</div>
栗子3：在超小螢幕下，每個孩子佔 12 份
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>
4.4 柵格系統的列巢狀
栗子：
<style>
.container>div{
height: 50px;
background-color: pink;
}
.row>div {
height: 50px;
background-color: pink;
/* margin: 0 10px; */
}
</style>
<body>
<div class="container">
<div class="col-md-4">
<div class="row">
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</body>
4.5 柵格系統的列偏移
栗子1： 兩個盒子貼邊
<style>
.container div {
height: 50px;
background-color: pink;
}
</style>
<body>
<div class="container">
<div class="col-md-3">左側</div>
<!-- 偏移的份數 就是 12 - 兩個盒子的份數 = 6 -->
<div class="col-md-3 col-md-offset-6">右側</div>
</div>
</body>
栗子2： 盒子水平居中
<div class="container">
<!-- 如果只有一個盒子 那麼就偏移 = (12 - 6) /2 = 6 -->
<div class="col-md-6 col-md-offset-3">中間</div>
</div>
4.6 柵格系統列排序
栗子： 左側右側交換
沒有排序之前：
<div class="container">
<div class="col-md-4">左側</div>
<div class="col-md-8">右側</div>
</div>
排序之後：
<div class="container">
<div class="col-md-4 col-md-push-8">左側111</div>
<div class="col-md-8 col-md-pull-4">右側222</div>
</div>
4.7 響應式工具
栗子：隱藏
<style>
.row div {
height: 300px;
background-color: purple;
color: red;
font-size: 20px;
}
.row div:nth-child(3) {
background-color: pink;
color: red;
font-size: 20px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3 hidden-md">我可是會隱藏的哦！！！</div>
<div class="col-xs-3">4</div>
</div>
</div>
</body>
只在中等螢幕下隱藏，其他螢幕下不會隱藏
栗子：顯示
<body>
<div class="container">
<div class="row">
<div class="col-xs-3">
<span class="visible-lg">我會顯示哦</span>
</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">4</div>
</div>
</div>
</body>
span的文字只有在大屏才顯示，其他螢幕下不顯示
