## 学习目标
1. bootstrap的介绍和下载
2. 栅格系统的原理和使用
3. bootstrap的全局样式介绍
6. 组件
## 笔记
## 01. bootstrap的介绍和下载
### 01.1 介绍
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为4.3。 注意，Bootstrap有三个大版本分别是 v2、v3和v4，我们这里学习最常用的v3。
使用Bootstrap的好处：
Bootstrap简单灵活，可用于架构流行的用户界面，具有 友好的学习曲线，卓越的兼容性，响应式设计，12列栅格系统，样式向导文档，自定义JQuery插件，完整的类库，基于Less等特性。
### 01.2 下载
bootstrap中文官网：http://www.bootcss.com/
下载地址: http://v3.bootcss.com/getting-started/#download
注意： Bootstrap提供了三种不同的方式供我们下载，我们不需要使用Bootstrap的源码 和 sass项目，只需要下载生产环境的Bootstrap即可。
下载完成以后的目录如下：
```bootstrap
bootstrap/
├── css/
│ ├── bootstrap.css # Bootstrap 核心css文件[未压缩，建议在开发阶段使用]
│ ├── bootstrap.min.css # Bootstrap 核心css文件[压缩版，建议在生产阶段使用]
│ ├── bootstrap-theme.css # Bootstrap 附带的主题样式，用不上可以删掉
│ └── bootstrap-theme.min.css # Bootstrap 附带的主题样式，用不上可以删掉
├── js/
│ ├── bootstrap.js # Bootstrap 核心js文件[未压缩，建议在开发阶段使用]
│ └── bootstrap.min.js # Bootstrap 核心js文件[压缩版，建议在生产阶段使用]
└── fonts/ # fonts目录中主要存放的是图标字体，附带主题使用的
```
### 扩展
我们也可以使用Bootstrap中文网提供的免费CDN加速服务：
```html
<!-- Bootstrap核心css文件 -->
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery。务必在引入Bootstrap之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap核心js 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
```
### 01.3 bootstrap的引入和使用
```html
<!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">
<title>Bootstrap Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，bootstrap！</h1>
</body>
</html>
```
#### 01.3.1 viewport
viewport，中文翻译可以叫做"视口"或"视区"，大家都知道移动设备的屏幕一般都比PC小很多，webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上，默认的虚拟窗口为980像素宽（目前大部分网站的标准宽度），然后按一定的比例（3：1或2：1）进行缩放。也就是说当我们加载一个普通网页的时候，webkit会先以980像素的浏览器标准加载网页，然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小，也就是页面上的所有元素都会缩小。他有以下几个属性
```
width 控制 viewport 的大小，一般为了自适应设置为device-width
height 一般为了自适应设置为device-height
target-densitydpi 设备的默认缩放比例。可以设置如下：
low-dpi 使用ldpi作为目标 dpi。中等像素密度和高像素密度设备相应放大
medium-dpi 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
device-dpi 使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
high-dpi 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小
initial-scale 初始缩放，如果设置初始缩放为"1.0"，那么web页面在展现的时候就会以target density分辨率的1:1来展现
maximum-scale 最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。
user-scalable 是否允许调整缩放。即用户是否能对页面进行缩放。如果设置为yes则允许用户对页面进行缩放，反之为no。
```
常见viewport设置：
```html
<meta name="viewport"
content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
```
## 02. 栅格系统的原理和使用
### 02.1响应式设计
响应式设计是Ethan Marcotte在2010年5月份提出的一个概念，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动设备浏览网页而诞生的。
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
### 02.2 栅格系统[Grid System ]的介绍
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。栅格系统提供的class样式类会自动在屏幕宽度大于或等于阈值的设备上起作用，并且将针对小屏幕设备所设置的class覆盖掉。
### 02.3 栅格系统[Grid System ]的使用
```css
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，会自动占据全部视口（viewport）的容器。
```
## 03. bootstrap的全局样式
### 03.1 排版样式
##### 标题
HTML 中的所有标题标签，`<h1>` 到 `<h6>` 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含 `<small>` 标签或赋予 .small 类的元素，可以用来标记副标题。
##### 页面主体
Bootstrap 将全局 `font-size` 设置为`14px`，`line-height` 设置为 `1.428`。这些属性直接赋予 `<body>` 元素和所有段落元素。另外，`<p>`（段落）元素还被设置了等于 `1/2` 行高（即` 10px`）的底部外边距（`margin`）
##### 文本对齐
```html
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
```
##### 列表
```html
a. 内联列表。通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。
<ul class="list-inline"></ul>
b. 水平排列的描述，
<dl class="dl-horizontal"></dl >
```
#### 情境背景色
```
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
```
### 03.2 表格样式
#### 03.2.1 table
普通表格
```html
<table class="table"></table>
```
条纹状表格
```html
<table class="table table-striped"></table>
```
带边框的表格
```html
<table class="table table-bordered"></table>
```
鼠标悬停
```html
<table class="table table-hover"></table>
```
响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于
768px 宽度时，水平滚动条消失
```html
<div class="table-responsive">
<table class="table"></table>
</div>
```
#### 03.2.2 tr
```html
<tr class="active">...</tr> #鼠标悬停在行或单元格上时所设置的颜色
<tr class="success">...</tr> #标识成功或积极的动作
<tr class="warning">...</tr> #标识警告或需要用户注意
<tr class="danger">...</tr> #标识危险或潜在的带来负面影响的动作
<tr class="info">...</tr> #标识普通的提示信息或动作
```
### 03.3 表单样式
所有设置了`.form-control` 类的` <input>`、`<textarea>` 和` <select>` 元素都将被默认设置宽度属性为
`width: 100%;`。 将 label 元素和前面提到的控件包裹在` .form-group` 中可以获得最好的排列。
```html
<input type="text" class="form-control" placeholder="Text input">
<textarea class="form-control" rows="3"></textarea>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
```
### 03.4 按钮样式
```html
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>
```
. 使用 `.btn-lg`、`.btn-sm` 或`.btn-xs` 就可以获得不同尺寸的按钮
```html
<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
```
## 04. 组件
#### 字体图标
Glyphicons 字体图标，包括250多个来自 Glyphicon Halflings 的字体图标。使用时只需要找到对应图标下的class样式即可。
```html
<span class="glyphicon glyphicon-apple" aria-hidden="true"></span>
```
#### 下拉菜单
```html
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</div>
```
#### 按钮组
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。
```html
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
```
#### 导航
Bootstrap 中的导航组件都依赖同一个 `.nav`类，状态类也是共用的。改变修饰类就可以改变样式
```html
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">QiYuan</a>
</div>
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
<li><a href="#">Abouts</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Catetorys <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Catetory 1</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Catetory 2</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
```
#### 分页
```html
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>
<li><a href="#">2 </a></li>
<li><a href="#">3 </a></li>
<li><a href="#" aria-label="Previous"><span aria-hidden="true">»</span></a></li>
</ul>
```
#### 可关闭的警告框
```html
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Warning!</strong> Better check yourself, you\'re not looking too good.
</div>
```
#### 进度条
```html
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >60%</div>
```
有动画效果的进度条
```html
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" >
45%
</div>
</div>
```
#### 模态框
```html
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" >Large modal</h4>
</div>
<div class="modal-body">
hello, welcome to QiYuan!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" >Large modal</h4>
</div>
<div class="modal-body">
hello, welcome to QiYuan!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
```
#### 选项卡
```html
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" >Home Content</div>
<div role="tabpanel" class="tab-pane" >Profile Content</div>
<div role="tabpanel" class="tab-pane" >Messages Content</div>
<div role="tabpanel" class="tab-pane" >Settings Content</div>
</div>
</div>
```
注意，给选项卡新增选项的时候，
```
要修改a标签的href属性和aria-controls属性值为内容区新增div的ID值
<a href="#my-set" aria-controls="my-set">
<div role="tabpanel" class="tab-pane" >
```
#### 提示框
```html
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on 左侧
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on 顶部
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on 底部
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on 右侧
</button>
<script type="text/javascript">
$(function () { // 提示框必须要手动初始化
$(\'[data-toggle="popover"]\').popover()
})
</script>
```
#### 警告框
```html
<div class="alert alert-warning alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Holy guacamole!</strong> Hello, Welcome QiYuan.
</div>
<div class="alert alert-danger alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4>Oh snap! You got an error!</h4>
<p class="h1">404! error!</p>
<p>
<button type="button" class="btn btn-danger">Take this action</button>
<button type="button" class="btn btn-default">Or do this</button>
</p>
</div>
```
手风琴效果
```html
<div class="panel-group" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" >
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Collapsible Group Item #1 Content
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" >
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Collapsible Group Item #2 Content
</div>
</div>
</div>
</div>
```
#### 轮播图
```html
<div class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="holder.js/1386x400" width="100%" alt="...">
<div class="carousel-caption">
Img #1 Content
</div>
</div>
<div class="item">
<img src="holder.js/1386x400" width="100%" alt="...">
<div class="carousel-caption">
Img #2 Content
</div>
</div>
<div class="item">
<img src="holder.js/1386x400" width="100%" alt="...">
<div class="carousel-caption">
Img #3 Content
</div>
</div>
</div>
</div>
```
