一、下载导入bootstrap组件
官网下载->导入js、css、fonts三个目录进入项目文件->link和script导入min.css/min.js两个文件
注意下载相应版本的jQuery，并在导入bootstrap.min.js前导入jQuery
二、全局样式
2.1标题
h1-h6的字号大小是36 30 24 18 14 12 对应的是类名是class(.h1-.h6)跟h1-h6
<small></small>可以嵌套在标题标签中作为小标题
2.2排版
2.2.1文字
<mark></mark>—— 高亮显示
<del></del>——删除线
<ins></ins>——下划线=<u></u>
<small></samll>——小标题，与h1~h6标签配合使用
<strong></strong>——加粗
text-left、text-right、 text-center——class属性，分别向左、右、中居中对齐
text-uppercase、text-lowercase、text-capitalize——字母大写、小写、首字母大写
2.2.2表格
.table-bordered——带边框
.table-striped ——条纹
.table-hover——悬停变色
.table-condensed——紧凑
.danger——红色
.warning——黄色
.info——蓝色
.success——绿色
.active——默认悬停状态
2.2.3表单
一个表单组件
<form>
<div class="form-group">
<label class="control-label">label信息 :</label>
<input type="text" class="form-control">
</div>
</form>其次可以通过
form->form-inline——它的所有元素是内联的，向左对齐的，标签是并排的,水平排版
input->input-lg/sm——改变输入框大小
input->form-control——圆角方框发光
div ->has-successs/has warning/ has-error等可改变颜色
label->sr-only——取消提示信息（将label的信息隐藏）
来改变样式
2.2.4 按钮
2.2.5 图片
圆角 .img-rounded
圆形 .img-circle
带有边框的圆角图形 .img-thumbnail
三、响应式布局
3.1 <meta>标签
<meta name="viewport" content="width=device-width, initial-scale=1, maxium-scale=1,minimum-scale=1, user-scalable=no">
//width=device-width表示宽度与所显示的屏幕的宽度相同；
//initial-scale=1 表示初始化可视区域缩放级别；
//user-scalable 表示用户能否缩放页面；
//maximum-scale 表示页面能被放大的最大级别；
//minimum-scale 表示页面被缩小的最大级别；
3.2 栅格布局
bootstrap中的响应式开发原理是栅格布局，将屏幕分为12等份。元素可以给根据不同屏幕的大小适应相应的大小，如col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3 col-md-offset-4
col-lg-3：表示在大屏幕元素宽度大小为屏幕的3/12,即1/4,
col-md-4：表示在中等屏幕元素宽度大小为屏幕的1/3,
col-sm-6：表示在小屏幕元素宽度大小为屏幕的1/2,
col-xs-12：表示在极小屏幕元素宽度大小占满整个屏幕大小。
col-lg-offset-3：表示在大屏幕中元素的位置是距离屏幕左边为屏幕大小的1/4,
col-md-offset-4：表示在中等屏幕中元素的位置是距离屏幕左边为屏幕大小的1/3
3.3单位
px
em:1em=16px(但不完全是)，em会继承父级元素的字体大小
rem：跟em差不多，但是相对em稳定，多用在移动端
3.4 图标
小图标使用链接（bootstrap）点击打开链接
国产（阿里）点击打开链接
记得引用<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
四、bootstrap组件
4.1 bootstrap组件-怪异的属性
1、role： HTML5的标签属性，标识普通标签使其语义化，方便浏览器对其具体功能进行识别，给特定的浏览器使用比如盲文浏览器。
2、aria-label：用在输入框，当焦点落到输入框时读屏软件可读出输入框的内容，配合读屏软件使用。
3、tabIndex：设置键盘的Tab键在控件中的移动，就是焦点的移动顺序，方便一些有障碍的人士浏览网页。
4、data-：HTML5新增的用于自定义的属性，不影响页面显示，管理自己想要实现的数据传递，包括数据交互的一些效果。涉及组件交互，比如下拉菜单、点击等
4.2 下拉菜单组件
<div class="dropdown">
<button class="btn btn-default drop-toggle" data-toggle="dropdown">
这是按钮
<span class="caret"></span><!--倒三角角标-->
</button>
<ul class="dropdown-menu">
<li>下拉1</li>
<li>下拉2</li>
<li>下拉3</li>
</ul>
</div>data-toggle:绑定下拉事件
4.3 控件组
input 控件组
<div class="input-group">
<span class="input-group-addon">*</span>
<input type="text" class="form-control ">
</div>
4.4 导航
导航条----------nav
1.可切换的导航 nav-tabs
2.胶囊导航 nav-pills
3.垂直导航 nav-justified / nav-stacked
4.5分页
1. .pagination在父元素中添加表示分页
2. .pager放置在翻页区域
3. .previous把链接向左对齐， .next把链接向右对齐。
<nav>
<ul class="pager">
<li class="previous"><a href="#">向左</a></li>
<li class="next"><a href="#">向右</a></li>
</ul>
<ul class="pagination pagination-lg">
<li class="active"><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>
</ul>
</nav>4.6进度条
1.progress-bar
2.progress-bar-danger/success/info.... 进度条颜色
3.progress-bar-striped 进度条斑马状渐变
<div class="progress">
<div class="progress-bar" style="width:60%;" >60%</div>
</div>4.7列表
<ul class="list-group">
<li class="list-group-item">
列表1
<span class="badge">
14
</span>
</li>
</ul>
可以通过.actice和list-group-item-danger等改变样式
4.8 面板
.panel 代表面板
.panel-heading 代表面板头部
.panel-body 代表面板内容
.panel-footer 代表面板的注脚
<div class="panel panel-success">
<div class="panel-heading">
弹出层!
</div>
<div class="panel-body">
这是面板的具体内容
</div>
<div class="panel-footer">
脚注
</div>
</div>
五、bootstrap中的插件
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">弹窗按钮</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span><span class="sr-only">关闭弹窗</span> </button>
<h4>标题</h4>
</div>
<div class="modal-body">modal body</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>