一、Bootstrap
1掷倔、Bootstrap 是一個(gè)用于快速開(kāi)發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架眉孩，是一個(gè)html/css/js框架。
V2: 面向PC進(jìn)行了樣式設(shè)定勒葱，同時(shí)兼顧pad和phone
V3: 面向Phone進(jìn)行樣式設(shè)定浪汪，同時(shí)兼顧了PC
2、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個(gè)meta標(biāo)簽*必須*放在最前面凛虽，任何其他內(nèi)容都*必須*跟隨其后死遭！ -->
<title>bootstrap應(yīng)用</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-柵格布局系統(tǒng)
- 所有的行必須放在容器中.container或container-fluid
screen>1200px(超大PC顯示器-lg) 容器寬1170px
screen>992px(普通PC顯示器-md) 容器寬970px
screen>768px(平板顯示器-sm) 容器寬750px
screen<768px(手機(jī)顯示器-xs) 容器寬auto
container-fluid: width:auto+befor+after - 分為多行凯旋，一行最多分為12列
- 網(wǎng)頁(yè)內(nèi)容只能放在列中殃姓，不能放到行中
- 可以在col中再嵌套row
- col分為四大類 col-xs-i col-sm-i col-md-i col-lg-i， i值可以為1-12瓦阐，值為某個(gè)列的寬度
- 可以為一個(gè)列指定不同屏幕下的寬度
- col-lg-i 大PC
col-md-i 大PC 普通PC
col-sm-i 大PC 普通PC 平板
col-xs-i 大PC 普通PC 平板 手機(jī) - hidden-lg 大PC
hidden-md 普通PC
hidden-sm 平板
hidden-xs 手機(jī) - 列的偏移問(wèn)題
col-xs-offset-i 大PC 普通PC 平板 手機(jī)
col-sm-offset-i 大PC 普通PC 平板
col-md-offset-i 大PC 普通PC
col-lg-offset-i 大PC
三、bootstrap-全局css樣式-表單
1. bootstrap中的表單分為三種
1) 默認(rèn)表單
<form>
<div class="form-group">
<label class="control-label"></label>
<input class="form-control">
<span class="help-control"></span>
</div>
//bootstrap指定：?jiǎn)芜x和雙選按鈕要放到label標(biāo)簽中
<div class="checkbox">
<label>
<input type="checkbox">我接受本站的使用條款
</label>
</div>
</form>
2) 行內(nèi)表單
給表單添加form-inline即可
3) 水平表單
默認(rèn)的柵格系統(tǒng)：container->row->col-*
默認(rèn)的柵格系統(tǒng)：form-horizontal->form-group->col-*
四篷牌、bootstrap-組件-圖標(biāo)字體
1.glyphicons是一套收費(fèi)的圖標(biāo)字體睡蟋，提供了web/移動(dòng)開(kāi)發(fā)中常用的小圖標(biāo)
2. bootstrap中可以免費(fèi)使用這套字體中的250+個(gè)，以服務(wù)器端字體形式出現(xiàn)的
3. 圖標(biāo)字體的本質(zhì)不是圖片枷颊，而是字體
4. glyphicon 圖標(biāo)字體只能用于空元素-不能包含任何內(nèi)容或子元素戳杀；
5. 用法
<span class="glyphicon glyphicon-user"></span>
字體文件夾fonts必須跟html文件同級(jí)
五、bootstrap-組件-按鈕組
btn-group 水平按鈕組
btn-group-vertical 豎直按鈕組
btn-group btn-group-justified 水平且兩端對(duì)齊的按鈕組
btn-group-lg
btn-group-xm
btn-group-xs
六夭苗、bootstrap-組件-下拉菜單
1. 必須html結(jié)構(gòu)
<div class="dropdown"> 相對(duì)定義的父元素
<a data-toggle="dropdown">觸發(fā)元素</a>
<ul/div class="dropdown-menu">隱藏元素</ul/div> 絕對(duì)定位
</div>
divider： 分割線
dropdown-header： 分類頭
七信卡、bootstrap-組件-導(dǎo)航 重點(diǎn)簡(jiǎn)單
1. 標(biāo)簽頁(yè)導(dǎo)航
<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. 膠囊式導(dǎo)航 用于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. 兩端對(duì)其的導(dǎo)航 nav nav-tabs nav-justified
4. 豎直放置的膠囊導(dǎo)航 nav nav-pills nav-stacked