前端之Bootstrap框架
简介
BootStrap是一个前端的框架，它的内部封装了好多的css样式和js代码，你要想使用，只需要把它的类库文件下载下来，引入到你的文档中去，就可以使用了。
我们要使用的时候，只需要对标签加上class类。就是增加class类和删除class类的属性值，来达到某个效果。
Bootstrap可以直接在百度上搜索，网址是：https://www.bootcss.com/
内部的版本，建议选择v3版本。
下载与安装
下载
方式一：直接下载
用于生产环境的 Bootstrap
方式二：联网CDN
方式三：bootcdn，
选择Q，进去后选择你想要的版本
下载文件
-
css文件中使用bootstrap.min.css，其余都可以删掉
-
fonts，是跟字体有关的样式
-
js中使用bootstrap.min.js文件
引入文件
-
如果你只使用bootstrap 的css样式，直接引入一个css文件即可
-
如果你使用了bootstrap 的js代码，必须引入js代码和jQuery文件，因为bootstrap依赖于jQuery文件
补充
- 想要网址中的样式的用法：
- 右击，检查
- 使用左上角的图标，选中你想要的样式
- 找到对应的代码行
- 右击Copy --> Copy outerHTML
-
响应式布局
就是一个网站能够兼容多个终端。可以根据用户使用的手机端、PC端、电脑端的不同而自动做出改变。
基本使用bootstrap
全局CSS样式
1.Normalize.css 初始化CSS文件，需要下载
2.布局容器
container 左右两边留空白
container-fluid 不留空白
# 所以，以后我们在写页面的时候，上来先写一个div class=container。
3.栅格系统
row 把一个div等分成12份
col-md-4 左边要4份
col-md-offset-2 偏移量，偏移两份
4.响应设置
@media screen and (max-width 600px){ 样式 } 屏幕尺寸大于600px显示{}内的样式
# 如何兼容四种情况的设备呢？
# 给标签添加4个类
col-xs- 超小屏幕 手机
col-sm- 小屏幕 平板
col-md- 中等屏幕 桌面显示器
col-lg- 大屏幕 大桌面显示器
5.排版
<h1> 标题
<small> 副标题
<mark> 高亮
<del> 删除文本
<ins> 额外插入的文本
<u> 带下划线的文本
<strong> 着重
<em> 斜体
text-center 居中
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
6.表格 # 务必记住
table 表格
table-striped 条纹状表格
table-hover 鼠标悬停
table-bordered 带边框的表格
7.颜色
active 偏灰
success 偏绿
warning 偏蓝
danger 偏黄
info 偏红
8.表单
form-control 设置全宽，加在form上面 # 针对于单选和复选不要加form-control
form-group 水平排列，加载div中
9.按钮
btn btn-default 默认样式
btn btn-primary 首选项
btn btn-success 成功
btn btn-info 一般信息
btn btn-warning 警告
btn btn-danger 危险
btn-block 块级元素
组件
1.图标
直接复制类即可
2.导航条
navbar navbar-default
navbar navbar-inverse
3.分页
Page navigation
4.巨幕
jumbotron
5.缩略图
thumbnail
6.列表
list-group
