码迷,mamicode.com
首页 > Web开发 > 详细

css框架

时间:2017-05-10 01:02:06      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:工作原理   ini   view   init   containe   内容   布局   int   scale   

CSS框架

960Grid

即960布局,现基本不再使用

Bootstrap

需将页面设置为HTML5文档类型

1. 引入外部CSS文件

使用<link>引入,一般只引入核心文件,主题文件不引入

2. 移动设备优先

<head>标签中添加viewport元数据标签

<meta name="viewport" content="width=device-width,inital-scale=1">
width:可视区的宽度,值为device-width
intial-scale:页面首次被显示时可视区域的缩放级别,取值为1.0则页面按实际尺寸显示,无任何缩放

3. 布局容器

Bootstrap需为页面内容和栅格系统包裹一个.container容器:

.container类用于固定宽度并支持响应式布局的容器
.container-fluid类用于100%宽度

栅格系统

通过行(row)和列(column)的组合创建页面布局

1. 工作原理

1..row必须包含在.container.container-fluid
2.通过.row在水平方向上创建一组列.col
3.内容应该在.col中,且只有.col可作为.row的直接子元素
4..col的范围为1~12

2. 栅格参数

.col-xs-(xs是extra small的缩写) <768px 
.col-sm-(sm是small的缩写)       >=768px
.col-md-(xs是middle的缩写)      >=992px
.col-lg-(xs是large的缩写)       >=1200px

xs总是水平排列,sm、md、lg开始始堆叠在一起,超过这些值后水平排列

 

css框架

标签:工作原理   ini   view   init   containe   内容   布局   int   scale   

原文地址:http://www.cnblogs.com/justsilky/p/6833400.html

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