Bootstrap 删格系统（三）

最新推荐文章于 2023-03-13 00:53:22 发布

weixin_30586257

最新推荐文章于 2023-03-13 00:53:22 发布

阅读量254

点赞数

原文链接：http://www.cnblogs.com/rainy0496/p/6600862.html

版权

移动设备优先处理

//屏幕宽度和设备一直，初始缩放比例、最大缩放比例和禁止用户缩放(最好设计最小宽度为1440px)

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

一、布局容器

.container // 固定宽度框为1200px 主体显示为1170px，两边15px留白

.container-fluid // 100%流体宽度，无论多大都是100%显示

二、栅格化系统

最多为12列,通过row和column组合创建页面

1. row 必须包含在 .container 或者 .container-fluid (100%) 中，以便赋予合适的排列(aligment)和内补(padding)

2. row 在水平方向创建一组 column ，创建两行两个 row ;

3. 内容应放于 column 内，并且只有 column 可作为 row 的直接子元素；

4. .row 和 .col-xs-4 这种预定义的类，可用来快速创建删格布局，源码中 mixin 也可以用来创建语义化的布局

5. column 设置 padding 属性，创建列与列之间的间隔（gutter），通过 .row 元素设置负值 margin 从而抵消掉， .container 元素设置的 padding 也间接的为 row 所包含的 column 抵消掉了 padding。向外突出的愿意就是因为 margin 的负值，以便保证在删格列中的内容排成一行。

6. 如果 row 中包含的 column 大于12，多余的 column 被作为一个整体另起一行排列。

7. 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-*不存在，也影响大屏幕设备。

抄袭一下官网知识参数：

代码示例（兼容各个尺寸）：

<div class="container">
    <div class="row">
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 a">a</div>
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 a">a</div>
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 a">a</div>
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 a">a</div>
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 a">a</div>
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 a">a</div>
    </div>
</div>

三、列偏移、嵌套和排序

<div class="container">
    <div class="row">
      <div class="col-md-8 a">8</div>
      <div class="col-md-3 col-md-offset-1 a">3</div>  
    </div>
    <div class="row">
      <div class="col-md-9 a" style="padding: 0"> //此div下再添加一个row 也可以达到同样的效果
        <div class="col-md-4 a">4</div>
        <div class="col-md-4 a">4</div>
        <div class="col-md-4 a">4</div>
      </div>
      <div class="col-md-3 a">3</div> 
    </div>
    <div class="row">
      <div class="col-md-9 col-md-push-3 a">9</div>
      <div class="col-md-3 col-md-pull-9 a">3</div>
    </div>
  </div>