# 第一章：bootstrap介绍

## 一.Bootstrap 概述

> Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。

> 2010 年 6 月，Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后，Bootstrap 最终被确定下来，并于 2011 年 8 月发布。经过很长时间的迭代升级，由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端的开源框架。

> Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容 PC 端、PAD以及手机移动端的页面访问。

国内文档翻译官网：[http://www.bootcss.com](https://links.jianshu.com/go?to=http%3A%2F%2Fwww.bootcss.com)（更新较慢）

另一个优秀的中文Bootstrap网站：http://code.z01.com/v4/

## 二．Bootstrap 特点

Bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：
(1).跨设备、跨浏览器
可以兼容所有现代浏览器，包括比较诟病的 IE7、8。当然，我们不再考虑IE9 以下浏览器。
(2).响应式布局
不但可以支持 PC 端的各种分辨率的显示，还支持移动端 PAD、手机等屏幕的响应式切换显示。
(3).提供的全面的组件
Bootstrap 提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。
(4).内置 jQuery 插件
Bootstrap 提供了很多实用性的 jquery 插件，这些插件方便开发者实现 Web 中各种常规特效。
(5).支持 HTML5、CSS3
HTML5 语义化标签和 CSS3 属性，都得到很好的支持。
(6).支持 LESS 动态样式
LESS 使用变量、嵌套、操作混合编码，编写更快、更灵活的 CSS。它和 Bootstrap 能很好的配合开发

## 三．Bootstrap 结构

解压后，目录呈现这样的结构：

> bootstrap/
> ├── css/
> │   ├── bootstrap-grid.css
> │   ├── bootstrap-grid.css.map
> │   ├── bootstrap-grid.min.css
> │   ├── bootstrap-grid.min.css.map
> │   ├── bootstrap-reboot.css
> │   ├── bootstrap-reboot.css.map
> │   ├── bootstrap-reboot.min.css
> │   ├── bootstrap-reboot.min.css.map
> │   ├── bootstrap.css
> │   ├── bootstrap.css.map
> │   ├── bootstrap.min.css
> │   └── bootstrap.min.css.map
> └── js/
>     ├── bootstrap.bundle.js
>     ├── bootstrap.bundle.js.map
>     ├── bootstrap.bundle.min.js
>     ├── bootstrap.bundle.min.js.map
>     ├── bootstrap.js
>     ├── bootstrap.js.map
>     ├── bootstrap.min.js
>     └── bootstrap.min.js.map

> 主要分为两大大核心目录：css(样式)、js(脚本)。
> 1.css 目录中有四个 css 后缀的文件，其中包含 min 字样的，是压缩版本，一般使用
> 这个；不包含的属于没有压缩的，可以学习了解 css 代码的文件；而 map 后缀的文件则是
> css 源码映射表，在一些特定的浏览器工具中使用。
> 2.js 目录包含两个文件，是未压缩和压缩的 js 文件。
> 

## 四．创建第一个页面

> 我们创建一个 HTML5 的页面，并且将 Bootstrap 的核心文件引入，然后测试是否正常显示。

```xml
//第一个 Bootstrap
<!DOCTYPE html>
<html lang="zh-cn"><head>
    <meta charset="UTF-8">
    <title>Bootstrap 介绍</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    <button class="btn btn-info">Bootstrap</button>
    <script src="../js/jquery-3.1.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>
```

效果:

![img](https://upload-images.jianshu.io/upload_images/5706540-9e18fb7483dda23a.png?imageMogr2/auto-orient/strip|imageView2/2/w/480/format/webp)

## 五：容器（container）

Container容器
Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。

html代码：

![](https://img-blog.csdn.net/20180602171120142?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob25nbWVpMTIx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

得出以下结论：

得出以下结论：

1、.container类的div左右两边有一个15px的padding（内边距），container-fluid类没有内边距

![](https://img-blog.csdn.net/20180602171312411?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob25nbWVpMTIx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

2、.container类在屏幕宽度小于等于767px的时候，宽度=屏幕宽度的，也就是100%，container-fluid类不管屏幕宽度大小，一直是100%

屏幕宽767px：

![](https://img-blog.csdn.net/20180602171312411?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob25nbWVpMTIx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

3、屏幕宽768px：.container类的div左右出现了外边距margin=9px（左右padding依然是15px），container-fluid类宽度不管屏幕宽度大小，一直是100%。

![](https://img-blog.csdn.net/20180602171901931?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob25nbWVpMTIx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

4、屏幕宽一直拉大（<1000px）：.container类的div左右外边距margin一直增大，padding值和子div的宽度不变，屏幕拉大的部分都作用于margin上了。.container-fluid类宽度不管屏幕宽度大小，一直是100%。

![](https://img-blog.csdn.net/201806021726382?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob25nbWVpMTIx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

5、屏幕拉大到1000px的时候，.container类的div左右外边距margin=15px，左右padding=15px。.container-fluid类宽度不管屏幕宽度大小，一直是100%。

![](https://img-blog.csdn.net/20180602172938681?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob25nbWVpMTIx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

6、屏幕又继续拉大的时候，拉大的部分又全部作用于.container类的div左右外边距margin。.container-fluid类宽度不管屏幕宽度大小，一直是100%。

![](https://img-blog.csdn.net/20180602173211263?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob25nbWVpMTIx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)



总结：

（1）.container类出现内边距和外边距，.container-fluid类没有。

（2）.container类左右内边距一直是15px，屏幕小于等于767px的时候没有margin值，屏幕大于767px开始有左右margin值，屏幕宽度为768px和1000px的时候，margin值相对最小，分别是9px和15px，其他时候margin值随着屏幕的增大而增大。.container-fluid类宽度不管屏幕宽度大小，一直是100%。

![](https://images2015.cnblogs.com/blog/993442/201609/993442-20160905093614707-995645211.png)

##  六、栅格系统

### 1、背景介绍

Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

### 2、知识剖析

#### 2.1原理

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

在使用的时候大家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，当然你也可以分成更多，但不建议这样使用）。

Bootstrap栅格系统

- Bootstrap的栅格系统使用一系列的"行"和"列"来实现复杂的响应式布局
- 默认情况下栅格系统会将一行的内容等分为12份,
- 然后我们可以通过绑定类名的方式指定这一行中的每一列占用多少分

Bootstrap栅格系统格式



```xml
<容器>
    <行>
        <列>我们的内容</列>
        <列>我们的内容</列>
        ... ...
    </行>
</容器>
```

#### 2.2使用规则  

1)数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。

2）在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。

3）具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素

#### 2.3栅格选项



![img](https:////upload-images.jianshu.io/upload_images/6285484-2926875ee1cc7f28.png?imageMogr2/auto-orient/strip|imageView2/2/w/846/format/webp)



当屏宽小于768px（即小屏）时，列的划分以.col-xs-后面的数字为准。如果没定义.col-xs-，就会变成单列且宽度和row相等。

当屏宽在768px和992px之间（即平板屏）时，列的划分以.col-sm-后面的数字为准。如果没有定义col-sm-，以.col-xs-为准。

当屏宽在992px和1200px之间（即中屏）时，列的划分以.col-md-后面的数字为准。如果没有定义.col-md-，以col-sm-或col-xs-为准。

当屏宽大于1200px（即大屏）时，列的划分以.col-lg-后面的数字为准。如果没有定义.col-md-，以.col-md-或col-sm-或col-xs-为准。

**栅格系统列的尺寸设置**

- Bootstrap的固定宽度容器提供了5
- 种响应的尺寸,
   同样Bootstrap也给列提供了5种响应的尺寸
   col-*:   设置超小屏幕 col-sm-*:设置小屏幕
   col-md-*:设置中等屏幕 col-lg-*:设置大屏幕
   col-xl-*:设置超大屏幕
- 栅格系统列的尺寸特点
   1.如果只设置了小屏幕的大小, 那么大屏幕也会采用小屏幕设置的大小
   2.如果值设置了大屏幕的大小, 那么小屏幕默认100%
   3.如果大小屏幕都设置了大小, 那么在什么屏幕就显示什么尺寸

### 3、常见问题

如何使用bootstrap栅格系统？

### 4、解决方案

网格系统用来布局，其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的网格样式，在这一节中所涉及到的示例，我们都以中屏为例进行介绍，其他屏幕的使用也类似这一种。

#### 1)列组合  

列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性



![img](https:////upload-images.jianshu.io/upload_images/6285484-bc2c2ec30e4712d6.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/641/format/webp)



效果图：



![img](https:////upload-images.jianshu.io/upload_images/6285484-b28dd914ef0e0e57.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)



#### 2)列偏移

通过col-md-offset-*(其中星号代表移动的列组合数)来实现



![img](https:////upload-images.jianshu.io/upload_images/6285484-1088e586e1d60b24.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/901/format/webp)



偏移前：



![img](https:////upload-images.jianshu.io/upload_images/6285484-631e614a409be153.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)



偏移后：



![img](https:////upload-images.jianshu.io/upload_images/6285484-3b6deccf5e8cf77e.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)



#### 3)列排序  

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)实现列的向左或向右排序



![img](https:////upload-images.jianshu.io/upload_images/6285484-928a3c2477463ed3.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/774/format/webp)



排序前：



![img](https:////upload-images.jianshu.io/upload_images/6285484-d0646348210d4088.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1196/format/webp)



排序后：



![img](https:////upload-images.jianshu.io/upload_images/6285484-c0afbcdfacbe249b.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)



#### 4)列嵌套  

Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列



![img](https:////upload-images.jianshu.io/upload_images/6285484-49abcc3d3aa7a277.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/683/format/webp)



效果图：



![img](https:////upload-images.jianshu.io/upload_images/6285484-90141c5bceab3a95.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)



### 5.编码实战

详见视频

![ ](https:////upload.jianshu.io/videos/cover_imgs/5492a069-a04c-4ce0-93ea-7c49858ca0ae?imageView2/1/w/90/h/90)

如何使用bootstrap栅格系统？_腾讯视频

### 6、拓展思考

Bootstrap有哪些缺点？

个人认为，所谓优点和缺点，多数根据业务需求而定。比如bootstrap 2以后的版本不支持IE6。当你的网站需要支持ie6的时候，这时是缺点。当网站不需要支持ie6.减少了兼容代码的处理，马上又变成了优点。总体而已，Bootstrap属于前端ui库，通过现成的ui组件能够迅速搭建前端页面。同时还可以用less重新设计组件。对于前端技术一般的后台工程师，省去了很多编写前端处理时的痛苦。个人使用搭个博客什么的比较方便。相对于公司，直接使用Bootstrap感觉不多，大公司都有自己的前端开发设计人员，也会设计自己的css库。当然，Bootstrap开源，对于学习如何组织css还是很有必要

# 第二章：排版样式

## 一．页面排版

Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。

### 1.页面主体

> Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即
> 20px)；<p>段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。

```xml
//创建包含段落突出的文本
<p>Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>
```

### 2.标题

```xml
//从 h1 到 h6
<h1>Bootstrap 框架</h1> //36px
<h2>Bootstrap 框架</h2> //30px
<h3>Bootstrap 框架</h3> //24px
<h4>Bootstrap 框架</h4> //18px
<h5>Bootstrap 框架</h5> //14px
<h6>Bootstrap 框架</h6> //12px

<span class="h1">Bootstrap 框架</span>
```

在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题，

```xml
//在标题元素内插入 small 元素
<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>
<h2>Bootstrap 框架 <small>Bootstrap 小标题</small></h2>
<h3>Bootstrap 框架 <small>Bootstrap 小标题</small></h3>
<h4>Bootstrap 框架 <small>Bootstrap 小标题</small></h4>
<h5>Bootstrap 框架 <small>Bootstrap 小标题</small></h5>
<h6>Bootstrap 框架 <small>Bootstrap 小标题</small></h6>
```

> h1 ~ h3 下 small 元素的大小只占父元素的 65%，那么通过计算(查看 Firebug 计算后的样式)，h1 ~ h3 下的 small 为 23.4px、19.5px、15.6px；
> h4 ~ h6 下 small 元素的大小只占父元素的 75% ,分别为：13.5px、10.5px、9px。
> 在 h1 ~ h6 下的 small 样式也进行了改变，颜色变成淡灰色：#777，行高为 1，粗度为 400。

### 3.内联文本元素

```jsx
//添加标记，<mark>元素或.mark 类
<p>Bootstrap<mark>框架</mark></p>
//各种加线条的文本
<del>Bootstrap 框架</del> //删除的文本
<s>Bootstrap 框架</s> //无用的文本
<ins>Bootstrap 框架</ins> //插入的文本
<u>Bootstrap 框架</u> //效果同上，下划线文本
//各种强调的文本
<small>Bootstrap 框架</small> //标准字号的 85%
<strong>Bootstrap 框架</strong> //加粗 700
<em>Bootstrap 框架</em> //倾斜
```



![img](https://upload-images.jianshu.io/upload_images/5706540-c47dd133912ecbe3.png?imageMogr2/auto-orient/strip|imageView2/2/w/240/format/webp)

内联文本元素

### 4.对齐

```csharp
//设置文本对齐
<p class="text-left">Bootstrap 框架</p> //居左
<p class="text-center">Bootstrap 框架</p> //居中
<p class="text-right">Bootstrap 框架</p> //居右
<p class="text-justify">Bootstrap 框架</p> //两端对齐，支持度不佳
<p class="text-nowrap">Bootstrap 框架</p> //不换行
```

### 5.大小写

```csharp
//设置英文文本大小写
<p class="text-lowercase">Bootstrap 框架</p> //小写
<p class="text-uppercase">Bootstrap 框架</p> //大写
<p class="text-capitalize">Bootstrap 框架</p>//首字母大写
```



![img](https://upload-images.jianshu.io/upload_images/5706540-c2a69265eb6fea43.png?imageMogr2/auto-orient/strip|imageView2/2/w/263/format/webp)

大小写

### 6.缩略语

```xml
//缩略语
Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>7.地址文本
//设置地址，去掉了倾斜，设置了行高，底部 20px
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
```

### 7.引用文本

```csharp
//默认样式引用，增加了做边线，设定了字体大小和内外边距
<blockquote>
Bootstrap 框架
</blockquote>
//反向
<blockquote class="blockquote-reverse ">
Bootstrap 框架
</blockquote>
```

### 8.列表排版

```jsx
//移出默认样式
<ul class="list-unstyled">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul>
//设置成内联
<ul class="list-inline">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul>
//水平排列描述列表
<dl class="dl-horizontal">
<dt>Bootstrap</dt>
<dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd></dl>
```

### 9.代码

```xml
//内联代码
<code>&lt;section&gt;</code>
//用户输入
press <kbd>ctrl + ,</kbd>
//代码块
<pre>&lt;p&gt;Please input...&lt;/p&gt;</pre>
```

# 第三章:表格和按钮

## 一.表格

### 1.基本样式

```csharp
//实现基本的表格样式
<table class="table">
```

### 2.条纹状表格

```csharp
//让<tbody>里的行产生一行隔一行加单色背景效果
<table class="table table-striped">
```

注：表格效果需要基于基本格式.table

### 3.带边框的表格

```csharp
//给表格增加边框
<table class="table table-bordered">
```

### 4.悬停鼠标

```csharp
//让<tbody>下的表格悬停鼠标实现背景效果
<table class="table table-hover">
```

### 5.状态类

```csharp
//可以单独设置每一行的背景样式
<tr class="success">
```

注：一共五种不同的样式可供选择。

| 样式    | 说明                                                         |
| ------- | ------------------------------------------------------------ |
| active  | 鼠标悬停在行或单元格上                                       |
| success | 标识成功或积极的动作                                         |
| info    | 标识普通的提示信息或动作                                     |
| warning | 标识警告或需要用户注意danger 表示危险或潜在的带来负面影响的动作 |



![img](https://upload-images.jianshu.io/upload_images/5706540-a32163af21e725b1.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

从上到下效果图

### 6.隐藏某一行

```csharp
//隐藏行
<tr class="sr-only">
```

### 7.响应式表格

```csharp
//表格父元素设置响应式，小于 768px 出现边框
<body class="table-responsive">
```

## 二.按钮

### 1.可作为按钮使用的标签或元素

```csharp
//转化成普通按钮
<a href="###" class="btn btn-default">Link</a>
<button class="btn btn-default">Button</button>
<input type="button" class="btn btn-default" value="input">
```



![img](https://upload-images.jianshu.io/upload_images/5706540-dde0a69507c2edb6.png?imageMogr2/auto-orient/strip|imageView2/2/w/351/format/webp)

效果图

注意事项有三点：

(1).针对组件的注意事项
虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持<button> 元素。

(2).链接被作为按钮使用时的注意事项
如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其role="button" 属性。

(3).跨浏览器展现
我们总结的最佳实践是：强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。另外，我们还发现了 Firefox <30 版本的浏览器上出现的一个 bug，其表现是：阻止我们为基于 <input> 元素所创建的按钮设置 line-height 属性，这就导致在Firefox 浏览器上不能完全和其他按钮保持一致的高度。

### 2.预定义样式

```csharp
//一般信息
<button class="btn btn-info">Button</button>
```

| 样式        | 说明                           |
| ----------- | ------------------------------ |
| btn-default | 默认样式                       |
| btn-success | 成功样式                       |
| btn-info    | 一般信息样式                   |
| btn-warning | 警告样式                       |
| btn-danger  | 危险样式btn-primary 首选项样式 |
| btn-link    | 链接样式                       |



![img](https://upload-images.jianshu.io/upload_images/5706540-19ca27c4337a1854.png?imageMogr2/auto-orient/strip|imageView2/2/w/676/format/webp)

从上到下效果图

### 3.尺寸大小

```csharp
//从大到小的尺寸
<button class="btn btn-lg">Button</button>
<button class="btn">Button</button>
<button class="btn btn-sm">Button</button>
<button class="btn btn-xs">Button</button>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-49543c949cb43804.png?imageMogr2/auto-orient/strip|imageView2/2/w/489/format/webp)

从上到下效果图

### 4.块级按钮

```csharp
//块级换行,就是占一整行
<button class="btn btn-block">Button</button>
<button class="btn btn-block">Button</button>
```

### 5.激活状态

```csharp
//激活按钮
<button class="btn active">Button</button>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-73466e0b77eb8a98.png?imageMogr2/auto-orient/strip|imageView2/2/w/174/format/webp)

激活状态

### 6.禁用状态

```csharp
//禁用按钮
<button class="btn active disabled">Button</button>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-163b4e95297cda6f.png?imageMogr2/auto-orient/strip|imageView2/2/w/203/format/webp)

# 第四章 表单和图片

## 一.表单

### 1.基本格式

```jsx
//实现基本的表单样式
<form>
<div class="form-group">
<label>电子邮件</label>
<input type="email" class="form-control" placeholder="请输入您的电子邮件">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control" placeholder="请输入您的密码">
</div>
</form>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-dc325dff8947f677.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

效果图

注：只有正确设置了输入框的 type 类型，才能被赋予正确的样式。支持的输入框控件包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

### 2.内联表单

```csharp
//让表单左对齐浮动，并表现为 inline-block 内联块结构
<form class="form-inline">
```



![img](https://upload-images.jianshu.io/upload_images/5706540-8fc6f2f3075d86e4.png?imageMogr2/auto-orient/strip|imageView2/2/w/949/format/webp)

内联表单

注：当小于 768px，会恢复独占样式

### 3.表单合组

```csharp
//前后增加片段
<div class="input-group">
  <div class="input-group-addon">￥</div>
  <input type="text" class="form-control">
  <div class="input-group-addon">.00</div>
</div>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-1ca20157e9ee5d26.png?imageMogr2/auto-orient/strip|imageView2/2/w/500/format/webp)

表单合组

### 4.水平排列

```csharp
//让表单内的元素保持水平排列
<form class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">电子邮件</label>
      <div class="col-sm-10">
      <input type="email" class="form-control" placeholder="请输入您的电子邮件">
    </div>
  </div>
</form>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-81b7edd27acc312d.png?imageMogr2/auto-orient/strip|imageView2/2/w/1176/format/webp)

水平排列

注：这里用到了 col-sm 栅格系统，后面章节会重点讲解，而 control-label 表示和父元素样式同步。

### 5.复选框和单选框

```xml
//设置复选框，在一行
<div class="checkbox">
<label>
<input type="checkbox">体育
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">音乐
</label>
</div>
//设置禁用的复选框
<div class="checkbox disabled">
<label>
<input type="checkbox" disabled>音乐
</label>
</div>
//设置内联一行显示的复选框
<label class="checkbox-inline">
<input type="checkbox">体育
</label>
<label class="checkbox-inline disabled">
<input type="checkbox" disabled>音乐
</label>//设置单选框
<div class="radio disabled">
<label>
<input type="radio" name="sex" disabled>男
</label>
</div>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-5990f6bccce16993.png?imageMogr2/auto-orient/strip|imageView2/2/w/378/format/webp)

复选框和单选框

### 6.下拉列表

```jsx
//设置下拉列表
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-2c3a0e6899eea963.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

下拉列表

### 7.校验状态

```csharp
//设置为错误状态
<div class="form-group has-error">
```

注：还有其他状态如下:

| 样式        | 说明     |
| ----------- | -------- |
| has-error   | 错误状态 |
| has-success | 成功状态 |
| has-warning | 警告状态 |

```csharp
//label 标签同步相应状态
<label class="control-label">Input with success</label>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-9e9fc409dd4ec60d.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

校验状态

### 8.添加额外的图标

```jsx
//文本框右侧内置文本图标
<div class="form-group has-feedback">
<label>电子邮件</label>
<input type="email" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
```

注：除了 glyphicon-ok 外，还有几个如下表：

| 样式                   | 说明     |
| ---------------------- | -------- |
| glyphicon-ok           | 成功状态 |
| glyphicon-warning-sign | 警告状态 |
| glyphicon-remove       | 错误状态 |



![img](https://upload-images.jianshu.io/upload_images/5706540-675761c6f9addfa6.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

额外的图标

### 9.控制尺寸

```csharp
//从大到小
<input type="password" class="form-control input-lg">
<input type="password" class="form-control">
<input type="password" class="form-control input-sm">
```

注：也可以设置父元素 form-group-lg、form-group-sm，来调整。



![img](https://upload-images.jianshu.io/upload_images/5706540-e811e3cc820fbcdb.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

控制尺寸

## 二．图片

Bootstrap 提供了一些丰富的图片样式供开发者使用。

### 1.图片形状

```csharp
//三种形状
<img src="img/pic.png" alt="图片" class="img-rounded">
<img src="img/pic.png" alt="图片" class="img-circle">
<img src="img/pic.png" alt="图片" class="img-thumbnail">
//响应式图片,可以根据窗口大小变动
<img src="img/pic.png" alt="图片" class="img-responsive">
```



![img](https://upload-images.jianshu.io/upload_images/5706540-35d85821c4133d75.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

# 第五章:栅格系统

## 一．移动设备优先

在 HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的 meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。

```cpp
//分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
```

## 二．布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等
属性的原因，这两种容器类不能相互嵌套。

```csharp
//固定宽度
<div class="container">
...
</div>
//100%宽度
<div class="container-fluid">
...
</div>
```

栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多12列。通过一系列的行(row)与列(column)的组合来创建页面布局。工作原理如下：
1.“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100%
宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
2.通过“行（row）”在水平方向创建一组“列（column）”。
3.你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
4.类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
5.通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了 padding。
6.负值的 margin 就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
7.栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
8.如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
9.栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-*不存在， 也影响大屏幕设备。

```csharp
//创建一个响应式行
<div class="container">
    <div class="row">
        ...
    </div>
</div>
//创建最多 12 列的响应式行
<div class="container">
    <div class="row">
        <div class="col-md-1 a">1</div>
        <div class="col-md-1 a">2</div>
        <div class="col-md-1 a">3</div>
        <div class="col-md-1 a">4</div>
        <div class="col-md-1 a">5</div>
        <div class="col-md-1 a">6</div>
        <div class="col-md-1 a">7</div>
        <div class="col-md-1 a">8</div>
        <div class="col-md-1 a">9</div>
        <div class="col-md-1 a">10</div>
        <div class="col-md-1 a">11</div>
        <div class="col-md-1 a">12</div>
    </div>
</div>
//为了显示明显的 CSS
.a {
height: 100px;
background-color: #eee;
border:1px solid #ccc;
}//总列数都是 12，每列分配多列
<div class="container">
    <div class="row">
        <div class="col-md-4 a">1-4</div>
        <div class="col-md-4 a">5-8</div>
        <div class="col-md-4 a">9-12</div>
    </div>
    <div class="row">
        <div class="col-md-8 a">1-8</div>
        <div class="col-md-4 a">9-12</div>
    </div>
</div>
```

栅格参数表:



![img](https://upload-images.jianshu.io/upload_images/5706540-2480ac9c4edaf2a9.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

栅格参数表

如上图所示，栅格系统最外层区分了四种宽度的浏览器：超小屏(<768px)、小屏(>=768px)、中屏(>=992px)和大屏(>=1200px)。而内层.container 容器的自适应宽度为：自动、750px、970px 和 1170px。自动的意思为，如果你是手机屏幕，则全面独占一行显示。

```html
<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
    </div>
</div>
//有时我们可以设置列偏移，让中间保持空隙
<div class="container">
    <div class="row">
        <div class="col-md-8 a">8</div>
        <div class="col-md-3 col-md-offset-1 a">3</div>
    </div>
</div>
//也可以嵌套，嵌满也是 12 列
<div class="container">
    <div class="row">
        <div class="col-md-9 a">
            <div class="col-md-8 a">1-8</div>
            <div class="col-md-4 a">9-12</div>
        </div>
        <div class="col-md-3 a">
            11-12
        </div>
    </div>
</div>
//可以把两个列交换位置，push 向左移动，pull 向右移动
<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3 a">9</div>
        <div class="col-md-3 col-md-pull-9 a">3</div>
    </div>
</div>
```

# 第六章:辅组类和响应式工具

## 一．辅助类

Bootstrap 在布局方面提供了一些细小的辅组样式，用于文字颜色以及背景色的设置、
显示关闭图标等等。

### 1.情景文本颜色

样式列表

| 样式名       | 描述   |
| ------------ | ------ |
| text-muted   | 柔和灰 |
| text-primary | 主要蓝 |
| text-success | 成功绿 |
| text-info    | 信息蓝 |
| text-warning | 警告黄 |
| text-danger  | 危险红 |

```csharp
//各种色调的字体
<p class="text-muted">Bootstrap 视频教程</p>
<p class="text-primary">Bootstrap 视频教程</p>
<p class="text-success">Bootstrap 视频教程</p>
<p class="text-info">Bootstrap 视频教程</p>
<p class="text-warning">Bootstrap 视频教程</p>
<p class="text-danger">Bootstrap 视频教程</p>
```

### 2.情景背景色

样式列表

| 样式名     | 描述   |
| ---------- | ------ |
| bg-primary | 主要蓝 |
| bg-success | 成功绿 |
| bg-info    | 信息蓝 |
| bg-warning | 警告黄 |
| bg-danger  | 危险红 |

```csharp
//各种色调的背景
<p class="bg-primary">Bootstrap 视频教程</p>
<p class="bg-success">Bootstrap 视频教程</p>
<p class="bg-info">Bootstrap 视频教程</p>
<p class="bg-warning">Bootstrap 视频教程</p>
<p class="bg-danger">Bootstrap 视频教程</p>
```

### 3.关闭按钮

```jsx
<button type="button" class="close">&times;</button>
```

### 4.三角符号

```jsx
<span class="caret"></span>
```

### 5.快速浮动

```csharp
<div class="pull-left">左边</div>
<div class="pull-right">右边</div>
```

注：这个浮动其实就是 float，只不过使用了!important 加强了优先级。

### 6.块级居中

```csharp
<div class="center-block">居中</div>
```

注：就是 margin:x auto；并且设置了 display:block;。

### 7.清理浮动

```jsx
<div class="clearfix"></div>
```

注：这个 div 可以放在需要清理浮动区块的前面即可。

### 8.显示和隐藏

```csharp
<div class="show">show</div>
<div class="hidden">hidden</div>
```

## 二．响应式工具

在媒体查询时，针对不同的屏幕大小，有时需要显示和隐藏部分内容。响应式工具类，就提供了这种解决方案。



![img](https://upload-images.jianshu.io/upload_images/5706540-5004627da5013c64.png?imageMogr2/auto-orient/strip|imageView2/2/w/1060/format/webp)

响应式工具类

```csharp
//超小屏幕激活显示
<div class="visible-xs-block a">Bootstrap</div>
//超小屏幕激活隐藏
<div class="hidden-xs a">Bootstrap</div>
```

注：对于显示的内容，有三种变体，分别为：block、inline-block、inline。

# 第七章:图标菜单按钮组件

## 一．小图标组件

Bootstrap 提供了免费的 263 个小图标（数了两次），具体可以参考中文官网的组件链接：[http://v3.bootcss.com/components/#glyphicons](https://links.jianshu.com/go?to=http%3A%2F%2Fv3.bootcss.com%2Fcomponents%2F%23glyphicons)。部分图标如下：



![img](https://upload-images.jianshu.io/upload_images/5706540-cd9d517eeb02ed01.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

小图标组件

可以使用<i>或<span>标签来配合使用，具体如下：



```jsx
//使用小图标
<i class="glyphicon glyphicon-star"></i>
<span class="glyphicon glyphicon-star"></span>
//也可以结合按钮
<button class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star"></span>
</button><button class="btn btn-default btn">
    <span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-star"></span>
</button>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-129d38aa6e8c4770.png?imageMogr2/auto-orient/strip|imageView2/2/w/148/format/webp)

使用小图标



![img](https://upload-images.jianshu.io/upload_images/5706540-65659f691455134b.png?imageMogr2/auto-orient/strip|imageView2/2/w/192/format/webp)

结合按钮

## 二．下拉菜单组件

下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。

```jsx
//基本格式
<div class="dropdown">
    <button class="btn btn-default" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</div>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-1efd69bce9574563.png?imageMogr2/auto-orient/strip|imageView2/2/w/340/format/webp)

下拉菜单

按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置data-toggle="dropdown"才能有效。对于菜单部分，设置 class="dropdown-menu"才能自动隐藏并添加固定样式。设置 class="caret"表示箭头，可上可下。

```csharp
//设置向上触发
<div class="dropup">
//菜单项居右对齐，默认值是 dropdown-menu-left
<ul class="dropdown-menu dropdown-menu-right">
//设置菜单的标题，不要加超链接
<li class="dropdown-header">网站导航</li>
//设置菜单的分割线
<li class="divider"></li>
//设置菜单的禁用项
<li class="disabled"><a href="#">产品</a></li>
//让菜单默认显示
<div class="dropdown open">
```

## 三．按钮组组件

按钮组就是多个按钮集成在一个容器里形成独有的效果。

```none
<div class="btn-group">
    <button type="button" class="btn btn-default">左</button>
    <button type="button" class="btn btn-default">中</button>
    <button type="button" class="btn btn-default">右</button>
</div>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-14ae90c2038943d7.png?imageMogr2/auto-orient/strip|imageView2/2/w/247/format/webp)

image.png



![img](https://upload-images.jianshu.io/upload_images/5706540-01f3e7cf8911c2c6.png?imageMogr2/auto-orient/strip|imageView2/2/w/855/format/webp)

组件2

注意：这里<div>中并没有实现 class="dropdown"，通过源码分析知道嵌套本身已经有定位就不需要再设置。而右边的圆角只要多加一个 class="dropdown-toggle"即可。

```csharp
//设置按钮组垂直排列
<div class="btn-group-vertical">
//设置两端对齐按钮组，使用<a>标签
<div class="btn-group-justified">
<a type="button" class="btn btn-default">左</a>
<a type="button" class="btn btn-default">中</a>
<a type="button" class="btn btn-default">右</a>
</div>
//如果需要使用<button>标签，则需要对每个按钮进行群组
<div class="btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">左</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">中</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">右</button>
</div>
</div>
```

## 四．按钮式下拉菜单

这个下拉菜单其实和第二个知识点一样，只不过，这个是在群组里，不需要<div>声明class="dropdown"。

```jsx
//群组按钮下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
下拉菜单
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
//分裂式按钮下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default">下拉菜单</button>
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
//向上弹出式
<div class="btn-group dropup">
```



![img](https://upload-images.jianshu.io/upload_images/5706540-67f12c669d2ccaf9.png?imageMogr2/auto-orient/strip|imageView2/2/w/305/format/webp)

# 第八章:输入框和导航组件

## 一．输入框组件

文本输入框就是可以在<input>元素前后加上文字或按钮，可以实现对表单控件的扩展。

```csharp
//在左侧添加文字
<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control">
</div>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-fd7f9c020a9e18c6.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

在左侧添加文字

```xml
//在右侧添加文字
<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">@163.com</span>
</div>
//在两侧添加文字
<div class="input-group">
  <span class="input-group-addon">$</span>
   <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>
//设置尺寸，另外三种分别是默认、xs、sm
<div class="input-group input-group-lg">
//左侧使用复选框和单选框
    <div class="input-group">
        <span class="input-group-addon"><input type="checkbox"></span>
        <input type="text" class="form-control">
    </div><div class="input-group">
        <span class="input-group-addon"><input type="radio"></span>
        <input type="text" class="form-control">
    </div>
    //左侧使用按钮
    <div class="input-group">
        <span class="input-group-btn">
            <button type="button" class="btn btn-default">按钮</button>
        </span>
        <input type="text" class="form-control">
    </div>
//左侧使用下拉菜单或分列式
    <div class="input-group">
        <span class="input-group-btn">
            <button class="btn btn-default dropdown-toggle"
            data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li class="dropdown-header">网站导航</li>
                <li><a href="#">首页</a></li>
                <li><a href="#">资讯</a></li>
                <li class="divider"><a href="#">产品</a></li>
                <li class="disabled"><a href="#">关于</a></li>
            </ul>
        </span>
        <input type="text" class="form-control">
    </div>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-212706f22ce27fd6.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

使用下拉菜单和分列式

## 二．导航组件

Bootstrap 提供了一组导航组件，用于实现 Web 页面的栏目操作。

```xml
//基本导航标签页
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">产品</a></a></li>
        <li><a href="#">关于</a></li>
    </ul>

//胶囊式导航
<ul class="nav nav-pills">//垂直胶囊式导航
<ul class="nav nav-pills nav-stacked">
//导航两端对齐
<ul class="nav nav-tabs nav-justified">
//禁用导航中的项目
<li class="disabled"><a href="#">关于</a></li>
//带下拉菜单的导航
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
</ul>
</li>
</ul>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-19552b34ff139294.png?imageMogr2/auto-orient/strip|imageView2/2/w/920/format/webp)

基本导航标签页



![img](https://upload-images.jianshu.io/upload_images/5706540-0f0ccd6b66bb279b.png?imageMogr2/auto-orient/strip|imageView2/2/w/522/format/webp)

带下拉菜单的导航

## 三．导航条组件

导航条是网站中作为导航页头的响应式基础组件。

```none
<nav class="navbar navbar-default">
...
</nav>
//反色调导航
<nav class="navbar navbar-inverse">
...
</nav>
//基本导航条，包含标题和列表
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">标题</a>
            </div><ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">资讯</a></li>
                <li class="disabled"><a href="#">产品</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
    </nav>
//导航条中使用表单
<form action="" class="navbar-form navbar-left">
        <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-btn">
                <button type="submit" class="btn btn-default">提交</button>
            </span>
        </div>
    </form>

//导航中使用按钮
<button class="btn btn-default navbar-btn">按钮</button>
//导航中使用对齐方式，left 和 right
<button class="btn btn-default navbar-btn navbar-right">按钮</button>
//导航中使用一段文本
<p class="navbar-text">我是一段文本</p>
//非导航链接，一般需要置入文本区域内
<a href="#" class="navbar-link">非导航链接</a>
//将导航固定在顶部，下面的内容会自动上移
<nav class="navbar navbar-default navbar-fixed-top">
//将导航补丁在底部
<nav class="navbar navbar-default navbar-fixed-bottom">
//静态导航，和页面等宽的导航条，去掉了圆角
<nav class="navbar navbar-default navbar-static-top">
```



![img](https://upload-images.jianshu.io/upload_images/5706540-74e36138e838a53b.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

导航条



![img](https://upload-images.jianshu.io/upload_images/5706540-a89d8ec05951e5fc.png?imageMogr2/auto-orient/strip|imageView2/2/w/605/format/webp)

# 第九章:路径分页标签和徽章组件

## 一．路径组件

路径组件也叫做面包屑导航。

```jsx
//面包屑导航
    <ol class="breadcrumb">
        <li><a href="#">首页</a></li>
        <li><a href="#">产品列表</a></li>
        <li class="active">韩版 2015 年羊绒毛衣</li>
    </ol>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-1e0ef2b8c6902508.png?imageMogr2/auto-orient/strip|imageView2/2/w/839/format/webp)

面包屑导航

## 二．分页组件

分页组件可以提供带有展示页面的功能。

```jsx
//默认分页
    <ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>

//首选项和禁用
<li class="active"><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>
//设置尺寸，四种 lg、默认、sm 和 xs
<ul class="pagination pagination-lg">
//翻页效果
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
//对齐翻页链接
<ul class="pager">
<li class="previous"><a href="#">上一页</a></li>
<li class="next"><a href="#">下一页</a></li>
</ul>
//翻页项禁用
<li class="previous disabled"><a href="#">上一页</a></li>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-0be06b601efedae8.png?imageMogr2/auto-orient/strip|imageView2/2/w/532/format/webp)

# 第十章:下拉菜单

```jsx
//声明式用法
    <div class="dropdown">
        <button class="btn btn-primary" data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">资讯</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </div>

//如果按钮在容器外部，可以通过 data-target 进行绑定。
<button class="btn btn-primary" id="btn" data-toggle="dropdown"
data-target="#dropdown">
```



![img](https://upload-images.jianshu.io/upload_images/5706540-b99612bdaa857c66.png?imageMogr2/auto-orient/strip|imageView2/2/w/266/format/webp)

声明式用法

声明式用法的关键核心：
1.外围容器使用 class="dropdown"包裹；
2.内部点击按钮事件绑定 data-toggle="dropdown"；
3.菜单元素使用 class="dropdown-menu"。

在 JavaScript 调用中，没有属性，方法并不好用，下面介绍四个基本事件。

```jsx
//下拉菜单方法，但仍然需要 data-*
$('#btn').dropdown();
$('#btn').dropdown('toggle');
```

下拉菜单支持 4 种事件，分别对应弹出前、弹出后、关闭前和关闭后。



![img](https://upload-images.jianshu.io/upload_images/5706540-8df56c26b2dd24f3.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

四种事件

```jsx
//事件，其他雷同
$('#dropdown').on('show.bs.dropdown', function () {
alert('在调用 show 方法时立即触发！');
});
```

# 第十一章:按钮和折叠插件

## 一．按钮

可以通过按钮插件创建不同状态的按钮。

```csharp
//单个切换。
<button class="btn btn-primary" data-toggle="button" autocomplete="off">单个切换</button>
```

注：在 Firefox 多次页面加载时，按钮可能保持表单的禁用或选择状态。解决方案是：添加 autocomplete="off"。

```csharp
//单选按钮
<div class="btn-group" data-toggle="buttons">
  <label for="" class="btn btn-primary active">
    <input type="radio" name="sex" autocomplete="off" checked> 男
  </label>
  <label for="" class="btn btn-primary">
    <input type="radio" name="sex" autocomplete="off"> 女
  </label>
</div>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-8f032dfd8d008d75.png?imageMogr2/auto-orient/strip|imageView2/2/w/243/format/webp)

单选按钮

```csharp
//复选按钮
<div class="btn-group" data-toggle="buttons">
  <label for="" class="btn btn-primary active">
    <input type="checkbox" name="fa" autocomplete="off" checked>音乐
  </label>
  <label for="" class="btn btn-primary">
    <input type="checkbox" name="fa" autocomplete="off"> 体育
  </label>
  <label for="" class="btn btn-primary">
    <input type="checkbox" name="fa" autocomplete="off"> 美术
  </label>
  <label for="" class="btn btn-primary"><input type="checkbox" name="fa" autocomplete="off"> 电脑
  </label>
</div>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-4a76e629e4342988.png?imageMogr2/auto-orient/strip|imageView2/2/w/370/format/webp)

复选按钮

```csharp
//加载状态
<button id="myButton" type="button" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">加载状态
</button>

$('#myButton').on('click', function () {
    var btn = $(this).button('loading');
    setTimeout(function () {
    btn.button('reset');
  }, 1000);
});
```



![img](https://upload-images.jianshu.io/upload_images/5706540-6b8ed6e68f24cc37.png?imageMogr2/auto-orient/strip|imageView2/2/w/288/format/webp)

加载状态

Button 插件中的 button 方法中有三个参数：toggle、reset、string(比如 loading、complete)。

```jsx
//可代替 data-toggle="button"
$('button').on('click', function () {
  $(this).button('toggle');
})
```

## 二．折叠

通过点击可以折叠内容。

```csharp
//基本实例
<button class="btn btn-primary" data-toggle="collapse" data-target="#content">Bootstrap</button>
<div class="collapse" id="content">
    <div class="well">
        Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由
        Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。目
        前,Bootstrap 最新版本为 3.0 。
    </div>
</div>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-2c67480771648701.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

折叠基本实例

```jsx
//手风琴折叠
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading"><h4 class="panel-title">
                <a href="#collapseOne" data-toggle="collapse"
                data-parent="#accordion">点击我进行展示，再点击我进行折叠，第一部分</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                这里是第一部分。
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#collapseTwo" data-toggle="collapse"
                data-parent="#accordion">点击我进行展示，再点击我进行折叠，第二部分</a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                这里是第二部分。
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#collapseThree" data-toggle="collapse"
                data-parent="#accordion">点击我进行展示，再点击我进行折叠，第三部分</a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                这里是第三部分。
            </div>
        </div>
    </div>
</div>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-15b0a8240805d694.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

手风琴折叠



![img](https://upload-images.jianshu.io/upload_images/5706540-bc25f684a2c56fbf.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

属性

```php
//手风琴效果
$('#collapseOne, #collapseTwo,
#collapseThree, #collapseFour').collapse({
parent : '#accordion',
toggle : false,
});
//手动调用
$('button').on('click', function () {
$('#collapseOne').collapse({
toggle : true,
});
});
//collapse 方法还提供了三个参数：hide、show、toggle。
$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('show');
$('button').on('click', function () {
$('#collapseOne').collapse('toggle');
});
```

Collapse 插件中事件有四种。



![img](https://upload-images.jianshu.io/upload_images/5706540-e0cbb46f07757854.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

四种事件

```jsx
//事件，其他雷同
$('#collapseOne').on('show.bs.collapse', function () {
alert('当 show 方法调用时触发');
});
```

# 第十二章:轮播插件

## 一．轮播

轮播插件就是将几张同等大小的大图，按照顺序依次播放。

```xml
    //基本实例。
    <div id="myCarousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/slide1.png" alt="第一张">
            </div>
            <div class="item">
                <img src="img/slide2.png" alt="第二张">
            </div>
            <div class="item">
                <img src="img/slide3.png" alt="第三张">
            </div>
        </div>
        <a href="#myCarousel" data-slide="prev" class="carousel-control
        left">&lsaquo;</a>
        <a href="#myCarousel" data-slide="next" class="carousel-control
        right">&rsaquo;</a>
    </div>
```



![img](https://upload-images.jianshu.io/upload_images/5706540-1ebccf4a704c0bac.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

轮播图

data 属性解释：
1.data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的置；
2.data-slide-to 来向轮播底部创建一个原始滑动索引，data-slide-to="2"将把滑
动块移动到一个特定的索引，索引从 0 开始计数。
3.data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放。

轮播插件有三个自定义属性：



![img](https://upload-images.jianshu.io/upload_images/5706540-c14b8c4e1687ccef.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

自定义属性

如果在 JavaScript 调用就直接使用键值对方法，并去掉 data-；

```jsx
//设置自定义属性
$('#myCarousel').carousel({
//设置自动播放/2 秒
interval : 2000,
//设置暂停按钮的事件
pause : 'hover',
//只播一次
wrap : false,
});
```

轮播插件还提供了一些方法，如下：



![img](https://upload-images.jianshu.io/upload_images/5706540-90d5cb46b94ff514.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

轮播提供的其他方法

```jsx
//点击按钮执行
$('button').on('click', function () {
//点击后，自动播放
$('#myCarousel').carousel('cycle');
//其他雷同
}
```



![img](https://upload-images.jianshu.io/upload_images/5706540-9c467e5a7a5c6ae1.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

事件

```jsx
//事件
$('#myCarousel').on('slide.bs.carousel', function () {
alert('当调用 slide 实例方式时立即触发');
});
$('#myCarousel').on('slid.bs.carousel', function () {
alert('当轮播完成一个幻灯片触发');
});
```

