本文深入解析栅格布局的原理与应用，通过实例演示如何利用Bootstrap将页面等分为12列，并根据不同屏幕尺寸调整布局。介绍了栅格布局的特点、类名选择规则以及嵌套布局的使用方法。
栅格参数
个人理解：
1.布局大约是这样的
<body>
<div class="row">
<div class="col-md-5">.col-md-1</div>
<div class="col-md-7">.col-md-1</div>
</div>
</body>
一个行将整个屏幕等分成了12个列。
2.给同一个<div>可以加上多个class,在不同的屏幕下会使用相应的class，小屏幕(手机)会使用 .col-xs-，稍大屏(Pad)会使用.col-sm-,普通屏(笔记本)会使用.col-md-,特大屏会使用.col-lg-
例如：
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
3.Bootstrap将一行等分成了12列，若是布局中一行的合计超过了12，包含多余列（column）的元素将作为一个整体单元被另起一行排列。
4.col-md-offset-*设置可以右移
5.col-md-push-* col-md-pull-* col-md-offset-*的另一种实现：col-md-push-4向右移动3个，col-md-pull-7向左移动7个；为什么不能用左右浮动呢？这是因为所有的列默认情况下都是左浮动，如果要使用左右浮动，那就不知道得修改多少列的左右浮动样式了。
6.嵌套；div 嵌套div 父div一样是均分成了12份；
扫一扫
1955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
