Bootstrap全局样式 - 栅格系统

作者: 蝴蝶结199007 | 来源:发表于2017-06-08 14:20 被阅读98次

知识点

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

简介
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

栅格系统

bootstrap默认为.col-xs-*、.col-sm-*、.col-md-*、.col-lg-*添加了padding值：

  position:relative;
  min-height:1px;  
  padding-right: 15px;
  padding-left: 15px;

col-xs-*

媒体查询
bootstrap在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

bootstrap在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

栅格参数

栅格参数

列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用这些选择器为当前元素增加了左侧的边距（margin）。

列嵌套
添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

列排序
使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
.col-md-push-*：left
.col-md-pull-*：right

Less mixin 和变量
TODO：这个需要仔细去实践研究，可参考Less mixin 和变量

实践

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="Resource-type" content="Document"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>栅格系统</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <style>
        <!--
        .row{margin-bottom:5px;}
        .row div{text-align:center;border:1px solid #5bc0de;}
        -->
    </style>
</head>
<body>
<div class="container">
    <!--col-xs-*-->
    <p>col-xs-*</p>
    <div class="row">
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
    </div>
    <!--在任意设备中都是以一行三列显示-->
    <div class="row">
        <div class="col-xs-4">col-xs-4</div>
        <div class="col-xs-4">col-xs-4</div>
        <div class="col-xs-4">col-xs-4</div>
    </div>
    <div class="row">
        <div class="col-xs-4">4</div>
        <div class="col-xs-8">8</div>
    </div>
    <div class="row">
        <div class="col-xs-6">6</div>
        <div class="col-xs-6">6</div>
    </div>
    <div class="row">
        <div class="col-xs-12">12</div>
    </div>

    <!--col-md-*-->
    <p>col-md-*</p>
    <!--在 >=992px的设备中，以一行12列显示，<992px 的设备中，会以一行一列显示-->
    <div class="row">
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-12">12</div>
    </div>
</div>
<br/>
<!--流式布局-->
<div class="container-fluid">
    <p>流式布局container-fluid</p>
    <div class="row">
        <div class="col-xs-4">4</div>
        <div class="col-xs-4">4</div>
        <div class="col-xs-4">4</div>
    </div>
</div>
<br/>
<!--移动设备和桌面屏幕-->
<div class="container">
    <p>移动 桌面</p>
    <!-- >=992px 显示一行两列，<768px 会折行显示，显示两行各一列 -->
    <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>
    <!-- >=992px 显示一行三列，<768px 最后一个会折行显示 -->
    <div class="row">
        <div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
        <div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
        <div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
    </div>
    <br/>
    <!--移动 平板 桌面-->
    <p>移动 平板 桌面</p>
    <!--平板、桌面均显示的一行两列，移动端会折行-->
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8">col-xs-12 col-sm-6 col-md-8</div>
        <div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
    </div>
    <!--移动端最后一个折行显示，平板、桌面均显示的一行三列-->
    <div class="row">
        <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
        <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
        <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
    </div>
    <!--移动端一行一个，平板、桌面均显示的一行三列-->
    <div class="row">
        <div class="col-sm-4">col-sm-4</div>
        <div class="col-sm-4">col-sm-4</div>
        <div class="col-sm-4">col-sm-4</div>
    </div>
    <!--移动端最后一个折行，平板、桌面均显示的一行三列-->
    <div class="row">
        <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
        <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
    </div>
    <br/>
    <!--响应式列重置-->
    <p>响应式列重置</p>
    <!--平板桌面均显示一行四列，手机显示两行两列-->
    <div class="row">
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <!-- Add the extra clearfix for only the required viewport -->
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    </div>
    <br/>
    <!--列偏移-->
    <p>列偏移</p>
    <!--移动、平板显示两行，桌面显示一行两列，第一个向右偏移4个列的宽度，增加的margin-->
    <div class="row">
        <div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div>
        <div class="col-md-4">col-md-4</div>
    </div>
    <!--移动、平板显示两行，桌面都向右偏移3个列的宽度-->
    <div class="row">
        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    </div>
    <!--桌面向右偏移3个列的宽度-->
    <div class="row">
        <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
    </div>
    <!--col-sm-offset-0 覆盖偏移量，如果不添加覆盖，在桌面第三个则会折行显示，并偏移3个列宽度-->
    <div class="row">
        <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
        <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
        <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0</div>
    </div>
    <!--列嵌套-->
    <p>列嵌套</p>
    <!--第二层row包含在第一层中-->
    <div class="row">
        <div class="col-md-6" style="background:#ddd;">
            第一层：col-md-6
            <div class="row" style="background:#fff;">
                <div class="col-md-4">第二层：col-md-4</div>
                <div class="col-md-8">第二层：col-md-8</div>
            </div>
        </div>
        <div class="col-md-6" style="background:#ddd;">
            第一层：col-md-6
            <div class="row" style="background:#fff;">
                <div class="col-md-6">第二层：col-md-6</div>
                <div class="col-md-6">第二层：col-md-6</div>
            </div>
        </div>
    </div>
    <!--列排序-->
    <p>列排序</p>
    <!---->
    <div class="row">
        <div class="col-xs-4">排序前：col-xs-4</div>
        <div class="col-xs-8">排序前：col-xs-8</div>
    </div>
    <div class="row">
        <div class="col-xs-4 col-xs-push-8" style="z-index:2;">排序后：col-xs-4</div>
        <div class="col-xs-8 col-xs-pull-4">排序后：col-xs-8</div>
    </div>

</body>
</html>

参考学习：
栅格系统
 Bootstrap网格系统

Bootstrap全局样式 - 栅格系统

知识点

实践

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web前端之路

我爱编程