Bootstrap简介
来自Twitter，是目前最流行的前端框架
是基于HTML、CSS、Javascript的一个简洁、灵活的开源框架，便于开发人员随时上手
目前版本V3
Bootstrap受欢迎的原因
快速制作响应式的网页来适配各种终端
开发简单、方便
移动先行
代码开源
代码有良好的规范
Bootstrap的使用场景
响应式页面
移动端页面
后台页面
带有交互效果的页面
浏览器对Bootstrap的支持
Bootstrap的支持
支持Internet Explorer 8-11
新手入门
开发环境(webstorm)
引入Bootstrap框架文件
压缩处理文件bootstrap.min.css,bootstrap.min.js
使用Bootstrap中文网提供的免费CDN加速服务
基本模板特色
V3.x和V2.x版本相对，有一个很大亮点
基本模板特色
Bootstrap从V3版本开始全面支持移动平台，并贯穿移动先行的宗旨
Bootstrap架构
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/
网友评论