您的位置：首页 > Web前端 > BootStrap

Bootstrap网格系统

2015-12-30 21:12 656 查看
Bootstrap 官方文档中有关网格系统的描述：

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

Bootstrap3是移动设备优先的，也就是Bootstrap代码从小屏幕设备开始，然后扩展到大屏幕上的组件和网格。

移动设备优先策略

[b]内容：决定什么是最重要的[/b]

布局：优先设计更小的宽度，基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑

渐进增强：随着屏幕大小的增加而添加元素

[b] Bootstrap的网格系统会随着屏幕尺寸的增加，自动分为最多12列。
[/b]
111111111111
444
48
66
12

Bootstrap 网格系统（Grid System）的工作原理

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。

使用行来创建列的水平组。

内容应该放置在列内，且唯有列可以是行的直接子元素。

预定义的网格类，比如 .row 和 .col-sm-6，可用于快速创建网格布局（row相当于是12列）。

列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。

网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-md-4

媒体查询

媒体查询是"有条件的 CSS 规则"。它适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式.

网格选项

超小设备手机（<768px）

小型设备平板电脑（≥768px）

中型设备台式电脑（≥992px）

大型设备台式电脑（≥1200px）

网格行为一直是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的
最大容器宽度None (auto)750px970px1170px
Class 前缀.col-xs-.col-sm-.col-md-.col-lg-
列数量和12121212
最大列宽Auto60px78px95px
间隙宽度30px

（一个列的每边分别 15px）		30px

（一个列的每边分别 15px）		30px

（一个列的每边分别 15px）		30px

（一个列的每边分别 15px）
可嵌套YesYesYesYes
偏移量YesYesYesYes
列排序YesYesYesYes
使用：

堆叠的水平（手机25%/75%分割，中型设备50%/50%分割，大型设备33%/66%分割）

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>Bootstrap 实例 - 上下文类</title>
    <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body{padding: 20px;}
    </style>
</head>
<body>
    <div class = "container">
        <div class = "row">
            <div class = "col-xs-3 col-md-6 col-lg-4" style="border:2px solid green;">
                this提供了一种优雅的方式来隐式“传递”一个对象引用，因此可以将API设计得更加简洁并且易于复用。随着使用模式越来越复杂，
                显式传递上下文对象会让代码变得混乱，而使用this则不会这样。（this引用的是函数据以执行的环境对象）
            </div>
            <div class = "col-xs-9 col-md-6 col-lg-8" style="border:2px solid green;">
                在调用函数时，我们会将调出处执行环境对象传给this，如此处调用fun(2)，处在全局作用域中，因此this会指向window。既然这样，
                我们可以通过强制this指向fun函数对象来解决这个问题，JS提供了两个函数，apply()和call()函数.apply()方法接收两个参数：
                一个是在其中运行函数的作用域（可以理解为是this的值），另一个是参数数组（可以是arguments或者是数组的实例）
                call()方法与apply()方法的作用相同，区别仅在于接收参数的方式不同。第一个参数都是this的值，
                但是使用call()方法，必须要将传递的参数逐个列举出来。
            </div>
        </div>
    </div>
</body>
</html>


说明：Bootstrap 在中型设备中，会查找带有 md 的类，并使用它们。在大型设备中，会查找带有 lg 的类，并使用它们

效果如下图所示（大型设备）：



偏移列

.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
偏移列实际是指定了margin-left的值。

举例说明：

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>Bootstrap 实例 - 上下文类</title>
    <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body{padding: 20px;}
    </style>
</head>
<body>
    <div class = "container">
        <div class = "row" style="border:2px solid red;">
            <div class = "col-xs-3 col-md-6 col-lg-3 col-lg-offset-3" style="border:2px solid green;">
                this提供了一种优雅的方式来隐式“传递”一个对象引用，因此可以将API设计得更加简洁并且易于复用。随着使用模式越来越复杂，
                显式传递上下文对象会让代码变得混乱，而使用this则不会这样。（this引用的是函数据以执行的环境对象）
            </div>
        </div>
    </div>
</body>
</html>
上面实现的效果是：偏移3个列（大型设备）

效果如下：



入了设置class为row外，我们也可以设置col-lg-8，其它内容不变，效果如下：


嵌套列

看懂下面的例子，对于这部分内容，对于列嵌套，你就能理解了。

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>Bootstrap 实例 - 上下文类</title>
    <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body{padding: 20px;}
    </style>
</head>
<body>
    <div class = "container">
        <div class = "row" style="border:2px solid red;">
            <div class = "col-lg-3 " style="border:2px solid green;background:#ccc;">
                this提供了一种优雅的方式来隐式“传递”一个对象引用，因此可以将API设计得更加简洁并且易于复用。随着使用模式越来越复杂，显式传递上下文对象会让代码变得混乱，而使用this则不会这样。（this引用的是函数据以执行的环境对象）
            </div>
            <div class="col-lg-9">                
                <div class="col-lg-2" style="background: pink;">
                    你好吗？会越来越好的，对吗？
                </div>
                <div class="col-lg-2" style="border:2px solid yellow;">
                    越努力越幸福
                    行动起来！
                    不要做语言的巨人，行动的矮子
                </div>  
                <div class="col-lg-8"> 
                    <div class="col-lg-4" style="background:#FFD782;">
                        再见2015年
                        你好2016年
                    </div>
                    <div class="col-lg-6" style="background:#A8FFE2;">
                        愿时光待你温柔一些。
                        最纠结的时候就是你人生最重要的时候
                        不要在不安中度过一生
                    </div>    
                </div>         
            </div>
        </div>
    </div>
</body>
</html>


效果如下：



说明如下：

<div class="col-lg-9">中将被分为12列

同样<div class="col-lg-8">也是。

每一个分割之后，再进行分割时，其都是被分割为12列（当然，在使用时，您不必用完12列）

列排序

Bootstrap 网格系统另一个完美的特性，就是可以很容易地以一种顺序编写列，然后以另一种顺序显示列。可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。当我们需要调整左右的布局顺序时，这种特性能起到非常巨大的作用。

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>Bootstrap 实例 - 上下文类</title>
    <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body{padding: 20px;}
    </style>
</head>
<body>
    <div class = "container">
        <div class = "row">
            <div class = "col-lg-3 col-lg-push-4" style="background:#A3FF93;">
                <h2>我原本在左边</h2>
                this提供了一种优雅的方式来隐式“传递”一个对象引用，因此可以将API设计得更加简洁并且易于复用。随着使用模式越来越复杂，显式传递上下文对象会让代码变得混乱，而使用this则不会这样。（this引用的是函数据以执行的环境对象）
            </div>
            <div class="col-lg-4 col-lg-pull-3" style="background:#FFAEF6;"> 
                <h2>我原本在右边</h2>                
                越努力越幸福<br/>
                行动起来！<br/>
                不要做语言的巨人，行动的矮子<br/>
                愿时光待你温柔一些。<br/>
                最纠结的时候就是你人生最重要的时候<br/>
                不要在不安中度过一生 <br/>
                你生命中的大事<br/>
                安心做一件事<br/>    
                你成为哪种人，并不取决于你的能力，而取决于你的选择                    
            </div>
        </div>
    </div>
</body>
</html>


效果如下：



可以看出来，原本在左侧的内容展示到了右侧，而原本在右侧的内容，现在在左侧展示了。

看到col-lg-push-和col-lg-pull-后的数值了吗？起后的值，对应着你要存放过去的内容的值。4对应着要右侧要显示过来的内容的宽度，3对应着要从左侧显示过来的宽度。

关于Bootstrap网格系统就介绍这么多，看完之后，希望您自己能脱离本文或其它文档，自己进行练习。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航