BootStrap
BootStrap的簡介
1. 什么是Bootstrap
由兩個前端設計師開發的一個前端的框架（Html，css，js）
簡化了程序員寫css的代碼
2. 為什么使用BootStrap，有什么特點
l 學習比較簡單，有了Html，css和js就能學習
l 響應式布局，可以適應多種的設備
l 移動設備優先
BootStrap的使用
環境的安裝
官網上下載包
要想使用bootStrap 必須加載jquery
bootStrap的基本模板
1. Html文檔的類型定義
BootStrap的文檔是基於HTML5的，因此，要使用HTML的文檔類型定義（DTD）
2. 字符集的設置
<meta charset="utf-8">
3. 移動設備優先
<meta name="viewport" content="width=device-width,initial-scale=1">
4. 引入css和js文件
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="bootstrap/js/jquery-1.10.2.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script>
Css全局樣式
1.布局容器樣式
l .container 固定寬度且具有響應式
l .container-fluid 自由寬度（100%）
<div class="container">
3. 樣式：<h1>到<h6>、h1~h6
H1~H6 樣式重寫的，幾乎做到了兼容性
3.文本樣式
1. <b>:加粗
2. <strong>:加粗
3. <i>:斜體
4. <em>:斜體，HTML5新標記
5. <del>:刪除線，HTML5新標記
6. <s>:刪除線
4. 文本對齊樣式
1、 .text-left 本左對齊
2、 .text-right 文本右對齊
3、 .text-center 文本居中對齊
4、 .text-justify 兩端對其
5. 列表樣式
1、 .list-unstyled 無符號
2、 .list-inline 行內樣式
6. 表格樣式
1、.table：表格全局樣式（少量的padding和水平方向的分割線）。
2、.table-striped：有條紋的背景色行（隔行變色）
3、.table-boedered：點邊框的表格
4、.table-hover：鼠標懸停效果（放上變色、離開恢復）
5、.table-condensed：緊湊的表格（單元格內不會減半）
6、行或單元格背景色：.active、.success、.info、.warning、.danger
.active 當前樣式
.success
.info
.warning
.danger
注意只能給<tr><td>添加顏色
7、響應式表格
將.table元素包裹在.table-responsive元素內，即可創建響應式表格
當屏幕寬度小於你的表格的時候，表格會出現滾動條
當屏幕寬度大於你的表格的時候，表格的滾動條自然消失
7. 表單樣式
1、.form-group 表單組樣式：將<label>和表單元素包含其中，你可以獲得更好的排列。
2、.form-control 表單元素：常用於<input>、<textarea>、<select>元素
alceholder屬性：給<input>添加提示信息
3、.form-inline 內聯表單樣式（用於form元素）：可以使元素一行排列
4、.sr-only:用於隱藏元素
5、.radio-inline 可以使一組單選框排在同一行
6、.checkbox-inline 可以使一組復選框排在同一行
7、.checkbox 復選框樣式
8、.radio 單選框樣式
9、.disable 可以禁用單選框或者復選框的樣式
10、.help-block 幫助信息（與上面間隔，字體顏色變淺）
CSS的全局樣式----柵格系統
柵格系統介紹
BootStrap提供了一套響應式、移動設備優先的流式的柵格系統
BootStrap把一個容器或整個網頁平均分成12列
BootStrap的柵格系統，由一個行(.row)和多個列組成
柵格系統通過行列的形式來創建網頁的布局，把具體的數據放入列當中
注意：柵格系統必須放在.container和.container-fluid之中
柵格系統參數
Col-xs-* 超小屏幕
Col-sm-*小屏幕
Col-md-*中等屏幕
Col-lg-*大屏幕
柵格系統的簡單應用
注意：列數超過12列會自動換行
列偏移
也就是指：一個欄向右偏移多少
.col-md-offset-*
.col-md-offset-2 //指定欄向右偏移2個列 思想就是加上了一個左外邊距
列嵌套
在某個欄中再嵌套一個完整柵格系統
8. 按鈕樣式：
1、 可作為按鈕使用的元素：<a> 、<input>、<button>
2、 .btn：按鈕的全局樣式 <input type=”button” class=”btn”>
3、 預定義樣式：.btn-default、.btn-primary、.btn-info、.btn-waring、.btn-danger、.btn-link
4、 .active 按鈕激活狀態、.disabled 按鈕禁用樣式
5、 按鈕尺寸：.btn-lg（大按鈕）、.btn-sm（小按鈕）、.btn-xs（超小按鈕）
6、 .btn-block：將按鈕拉伸到撐滿整個父元素