页面必须设置为html5文档类型
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
适应移动设备
<meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
排版/链接
scaffolding.less：
body{background-color:#fff／@font-family-base/@font-size-base/@line-height-base}
a(@link-color/@link-hover-color)
Normalize.css
栅格系统
容器：
.container(固定宽度响应式)/.container-fluid(百分比自适应)
不能互相嵌套（有padding的原因）
行：
.row
必须包含在容器.container或.container-fluid中
行内可以且只可以创建列(column)
列：
.col-*-*
内容放在列中
列与列之间的间隔有.col-*-*中的padding属性设置
第一个＊为xs、sm、md和lg，第二个＊为1-12
列数大于12，多余的列另起一行(本质上是浮动引起的换行)
媒体查询
超小屏幕(小于768)
无媒体查询代码——移动优先原则
容器宽度.container为自动
小屏幕(大于768)
@media (min-width:@screen-sm-width:768){}
容器宽度.container为720
中等屏幕(大于992)
@media(min- width:@screen-md-width:992){}
容器宽度.container为970
大屏幕(大于1200)
@media(min-width:@screen-lg-width:1200){}
容器宽度.container为1170
大屏幕媒体查询类覆盖小屏幕设备类
实例
1、根据媒体查询，相应宽度的屏幕展示相应的类(堆叠／水平排列)
<div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
</div>
<div>
<div>.col-md-8</div>
<div>.col-md-4</div>
</div>
<div>
<div>.col-md-4</div>
<div>.col-md-4</div>
<div>.col-md-4</div>
</div>
<div>
<div>.col-md-6</div>
<div>.col-md-6</div>
</div>
2、.col数大于12，包含多余列的元素另起一行
<div>
<div>.col-xs-9</div>
<div>.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div>.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
3、col-**-offset-*列偏移(通过margin-left设置偏移)
4、col-**-push-*(通过left值改变位置)和col-**-pull-*(通过right值改变位置)改变列排序
相关文章
精彩导读
热门资讯
关注我们
