bootstrap是一个基于HTML、CSS、JavaScript的前端框架
这个框架已经预定了一套CSS样式和与样式对应的JS代码（对应的样式有对应的特效）
开发人员只需要编写HTML结构，添加bootstrap固定的class样式，就可以轻松完成指定效果的实现（使用现成的样式和特效）
作用：bootstrap使得WEB开发更加快捷，高效
bootstrap支持响应式开发，解决了移动互联网前端开发问题
问题：不同分辨率需要不同的样式（移动手机，电脑，pad等屏幕大小都不一样）
响应式布局：一个网站的展示能够兼容多个终端（手机、ipad、PC等，而不需要为每个终端单独做一个展示版本） 此概念为解决移动互联网浏览而诞生的。
响应式布局能够使得网站仅适用一套样式，就可以在不同分辨率下展示出不同的舒适效果，大大降低了网站开发维护成本，并且能够给用户更好的体验性。
*bootstrap环境搭建*
javaee关注的是dist文件。dist中有css、fonts、js需要我们复制到项目中（css中有个bootstrap.css和bootstrap.min.css，js中也有个bootstrap.js和bootstrap.min.js），jquery-1.11.3-min.js也需要复制到js文件下，这样就算环境搭建完成了。
完整版bootstrap.css，bootstrap.js：完整版用于源码学习，但因为文件大小问题，不适合网络间传递。
压缩版bootstrap.min.css，bootstrap.min.js：压缩版用于网络发布，相比于完整版就是把源码的空格和换行删除掉了，节约了大量空间，功能是完全相同的，适用于网络间的快速传递，但是不适合源码阅读。
基本模版创建：可以从帮助文档中复制一个模版过来然后新建一个html文件放到其中，里面的bootstrap.min.css，bootstrap.min.js，jquery-1.11.3-min.js这三个东西要重新设置href和src
helloworld
这几个设置，仅在移动设备上生效：
width=device-width 设置视口的宽度为设备的宽度（大多数手机浏览器视口的宽度是980）
initial-scale=1 初始化缩放设置（1~5）1代表就是100%
minimum-scale=1 移动设备上，页面可以最小缩放的级别
maximum-scale=1 移动设备上，页面可以最大缩放的级别
user-scalable=no 移动设备上，页面禁止缩放
*布局容器*
bootstrap必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制 相当于一个画板
帮助手册位置：全局CSS样式–概览–布局容器
任意元素使用了布局容器的样式都会成为一个布局容器，建议使用div作为布局容器。
.container ：类用于固定宽度并支持响应式布局的容器 特点：居中，两端留白
.container-fluid :类用于100%宽度，占据全部视口的容器 特点：占据视口100%宽度
*栅格系统*
为了方便在布局容器中进行网页的布局操作，bootstrap提供了一套专门用于响应式开发布局的栅格系统。
栅格系统将一行分为12列，通过设定元素占用的列数来布局元素在页面上的展示位置。
作用：可以让开发人员更加轻松进行网页布局，并且轻松进行响应式开发
特点：行必须包含在container或container-fluid中；
行使用的样式row，列使用样式col-*-*，元素内容应当放置于列内；
基本的书写方式必须是：容器–行–列
栅格参数：col-屏幕尺寸-占用列数 (屏幕尺寸现在都写成lg)
为了方便显示元素大小，我们为展示元素都赋予了相同样式
11111
222222222
列元素的书写顺序，决定布局顺序，先写的列元素会先被布局到行上
列元素的占用列数定义了列元素的大小。
一个row下，如果列元素总和小于等于12，都在一行上。如果大于12，那么超出的元素会另起一行排列
行和列可以无限嵌套，嵌套方式必须为列-行-列-行…（相当于是把当前的列当作行，这个行row又分为12列，可以继续设置）
一个row元素下，都会有12列。
屏幕尺寸设置：
large：lg 大屏幕，一般pc尺寸
medium：md 中等屏幕，小pc尺寸
small：sm 小屏幕，ipad尺寸
x small： xs 超小屏幕，智能手机尺寸
如果没有设置当前屏幕尺寸的样式，默认一个元素占一行。（比如你设置了lg尺寸，但是当你缩小为md尺寸的时候，就会变为一个元素占一行，因为你没有设置md的相应样式）
多个屏幕尺寸共同设置：只需要在后面加即可
如果设置了一个屏幕尺寸，比这个尺寸大的屏幕，继承了当前的设置；比这个尺寸小的屏幕，默认一个元素占一行
列偏移：将列元素向右侧进行推移
col-屏幕尺寸-offset-* 在指定屏幕尺寸下，向右偏移*个列
*响应式工具*
为针对性地在移动页面上展示和隐藏不同的内容，bootstrap提供响应式工具
可以让开发人员通过该工具决定，在何种屏幕尺寸下，隐藏或者显示某些元素
visible-屏幕尺寸 可见
hidden-屏幕尺寸 隐藏
*列表*
bootstrap提供了实用的列表样式供开发人员使用
帮助手册–全局CSS样式–排版–列表
无序列表、有序列表、无样式列表、内联列表。
内联列表：可以在标签内进行设置：class=“list-inline”就可以使列表变为在一行上。
*按钮*
任何HTML元素加上以下样式都会变成对应按钮：class属性设置为
btn btn-default 默认按钮
btn btn-primary 首选按钮
btn btn-success 成功按钮
btn btn-info 一般信息按钮
btn btn-warning 警告按钮
btn btn-danger 危险按钮
btn btn-link 链接按钮
尺寸：在按钮的属性后面添加即可
btn-lg 大按钮
btn-sm 小按钮
btn-xs 超小按钮
默认按钮不用写
块级元素：btn-block 使按钮变为块级元素
激活状态：active 直接在后面添加即可（不用写btn-）
禁用状态：让鼠标无法点击的禁用状态：disabled 用法和active一样
让鼠标指上去是个禁止的禁用状态：设置disabled=“disabled”
*导航条*
可以复制代码，然后修改我们需要的内容即可。nav标签
汉堡按钮：缩小时，会将项目合并成一个图标
sr-only 阅读器专用的样式（盲人设备，当鼠标指针放到这的时候，阅读器会读出相应设置的内容）
*轮播图*
帮助手册位置–javascript插件–Carousel
轮播图DIV的定时换图属性：data-interval=“毫秒值” 放在标签中
注意：多个轮播图，必须修改轮播图的id，使id唯一，当改了id之后，后续的代码中的相应部分也要修改
*排版方式*
class=“”
将元素内所有的内容进行排版：
text-left 使元素内容靠左显示
text-center 使元素内容居中显示
text-right 使元素内容靠右显示
*表单元素*
复制相关代码，修改其中的一些部分，完成自己的需求。
内联表单，水平排列的表单。
校验状态：has-success has-error has-warning
*分页条*
默认分页
禁用和激活状态（可以显示当前在第几页，第一页的前一页不可用等情况）： disabled active 即使设置了不可用，如果存在href标签的话，仍能点击跳转到相应地方，保险起见，建议删除href标签。
翻页