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中有两种类型的容器类:containercontainer-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>
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号