标签：网格 .com 大屏幕 适用于 img grid UI 桌面 boot
栅格系统：
栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。
定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
移动设备优先：
meta用于设置屏幕和设备等一款级时候运行用户缩放,以及缩放比例的问题：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
//分别为: 定义窗口 屏幕宽度和设备一致 初始缩放比例 最大缩放比例 禁止用户缩放
一 创建栅格系统的容器
<div class="container-fluid">//100%宽度 <div class="row"> ... </div> </div> <div class="container">//固定宽度（1170px）,居中显示 <div class="row"> ... </div> </div>
二 创建合适的栅格系统
Bootstrap把每一行分成12等份，“col-md-数字”中的“数字”从1-12中取，数字等于几，就占几份；
<div class=‘row ‘> <div class=‘col-md-3‘ style="background: blue;">我是内容</div> <div class=‘col-md-9‘ style="background: red;">我是内容</div> </div>
三 单元格的类还有四种选择
.col-xs- 无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；试用于手机；
.col-sm- 屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；试用于平板；
.col-md- 屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；试用于桌面显示器；
.col-lg- 屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器；
例：//如果是大屏幕电脑一行显示4个模块(-lg-3),如果是中等屏幕pad一行显示3个模块(-md-4),如果是小屏幕手机一行显示1个模块(xs-12)
<div class=‘row‘> <div class=‘col-lg-3 col-md-4 col-sm-6 col-xs-12 bg-danger‘>我是内容</div> <div class=‘col-lg-3 col-md-4 col-sm-6 col-xs-12 bg-info‘>我是内容</div> <div class=‘col-lg-3 col-md-4 col-sm-6 col-xs-12 bg-primary‘>我是内容</div> <div class=‘col-lg-3 col-md-4 col-sm-6 col-xs-12 bg-success‘>我是内容</div> <div class=‘col-lg-3 col-md-4 col-sm-6 col-xs-12 bg-danger‘>我是内容</div> <div class=‘col-lg-3 col-md-4 col-sm-6 col-xs-12 bg-info‘>我是内容</div> <div class=‘col-lg-3 col-md-4 col-sm-6 col-xs-12 bg-primary‘>我是内容</div> <div class=‘col-lg-3 col-md-4 col-sm-6 col-xs-12 bg-success‘>我是内容</div> </div>
四 常用的技术点
1 列偏移 : 假设一行两列分别占5,6有让中间保持空隙,向两边靠
//如果偏移超过了,会自动换行并偏移
<div class="row"> <div class="col-md-3 col-md-offset-1 bg-danger">1</div> <div class="col-md-3 col-md-offset-1 bg-info">2</div> </div>
2 嵌套 : 嵌套遵循把父亲当做12份
<div class="row" > <div class="col-md-7" > <div class="col-md-3" >1</div> <div class="col-md-3" >2</div> <div class="col-md-3" >3</div> <div class="col-md-3" >4</div> </div> <div class="col-md-5" > <div class="col-md-4" >5</div> <div class="col-md-4" >6</div> <div class="col-md-4" >7</div> </div> </div>
3 移动 : push向右移动,pull向左移动
<div class="row">
<div class="col-md-3 col-md-push-9 bg-danger">向右移动</div>
<div class="col-md-9 col-md-pull-3 bg-info">向左移动</div>
</div>
标签：网格 .com 大屏幕 适用于 img grid UI 桌面 boot
原文地址：http://www.cnblogs.com/mjaq/p/7384121.html
