python学习第六十天：BootStrap

Posted 2020-12-31 luck_L

UI框架

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

BootStrap

2.1 版本

• 用于生产环境(CSSJavaScript)
• 源码(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