码迷,mamicode.com
首页 > 编程语言 > 详细

python学习第六十天:BootStrap

时间:2018-08-20 21:53:51      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:1.0   预处理   cto   大屏幕   order   版本   显示   active   target   

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

python学习第六十天:BootStrap

标签:1.0   预处理   cto   大屏幕   order   版本   显示   active   target   

原文地址:https://www.cnblogs.com/luck-L/p/9507997.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!