Bootstrap简介

一 bootstrap

1. bootstrap响应式框架–css里面有大量的媒体查询，在pc端和移动端响应，这是后端人员在使用，前端人员基本是自己写响应式。bootstrap内置css和js字体图标。
2. 怎样引入到前端页面：直接将css文件或JS或字体文件引入。 若是在集成环境，需要安装bootstrap。
3. 3.3.7版本的boostrap cnd css ：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
   3.3.7版本的boostap cnd js ：
   https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js
4. css全局css，移动设备优先性

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3.0,minimum-scale=1.0,user-scalable=no">

1. Normalize.css：因为各大浏览器之间存在差异性，增强跨浏览器表现的一致性，叫重置浏览器的样式；’
2. bootstrap布局容器（类似固定模式布局和流动式布局）：
   固定模式布局：container；
   流动式布局：container-fluid；
3. bootstrap里面的栅格系统,类似table、tr、td
   栅格系统一行最多分为12个列；
4. 样式里面给元素设置的左右padding：15px，叫槽宽。怎么处理这个槽宽：给子元素设置margin–左右：-15px；
5. 列有xs、sm、md、lg 屏幕的尺寸，列都是relative；
6. push：列 left；
7. offset ：列 marginleft；
8. pull：列 right；

二 页面主体

1. lead ：突出显示；
2. mark ： 重点显示；
3. s ：添加删除线 ，以前是del；
4. ins ： 添加下划线；
5. small ： 小号字；
6. strong ： 加重；
7. em ：斜体；

二 类的样式

1. text-center：文本居中；
2. text-left：左对齐；
3. text-right：右对齐；
4. text-justify：两端对齐；
5. text-nowrap：不换行；
6. text-uppercase：全部字母大写；
7. text-lowercase：全部字母小写；
8. text-capitalize：首字母大写；
9. abbr ：缩略语，属性title；

三 列表的类

1. list-unstyled：无样式列表；
2. list-inline：内联列表；
3. dl-horizontal：自定义列表的 ，水平排列。html5里面的自定义列表 ；
4. code ：放置代码 ；
5. pre ： 代码块；

四 表格的类

1. table：表格的预定义类；
2. table-striped：条纹状表格；
3. table-bordered：带边框的表格 ；
4. table-hover：悬停表格 ；
5. table-condensed：紧缩表格 ；
6. active 、success、 warning 、danger：状态类，添加背景色 ；
7. table-responsive：响应式表格 随父容器的大小而变化；

五 表单的预定义类

1. form-control ：让input 100% 块元素；
2. form-group ：表单分组；
3. btn：按钮的类，默认样式类；
4. form-inline：内联表单（水平排列）；
5. checkbox-inline ： 设置内联；
6. btn-lg：放大；
7. btn-xs：放小；
8. btn-sm：放更小；
9. btn-block：行内（占一整行）；
10. btn-group；
11. close：消失了；

六 图片的类

1. img-circle： 设置圆图片；
2. img-rounded ：有圆角的；
3. img-thumbnail ： 带边框的；
4. mg-responsive：图片响应式。图片比父容器大 ， 设置完和父容器一样大 ， 如果小就没有用了 max-width:100%；