BootStrap样式
Bootstrap简介
来自Twitter，是目前最流行的前端框架
是基于HTML、CSS、Javascript的一个简洁、灵活的开源框架，便于开发人员随时上手
目前版本V3
Bootstrap受欢迎的原因
快速制作响应式的网页来适配各种终端
开发简单、方便
移动先行
代码开源
代码有良好的规范
Bootstrap的使用场景
响应式页面
移动端页面
后台页面
带有交互效果的页面
浏览器对Bootstrap的支持
支持Internet Explorer 8-11
新手入门
开发环境(webstorm)
引入Bootstrap框架文件
压缩处理文件bootstrap.min.css,bootstrap.min.js
使用Bootstrap中文网提供的免费CDN加速服务
基本模板特色
V3.x和V2.x版本相对，有一个很大亮点
Bootstrap从V3版本开始全面支持移动平台，并贯穿移动先行的宗旨
Bootstrap架构
栅格系统
栅格系统是通过一系列的行与列的组合来创建页面的布局，设置的内容就可以放在这些创建好的布局中
实现原理：
通过定义容器的大小，平分为12份
调整内外边距
结合媒体查询
栅格系统工作原理
一行数据必须包含在.contrainer中，以便为其赋予合适的对齐方式和内边距
使用行在水平方面创建一组列
具体内容放在列内，列可以作为行的直接元素
内置的一大堆样式，可以使用col-xs-4(占4行宽度)的样式来快速创建栅格
通过设置padding从而创建列之间的间隔，让后面第一列和最后一列设置赋值margin来抵消掉padding的影响
栅格系统中指定1到12的值来标识其跨越的范围
浏览器可视区域：
栅格系统的使用
列组合
列偏移
列嵌套
列排序
列组合：
列偏移
列嵌套
列排序
响应式栅格
CSS全局样式
又称为CSS布局
是Bootstrap三大核心内容的基础，即基础的布局语法
包括
基础排版(Typography)
表单(Forms)
按钮(Buttons)
图片(Images)
基础排版
标题
页面主体
强调文本
列表
标题
Bootstrap为传统的标题h1-h6重新定义了标准的样式，使得在所有浏览器下显示效果都一样
页面主体
BootStrap为段落标签设置了全局的字体大小为12px，行间距line-height为字体大小的1.428倍(即20px)
特别强调的段落标签
<p class="lead"></p>
经验：
如果Bootstrap提供的字体大小样式不符合实际开发需求，可以在引用的bootstrap.css文件后面重新设置样式以覆盖框架定义好的默认样式
强调文本
文本强调元素:small、strong、em
对齐方式：
列表
内联列表
水平定义列表
表单
内联表单
横向表单
验证提示状态
控件大小
内联表单
横向表单
验证提示状态
.has-warning 警告(黄色)
.has-error 错误(红色)
.has-success 成功(绿色)
控件大小
大型输入框
小型输入框
按钮
按钮样式
按钮大小
图片
响应式图片
图片形状
参考资料：
Bootstrap官网文档：https://v4.bootcss.com/docs/4.0/getting-started/introduction/
