一、Bootstrap 介绍
Bootstrap 是一*成的 CSS 样式集合,是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、
移动设备优先的 WEB 项目。
二、Bootstrap 特点
1、简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让
web 开发更迅速、简单。
2、基于 html5、css3 的 bootstrap，具有大量的诱人特性：友好的学习曲线，
卓越的兼容性，响应式设计，12 列格网，样式向导文档。
3、自定义 JQuery 插件，完整的类库，bootstrap3 基于 Less，bootstrap4
基于 Sass 的 CSS 预处理技术
4、Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。
Bootstrap 响应式布局设计，给用户提供更好的视觉使用体验。
5、丰富的组件
三、 下载与使用
1、下载: http://v3.bootcss.com/getting-started/
2、下载完成后，
拷贝 dist/css 中的 bootstrap.min.css 到项目 css 中
拷贝 dist/js bootstrap.min.js 到项目的 js 中
3、下载 jquery.js
http://jquery.com/
说明：
（1）ViewPort 标记用于指定用户是否可以缩放 Web 页面
（2）width 和 height 指令分别指定视区的逻辑宽度和高度。他们的值
要么是以像素为单位的数字，要么是一个特殊的标记符号。
（3）width 指令使用 device-width 标记可以指示视区宽度应为设备
的屏幕宽度。
（4）height 指令使用 device-height 标记指示视区高度为设备的屏
幕高度。
（5）initial-scale 指令用于设置 Web 页面的初始缩放比例。默认的
初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在
浏览器中呈现出整个 Web 页面，设为 1.0 则将显示未经缩放的 Web 文档。
4、参考 API
http://v3.bootcss.com/css/

使用 X-UA-Compatible 来设置 IE 浏览器兼容模式 最新的渲染模式
注：如果需要使用Bootstrap的组件或插件，则需要引入Jquery和bootstrap的js文件，且jquery必须在bootstrap之前引入

四、 布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们
提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器
类不能互相嵌套。
1、.container 类用于固定宽度并支持响应式布局的容器。

2、.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容 器。

五、统 栅格网格系统(Grid System)
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
注意: 网格系统必须使用到 css
container、row 、xs (xsmall phones), sm (small tablets), md(middle desktops) lg (larger desktops) 即: 超小屏(自动)，小屏
(750px)，中屏(970px)和大屏(1170px)
数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
在行(.row)中可以添加列(.column), 只有列（column）才可以作为行容器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如 12。如果大于 12,则自动换到下一行。

1 、 列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超 12，大于12,则自动换到下一行。），有点类似于表格的 colspan 属性。
2 、 列偏移 、列排序
（1）列偏移
如果我们不希望相邻的两个列紧靠在一起，但又不想使用 margin 或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。
例如，你在列元素上添加“col-md-offset-8”，表示该列向右移动 8 个列的宽度(要保证列与偏移列的总数不超过 12，不然会致列断行|换行显示)。
（2）列排序
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在 Bootstrap 框架的网格系统中是通过添加类名”col-md-push-”和“col-md-pull-*” (其中星号代表移动的列组合数)。往前 pull，往后 push。
3 、 列 嵌套
Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或
者多个行（row）容器，然后在这个行容器中插入列.

六、 排版
1 、标题
Bootstrap 和普通的 HTML 页面一样，定义标题都是使用标签

到

,只不过 Bootstrap 覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6 六个类名。同时后面可以紧跟着一行小的副标题或使用.small

2 、段落
段落是排版中另一个重要元素之一。通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和 margin 也做相应的处理。可以使用以下标签给文本做突出样式处理：
:小号字
:加粗
:斜体

3 、引用

：标签定义摘自另一个源的块引用， 使用.blockquote-reverse，实现右对齐。

4 、强调
定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强
调，具本说明如下：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
5 、文本对齐
在 CSS 中常常使用 text-align 来实现文本的对齐风格的设置。
其中主要有四种风格：
左对齐，取值 left ;
居中对齐，取值 center;
右对齐，取值 right ;
两端对齐，取值 justify。
为了简化操作，方便使用，Bootstrap 通过定义四个类名来控制文本的对齐
风格：
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐。
6 、列表
在 HTML 文档中，列表结构主要有三种：
无序列表(

• …

)、
有序列表(

1. …

)、
定义列表(

…

…

)。
bootstrap 根据平时的使用情形提供了六种形式的列表:( 普通列表、有序
列表、去点列表、内联列表、 描述列表、水平描述列表）。在样式方面 Bootstrap
只是在原有的基础上做了一些细微的优化(margin 调整),其他差别不大，加入
了一些样式:
（1）去点列表:
class=“list-unstyled”
（2）内联列表:
class=” list-inline” 简单点说就是把垂直列表换成水平列表，而且去
掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而
生。
（3）定义列表:
在原有的基础加入了一些样式，使用样式 class=“.dl-horizontal”制作
水平定义列表 : 当标题宽度超过160px时，将会显示三个省略号 bootstrap4
貌似有问题，看样子还是不稳定，bootstrap3 中的 css 没有问题
7 、 代码
一般在个人博客上使用的较为频繁，用于显示代码的风格。在 Bootstrap
主要提供了三种代码风格：
（1）使用来显示单行内联代码
（2 ）使用

来显示多行块代码 ，样式 : pre-scrollable
(height,max-height 高度固定,为 340px,超过存在滚动条)
（3）使用来显示用户输入代码,如快捷键
不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来
替代，大于号(>)使用“>”来替代。
8 、表格
（1）样式:
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式
的表格。在使用 Bootstrap 的表格过程中，只需要添加对应的类名就可以得到
不同的表格风格：
基础样式
1）.table：基础表格
附加样式

1. .table-striped：斑马线表格
2. .table-bordered：带边框的表格
3. .table-hover：鼠标悬停高亮的表格
   4). table-condensed：紧凑型表格，单元格没内距或者内距较其他表格
   的内距更小
   （2）提供了五种不同的类名，每种类名控制了行的不同背景颜色
   

七、 表单
表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。
表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。
1 、表单控件
.form-control .input-lg（较大） .input-sm（较小）
（1）输入框
.form-control
（2）下拉选择框 select
多行选择设置：multiple=“multiple”
（3）文本域 textarea

（4）复选框 checkbox
.checkbox，水平显示：.checkbox-inline
5）单选择按钮
.radio， 水平显示：.radio-inline
（6）按钮
1）使用 button 实现
基础样式: btn
附加样式：btn-primary btn-info btn-success btn-warning
btn-danger btn-link btn-default
2）多标签支持:使用 a div 等制作按钮
3）按钮大小
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
4）按钮禁用
方法 1：在标签中添加 disabled 属性
方法 2：在元素标签中添加类名“disabled”
在 class 属性中添加 disabled 只是样式上禁用了，并不是真正的禁用
了此按钮！

2 、 表单案例
（1）水平表单:
同一行显示 form-horizontal
配合 Bootstrap 框架的网格系统
（2）内联表单：将表单的控件都在一行内显示 form-inline
注意 label 不会显示，存在的意义: 如果没有为输入控件设置 label 标签，
屏幕阅读器将无法正确识别。这也是 Bootstrap 框架另一个优点之处，为残障
人员进行了一定的考虑。

八、 下拉菜单
在使用 Bootstrap 框架的下拉菜单时，必须使用两个 js

要点:
1、 使用一个类名为 dropdown 或 btn-group 的 div 包裹整个下拉框:

2、 默认向下 dropdown，向上弹起加入 . dropup 即可

3、 使用 button 作为父菜单，使用类名: dropdown-toggle 和自定义 data-toggle 属性

4、 在 button 中 使用 font 制作下拉箭头

5、 下拉菜单项使用一个 ul 列表，并且定义一个类名为“dropdown-menu
6、 分组分割线:

添加类名“divider”来实现添加下拉分隔线的功能
7、 分组标题: li 添加类名 “dropdown-header” 来实现分组的功能
8、 对齐方式:
1)、dropdown-menu-left 左对齐 默认样式
2)、dropdown-menu-right 右对齐
8、**状态（.active）和禁用状态（.disabled）
http://v3.bootcss.com/components/
http://v3.bootcss.com/components/
十、 导航
使用下拉与按钮组合可以制作导航
要点:
1、 基本样式: .nav 与 “nav-tabs”、“nav-pills”组合制作导航
2、 分类:
1)、标签型 (nav-tabs)导航
2)、胶囊形(nav-pills)导航
3)、堆栈(nav-stacked)导航
4)、自适应(nav-justified)导航
5)、面包屑式(breadcrumb)导航 ，单独使用样式，不与 nav 一起使用,直接加入到 ol、ul 中即可，
一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）
3、状态:
1)、选中状态 active 样式
2)、禁用状态: disable
4、二级菜单

十一、 分页导航
分页随处可见，分为页码导航和翻页导航
页码导航:ul 标签上加 pagination [pagination-lg | pagination-sm]
翻页导航: ul 标签上加 pager

十二、图 缩略图: thumbnail
缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的
实现是配合网格系统一起使用。同时还可以让缩略图配合标题、描述内容，按钮
等。
十三、 面板
默认的 .panel 组件所做的只是设置基本的边框（border）和内补
（padding）来包含内容。
.panel-default：默认样式
.panel-heading：面板头
.panel-body：面板主体内容