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

转载于:https://www.cnblogs.com/luck-L/p/9507997.html