Bootstrap 教程
Bootstrap 教程
阅读(15k) 书签 赞(6) 我要纠错

Bootstrap 网格系统

2018-02-27 18:05 更新

网格系统允许我们正确地布局我们网站的内容。

它将屏幕划分为多个行和列，可用于创建各种类型的布局。

一旦我们定义了行和列，我们可以在其中放置HTML元素。

Bootstrap的网格系统将屏幕划分为列 - 每行最多12个。

列宽根据屏幕的大小而变化。因此，Bootstrap的网格系统是响应式的，因为当浏览器窗口的大小改变时，列动态地调整大小。

你可以创建无限数量的行。这些行和列的交集形成了一个矩形网格，以包含网站的内容。

列类

Twitter Bootstrap 3具有响应式移动第一流体网格系统，随着设备或视口大小的增加，可适当放大到12列。

Bootstrap 3有预定义的网格类，可以快速为不同类型的设备，如手机、平板电脑、台式机等制作网格布局。

我们可以使用 .col-xs- 类来为超小型设备，如手机，创建网格列。对于像平板电脑这样的小屏幕设备，使用 .col-sm- 。对中等大小的设备（如台式机）使用 .col-md- 类，对于大型桌面显示器使用.col-lg- 。

下表总结了新网格系统的一些关键特性。

Bootstrap 3网格系统特点 超小型设备
手机（<768px）		 小型设备
平板（>= 768px）		 中型设备
台式机（>= 992px）		 大型设备
大桌面显示器（>= 1200px）
container最大宽度 无（自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
最大列宽 自动 ~62px ~81px ~97px
槽（gutter）宽 30px（每列左右均匀15px）

以下代码显示如何使用 col-md- 类。

<div class="container">
  <div class="row">
    <div class="col-md-4"><p>Box 1</p></div>
    <div class="col-md-4"><p>Box 2</p></div>
    <div class="col-md-4"><p>Box 3</p></div>
    <div class="col-md-4"><p>Box 4</p></div>
    <div class="col-md-4"><p>Box 5</p></div>
    <div class="col-md-4"><p>Box 6</p></div>
    <div class="col-md-4"><p>Box 7</p></div>
    <div class="col-md-4"><p>Box 8</p></div>
    <div class="col-md-4"><p>Box 9</p></div>
    <div class="col-md-4"><p>Box 10</p></div>
    <div class="col-md-4"><p>Box 11</p></div>
    <div class="col-md-4"><p>Box 12</p></div>
  </div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Twitter Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4"><p>Box 1</p></div>
            <div class="col-md-4"><p>Box 2</p></div>
            <div class="col-md-4"><p>Box 3</p></div>
            <div class="col-md-4"><p>Box 4</p></div>
            <div class="col-md-4"><p>Box 5</p></div>
            <div class="col-md-4"><p>Box 6</p></div>
            <div class="col-md-4"><p>Box 7</p></div>
            <div class="col-md-4"><p>Box 8</p></div>
            <div class="col-md-4"><p>Box 9</p></div>
            <div class="col-md-4"><p>Box 10</p></div>
            <div class="col-md-4"><p>Box 11</p></div>
            <div class="col-md-4"><p>Box 12</p></div>
        </div>
    </div>
</body>
</html>

例子

以下代码显示了如何使用.clearfix类和响应实用程序类。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Twitter Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4"><p>Box 1</p></div>
            <div class="col-md-4"><p>Box 2</p></div>
            <div class="col-md-4"><p>Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-4"><p>Box 4</p></div>
            <div class="col-md-4"><p>Box 5</p></div>
            <div class="col-md-4"><p>Box 6</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-4"><p>Box 7</p></div>
            <div class="col-md-4"><p>Box 8</p></div>
            <div class="col-md-4"><p>Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-4"><p>Box 10</p></div>
            <div class="col-md-4"><p>Box 11</p></div>
            <div class="col-md-4"><p>Box 12</p></div>
        </div>
    </div>
</body>
</html>

默认网格系统有12列，我们在每第三次出现后清除列。

用.visible-md-block 使.clearfix 使类仅在中等大小的设备上有效，并且隐藏在其他设备上。

定制各种尺寸设备

自定义平板电脑的布局，将内容呈现为2x6网格（即2列和6行），在每个列上添加.col-sm-6类。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4"><p>Box 1</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 2</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 4</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 5</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 6</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 7</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 8</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 10</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 11</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 12</p></div>
        </div>
    </div>
</body>
</html>

例3

为小型设备添加清除浮动，我们的最终代码是：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4"><p>Box 1</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 2</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 4</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 5</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 6</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 7</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 8</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 10</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 11</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 12</p></div>
        </div>
    </div>
</body>
</html>

例2

自定义大型设备的布局，如大型桌面显示器。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 2</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 4</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-lg-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 5</p></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 6</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 7</p></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 8</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-lg-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 10</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 11</p></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 12</p></div>
        </div>
    </div>
</body>
</html>

container

Bootstrap建议我们应该把所有的行和列放在container中，以确保正确对齐和填充。

在Bootstrap中有两种类型的容器类：container和container-fluid。

前者在浏览器窗口中创建一个固定宽度的容器，而后者形成全宽度流体容器。

固定宽度容器的样式显示在屏幕的中心，省略了两侧的额外空间。因此，将所有内容包装在容器中是一个好的做法。

我们将在我们的演示中使用固定宽度的容器。

<div class="container"></div>

接下来，我们将在容器内创建一行。一旦定义了行，我们就可以开始创建列。Bootstrap有一个用于创建行的类row：

<div class="container">
    <div class="row">
    </div>
</div>

你可以创建无限数量的行，但它们必须放置在容器中。为了获得更好的结果，建议使用一个包含所有行的单个容器。

在Bootstrap中，通过指定12个可用Bootstrap列中你希望跨越的那些来创建列。

假设我们只想有一个列。它应该跨越所有12个可用Bootstrap列。为此，我们将使用col-xs-12 类，其中数字12指定要跨越的列的数量。

网格系统的布局

为了在一行中创建两个等宽的列，我们使用类 col-xs-6 。 这告诉Bootstrap，我们需要2个跨越6个Bootstrap列的列，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

</head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <h4>Column 1</h4>
            </div>
            <div class="col-xs-6">
                <h4>Column 2</h4>
            </div>
        </div>
    </div>
  </body>
</html>
以上内容是否对您有帮助：
← Bootstrap 安装
Bootstrap 网格列 →

推荐文章

推荐教程

推荐课程

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号