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 媒体特效:
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标签中必须加tableclass
.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
时间: 2024-10-15 05:21:51