Bootstrap 前端開發框架
Bootstrap 來自TWitter（推特）， 是目前最受歡迎的前端框架。bootstrap 是基於HTML、CSS
和JavaScript的， 它簡潔靈活，使得web開發更加快捷。
中文官網： http://www.bootcss.com/
官網：http://getbootstrap.com/
推薦使用：http://bootstrap.css88.com/
框架： 顧名思義就是一套架構，它有一套比較完整的網頁功能解決方案，而且控制權本身，
由於制樣式庫、組件和插件。使用者要按照框架所規定的某種規範進行開發。
bootstrap中的按鈕引用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
<script src="https: //oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 不要忘記引入bootstrap 的樣式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>
<style>
/* 利用我們自己寫的樣式覆蓋原先的樣式 */
.login{
width: 80px;
height: 45px;
}
</style>
</head>
<body>
<button type="button" class="btn btn-success">Success</button>
<div class="btn btn-success login">登錄</div>
<div type="button" class="btn btn-danger">未成功</div>
</body>
</html>
1. Bootstrap 簡介
1. 優點：
標準化的html+css編碼規範。
提供了一套簡潔、直觀、強悍的組件。
有自己的生態圈，不斷的更新迭代。
讓開發更簡單，提高了開發的效率。
2. 版本
2.x.x：停止維，兼容性好，代碼不夠簡潔，功能不夠完善。
3.x.x：目前使用最多，穩定，但是放棄了 IE6-IE7。對 IE8 支持但是界面效果不好，
偏向用於開發響應式佈局、 移動設備優先的web項目。
4.x.x：最新版，目前還不是很流行。
2. bootstrap 使用
在現階段我們還沒有接觸JS相關課程，所以我們只考慮使用它的樣式庫。
控制權在框架本身，使用者要按照所規定的某種規範進行開發。
bootstrap 使用四步曲：1.創建文件夾結構 2. 創建html骨架結構 3. 引入相關樣式文件 4.書寫內容
書寫內容
直接拿bootstrap預先定義好哦的樣式來使用
修改bootstrap原來的樣式，注意權重問題
學好bootstrap的關鍵在於知道它定義了那些樣式，以及這些樣式能實現什麼樣的效果
創建html骨架結構
<!-- 要求當前網頁使用IE瀏覽器最高版本的內核來渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 視口的設置：視口的寬度和設備一致，默認的縮放比例和PC端一致，用戶不能自行縮放-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable="0">
<!-- [if lt IE 9]>
<!-- 解決ie9以下瀏覽器對html5新標籤的不識別，並導致CSS不起作用的問題-->
<script src="https: //oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!-- 解決ie9以下瀏覽器對css3 MediaQuery 的不識別 -->
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
3. 佈局容器
bootstrap 需要爲頁面內容和柵格系統包裹一個.container容器，bootstrap預先定義好了這個類，
叫.container它提供了兩個作此用處的類。
1. container類
響應式佈局的容器 固定寬度
大屏（>=120px） 寬度定爲1170px
中屏（>=992px） 寬度定爲970px
小屏（>=768px） 寬度定爲750px
超小屏（100%）
2. container-fluid類
流式佈局容器百分百寬度
佔據全部視口（viewport） 的容器
適合於單獨做移動端開
3. Bootstrap 刪格系統
1. 刪格系統簡介
柵格系統英文爲“grid systems”， 也有人翻譯爲“網格系統”，它是指將頁面佈局劃分爲
等寬的列，然後通過列數的定義來模塊化頁面佈局。
Bootstrap提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，
系統會自動分爲最多12列。
Bootstrap裏面container寬度是固定的，但是不同屏幕下，container的寬度不同，我們再把container劃分爲12等份。
2. 刪格選項參數
柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面佈局，你的內容就可以放入
這些創建好的佈局中。
| 超小屏幕（手機） | 小屏設備（平板） | 中等屏幕（桌面顯示器） | 寬屏設備（大桌面顯示器） | |
|---|---|---|---|---|
| < 768px | <=768px | >=992px | >=1200px | |
| .container 最大寬度 | 自動（100%） | 750px | 970px | 1170px |
| 類前綴 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列數 （column） | 12 | 12 | 12 | 12 |
行（row）必須放到container佈局容器裏面
我們實現列的平均劃分 需要給添加類前綴
xs-extra small：超小； sm-small：小；md-medium：中等；lg-large：大；
列（column） 大於12，多餘的 “列（column）”所在的元素將被作爲一個整體另起一行排列
每一行默認有左右15像素的padding
可以同時爲一列指定多個設備的類名，以便劃分不同份數 例如 class=“col-md-4 col-sm-6”
柵格系統使用命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
<script src="https: //oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 不要忘記引入bootstrap 的樣式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>
<style>
[class^="col"]{
border:1px solid #ccc;
}
.container .row:nth-child(1){
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<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">1</div>
<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">1</div>
</div>
<!-- 如果孩子的份數相加等於12 則孩子能佔滿整個 的container 的寬度 -->
<div class="row">
<div class="col-lg-3">2</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">2</div>
</div>
<!-- 如果孩子的份數相加小於 12 則佔不滿整個container 的寬度 會有空白 -->
<div class="row">
<div class="col-lg-3">3</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">3</div>
<div class="col-lg-2">3</div>
</div>
<!-- 如果孩子的份數相加 大於12則多餘的那一列會 另起一行顯示 -->
<div class="row">
<div class="col-lg-3">4</div>
<div class="col-lg-3">4</div>
<div class="col-lg-3">4</div>
<div class="col-lg-4">4</div>
</div>
<div class="row">
<div class="col-lg-6">5</div>
<div class="col-lg-2">5</div>
<div class="col-lg-2">5</div>
<div class="col-lg-2">5</div>
</div>
</body>
</html>
網頁顯示：
3. 列嵌套
柵格系統內置的柵格系統將內容再次嵌套，簡單理解就是一個列內在分成若干份小列，我們可以通過添加一個新的.row元素
和一系列.col-sm-*元素到已經存在的.col-sm-*元素內。
我們列嵌套最好加1個行row這樣可以取消父元素的padding值 而且高度自動和父級一樣高
<！--列嵌套-->
<div class="col-md-4">
<div class="row">
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
<script src="https: //oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 不要忘記引入bootstrap 的樣式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>
<style>
.row>div{
height: 50px;
background-color: blue;
/* margin: 0 10px; */
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- 我們列嵌套最好加1個行 row 這樣可以取消父元素的padding值 而且高度自動和父級一樣高 -->
<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>
</div>
</body>
</html>
網頁顯示：
4. 列偏移
使用 .col-md-offset-類可以將列向右偏移，這些類實際是通過使用選擇器爲當前元素增加了左側的邊距（margin）。
列偏移>
<div class="row">
<div class="col-md-4">左側</div>
<div class="col-md-4 col-md-offset-4">右側</div>
</div>
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
<script src="https: //oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 不要忘記引入bootstrap 的樣式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>
<style>
.row div{
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">左側</div>
<!-- 偏移的份數 就是12 - 兩個盒子的份數=6 -->
<div class="col-md-4 col-md-offset-4">右側</div>
</div>
</div>
</body>
</html>
網頁顯示：
5. 列排序
通過使用.col-md-push和 col-md-lull*>類就可以很容易的改變列（column）的順序。
<!-- 列排序 -->
<div class="row">
<div class="col-lg-4 col-lg-push-8">左側</div>
<div class="col-lg-8 col-lg-pull-4">右側</div>
</div>
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
<script src="https: //oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 不要忘記引入bootstrap 的樣式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>
<style>
.row div{
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">左側</div>
<div class="col-md-8 col-md-pull-4">右側</div>
</div>
</div>
</body>
</html>
網頁顯示：
響應式工具
爲了加快對移動設備友好的頁面開發工作，利用媒體查詢功能，並使用這些工具類可以方便的針對不同設備
展示或隱藏頁面內容。
| 類名 | 超小屏 | 小屏 | 中屏 | 大屏 |
|---|---|---|---|---|
| .hidden-xs | 隱藏 | 可見 | 可見 | 可見 |
| .hidden-sm | 可見 | 隱藏 | 可見 | 可見 |
| .hidden-md | 可見 | 可見 | 隱藏 | 可見 |
| .hidden-lg | 可見 | 可見 | 可見 | 隱藏 |
與之相反的，是visible-xs visible-md visible-lg是顯示某個頁面內容。