Bootstrap网格系统

发布时间：2020-12-17 21:01:29 所属栏目：安全来源：网络整理

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

Bootstrap 官方文档中有关网格系统的描述：

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

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

??? 移动设备优先策略

? ? ? 内容：决定什么是最重要的

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

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

??? Bootstrap的网格系统会随着屏幕尺寸的增加，自动分为最多12列。???

1	1
4		4
4		8
6			6
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)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes

使用：

堆叠的水平（手机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网格系统就介绍这么多，看完之后，希望您自己能脱离本文或其它文档，自己进行练习。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!