BootStrap

UI框架

• 包含CSS、JS特效插件的工具集，快速开发网页
• 经典的UI框架：BootStrap、JQueryUI、MeiziUI……

BootStrap

2.1 版本

• 用于生产环境(CSS\JavaScript)
• 源码(LESS)(LESS是CSS预处理器)
• SASS(SASS也是CSS预处理)
• 中文网网站地址：http://www.bootcss.com/

响应式布局

3.1 手机屏幕的分辨率

• 如今绝大部分手机视网膜屏幕，有物理分辨率，和渲染分辨率。iphone8物理分辨率为750*1334渲染分辨率为375*667
• 手机浏览器为了让没有作响应式处理的网页可以正常显示，自动进行缩放。视口的大小一般会设置为980px

3.2 媒体查询

@media (min-width:) { 选择器 { } 选择器 { } } 

媒体特效： min-width min-height max-width max-height width height .........

3.3 视口

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 

4 布局

4.1 格栅系统

.container

<768px 100% 超小屏幕 xs >=768px <992px 750px 小屏幕，范围在[768,992)时，使用750px sm >=992px <1200px 970px 中等屏幕，范围在992,1200)时，使用970px md >=1200px 1170px 大屏幕，范围在[768,992)时，使用1200px lg 

.行和列

行 .row 列 col-xs-* col-sm-* col-md-* col-lg-* 把父元素分红12份,*指定占父元素的份数 

4.2 表格

.table table标签中必须加class=table .table-striped 条纹状表格 .table-bordered 带边框的表格 .table-hover 鼠标悬停 .table-condensed 紧缩表格 .success .info .danger .warning .active 颜色 

4.3 表单

.form-horizontal .form-group .form-control .control-label