Bootstrap筆記-加強版
1、bootstrap引入：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
2、bootstrap柵格系統：
分12列 row col
閾值：1200>= 992>= 768>= 768<
容器：
流體（百分比）：container-fluid
固定（px）：container 響應式：1170 970 750 auto
由大到小：
col-lg-（1-12）:大於1200px
col-md- (1-12):992-1200px
col-sm- : 768-992px
col-xs- : 小於768
列偏移：
col-lg-offset-（1-12）：向右偏移幾個網格
col-md-offset-
col-sm-offset-
col-xs-offset-
行排序：
col-lg-push-(1-12):向右偏移幾個網格
col-lg-pull-(1-12):向左偏移幾個網格
浮動：
左浮動：pull-left
右浮動：pull-right
嵌套：出現嵌套是，子級以父級為一個整體劃分柵格
清除浮動：在要清除浮動的元素前面添加：<div class="clearfix"></div>
固定定位：affix
3、響應式工具：
針對不同設備展示或隱藏頁面內容
可見類：visible-(lg\md\sm\xs)-(block\inline\inline-block)
隱藏類：hidden-(lg\md\sm\xs)
4、Glyphicons字體圖標：
好處：減少請求、容易控制樣式
將font文件夾放在同一目錄，或者更改bootstrap.css源碼中的font-face的url
<span class="glyphicon glyphicon-search"></span>
5、預定義樣式風格：
default 默認、 primary 首選項、success 成功 、info 一般信息、warning警告、danger危險
btn-primary、text-primary、bg-primary、alert-warning、panel-warning等...
6、按鈕：
基類：btn
樣式：btn-default、btn-link(鏈接)...
大小：btn-（lg、sm、xs）
狀態：active、disabled
種類：a、input、button
塊級：btn-block
按鈕組：btn-group、btn-group-justified（根據父級自適應）、btn-group-vertical、btn-group-(lg\sm\xs)
註意：當使用btn-group-justified時，a類按鈕可以實現對應效果，button和input類要給每一個按鈕添加一個父級div設置class為btn-group
縱向按鈕btn-group-vertical，不需要再添加btn-group
按鈕小箭頭：（默認dropdown向下，向上添加dropup類）<button class="btn btn-primary"><span class="caret"></span></button>
註意：input不行
7、下拉菜單
data- ： JS交互觸發器的接口
aria- \ role=‘‘ :針對特殊人群(盲人)
基類：dropdown
下拉按鈕：class：btn btn-default dropdown-toggle 、默認關閉，展開open 、data-toggle="dropdown"
下拉列表：dropdown-menu
下拉列表分組標題：dropdown-header
下拉列表分組的分割線：divider
····看文檔
Bootstrap筆記-加強版