免费AI编程助手
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>以上内容是否对您有帮助：
更多建议：