Bootstrap 动态布局

2018-03-03 16:33 更新

让我们看看如何把网格系统付诸实践，创造一个动态布局，可根据要查看的设备的大小进行调整。

台式机的设计

下面的代码显示了如何使用 col-md-12 中等大小的列来为台式机设计。

<!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-md-12 text-center">
                <h1>My  First  Bootstrap Blog</h1>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-4">
                <h3>Post Title  1</h3>
                <p>Lorem ipsum  dolor  sit amet,  consectetur adipisicing aliqua. </p>
            </div>
            <div class="col-md-4">
                <h3>Post Title  2</h3>
                <p>Lorem ipsum  dolor  sit amet,  consectetur adipisicing
                elit,  sed do eiusmod tempor  incididunt ut labore  et dolore  magna
                aliqua. </p>
            </div>
            <div class="col-md-4">
                <h3>Post Title  3</h3>
                <p>Lorem ipsum  dolor  sit amet,  consectetur adipisicing
                elit,  sed do eiusmod tempor  incididunt ut labore  et dolore  magna
                aliqua. </p>
            </div>
        </div>
    </div>
  </body>
</html>

更多内容

接下来，我们将直接将列添加到之前代码中列的现有行。

Bootstrap在一行中只允许12个Bootstrap列。如果我们试图超过这一点，其余的列将被调整进入下一行。这个新行将再次具有12个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-md-12 text-center">
            <h1>My  First  Bootstrap Blog</h1>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-4">
            <h3>Post Title  1</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4">
            <h3>Post Title  2</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4">
            <h3>Post Title  3</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4">
            <h3>Post Title  4</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4">
            <h3>Post Title  5</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4">
            <h3>Post Title  6</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
    </div>
</div>
  </body>
</html>

平板电脑的设计

接下来我们将修改我们的代码来实现平板电脑的布局。

平板电脑可以以两种格式查看：纵向和横向。

平板电脑的横向视图被视为中等大小的显示（屏幕宽度>= 992px），我们使用col-md-*类来处理。

我们现在剩下的是纵向视图，这是一个小尺寸的显示。这可以使用 col-sm-* 类来实现。

由于我们必须在较小的显示器中实现两列布局，我们必须强制每列跨越6个Bootstrap列。这样我们在每一行中只得到两列（2*6个Bootstrap列= 12个Bootstrap列）。因此，一旦所有的12个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-md-12 text-center">
            <h1>My  First  Bootstrap Blog</h1>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  1</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  2</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  3</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  4</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  5</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  6</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
    </div>
</div>

  </body>
</html>

调整浏览器窗口大小以查看更改。

手机的设计

像平板电脑一样，手机也可以在横向和纵向模式下查看。移动设备中的横向视图使用col-sm-* 类的小尺寸显示（屏幕宽度> = 768px）。

移动设备中的纵向视图采用超小尺寸显示（屏幕宽度<768px）。

对于超小屏幕，我们必须使用col-xs 前缀的类。在这里，我们希望每个日志帖子列占用所有的12个Bootstrap列，以便我们有每行只有一个日志帖子。

我们的类将是 col-xs-12 ，所以让我们继续将这个类添加到我们的代码：

<!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-md-12 text-center">
            <h1>My  First  Bootstrap Blog</h1>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  1</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  2</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  3</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  4</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  5</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  6</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
    </div>
</div>
  </body>
</html>

以上内容是否对您有帮助：

Bootstrap 动态布局

台式机的设计

更多内容

平板电脑的设计

手机的设计

推荐文章

推荐教程

推荐课程