開始編寫bootstrap代碼的，準備和導入配置文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后推正！ -->
<title>bootstrap應用</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<!--[if lt IE 9]>
<script src="[https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js](https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js)"></script>
<script src="[https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js](https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js)"></script>
<![endif]-->
</head>
<body >
</body>
<script src="[https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js](https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js)"></script>
</html>
一. bootstrap-全局css樣式-柵格布局系統(tǒng)
-
所有的行必須放在容器中.container或container-fluid
container
screen>1200px(超大PC顯示器-lg) 容器寬1170px
screen>992px(普通PC顯示器-md) 容器寬970px
screen>768px(平板顯示器-sm) 容器寬750px
screen<768px(手機顯示器-xs) 容器寬autocontainer-fluid: width:auto+befor+after
分為多行枯冈，一行最多分為12列
網(wǎng)頁內容只能放在列中嘱支，不能放到行中
可以在col中再嵌套row
col分為四大類 col-xs-i col-sm-i col-md-i col-lg-i， i值可以為1-12，值為某個列的寬度
可以為一個列指定不同屏幕下的寬度
col-lg-i 大PC
col-md-i 大PC 普通PC
col-sm-i 大PC 普通PC 平板
col-xs-i 大PC 普通PC 平板 手機hidden-lg 大PC
hidden-md 普通PC
hidden-sm 平板
hidden-xs 手機-
列的偏移問題
col-xs-offset-i 大PC 普通PC 平板 手機
col-sm-offset-i 大PC 普通PC 平板
col-md-offset-i 大PC 普通PC
col-lg-offset-i 大PC
一行中放一列
一行中放多列
一個行中指定不同寬度的列
一個列中指定不同屏幕下的不同寬度
不同屏幕下列寬的有效范圍
- 使用柵格系統(tǒng)實現(xiàn)響應式布局
10.補充.
1) web開發(fā)頁面布局可以采用的方式
1) 使用table做布局
簡單不易出錯革屠，但加載效率低
2) HTML+CSS
加載速度快，靈活排宰，不易控制
3）使用bootstrap提供的柵格(grid layout)布局系統(tǒng)
加載速度快似芝，靈活，支持響應式功能板甘，容易控制(有行和列的概念)
2) css相關知識
1) 如何解決父元素的第一個子元素margin-top越界問題
給父元素加border-top
給父元素指定padding-top
給父元素指定overflow:hidden
讓該元素不是第一個子元素
為父元素添加前置內容生成-推薦使用
.parent:before {
content:" ";
display:table;
}
2) 如果解決所有子元素浮動后党瓮，父元素高度變?yōu)?，且影響后續(xù)元素
給父元素指定overflow:hidden
為父元素指定高度
為父元素添加后置內容生成-推薦使用
.parent:after {
content:"";
display:table;
clear:both;
}
3) bootstrap系統(tǒng)中容器的特點
寬度做了媒體查詢
添加了前置和后置內容生成盐类，可以防止子元素的越界,浮動影響
二. bootstrap-全局css樣式-表單-重點難點
1. bootstrap中的表單分為三種
1) 默認表單
<form>
<div class="form-group">
<label class="control-label"></label>
<input class="form-control">
<span class="help-control"></span>
</div>
//bootstrap指定：單選和雙選按鈕要放到label標簽中
<div class="checkbox">
<label>
<input type="checkbox">我接受本站的使用條款
</label>
</div>
</form>
2) 行內表單
給表單添加form-inline即可
3) 水平表單
默認的柵格系統(tǒng)：container->row->col-*
默認的柵格系統(tǒng)：form-horizontal->form-group->col-*
注意點：1.form-horizontal對應的是container
form-group->row
col-*和柵格系統(tǒng)
三. bootstrap-組件-圖標字體
1.glyphicons是一套收費的圖標字體寞奸，提供了web/移動開發(fā)中常用的小圖標
2. bootstrap中可以免費使用這套字體中的250+個，以服務器端字體形式出現(xiàn)的
3. 圖標字體的本質不是圖片在跳，而是字體
4. glyphicon 圖標字體只能用于空元素-不能包含任何內容或子元素枪萄；
5. 用法
<span class="glyphicon glyphicon-user"></span>
字體文件夾fonts必須跟html文件同級
四. bootstrap-組件-按鈕組
btn-group 水平按鈕組
btn-group-vertical 豎直按鈕組
btn-group btn-group-justified 水平且兩端對齊的按鈕組
btn-group-lg
btn-group-xm
btn-group-xs
五. bootstrap-組件-下拉菜單 重點簡單
1. 必須html結構
<div class="dropdown"> 相對定義的父元素
<a data-toggle="dropdown">觸發(fā)元素</a>
<ul/div class="dropdown-menu">隱藏元素</ul/div> 絕對定位
</div>
2.
divider 分割線
dropdown-header 分類頭
六. bootstrap-組件-導航 重點簡單
1. 標簽頁導航
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">Profile</a></li>
<li ><a href="#">Messages</a></li>
</ul>
data-toggle="tab" 用于切換
2. 膠囊式導航 用于ul
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">Profile</a></li>
<li ><a href="#">Messages</a></li>
</ul>
3. 兩端對其的導航 nav nav-tabs nav-justified
4. 豎直放置的膠囊導航 nav nav-pills nav-stacked
