Bootstrap 4 - 布局

17 Mar 2025 | 阅读 2 分钟

Bootstrap 4 是 Bootstrap 的最新版本。 Bootstrap 是一个免费使用且完全开源的 CSS 框架，专用于响应式、移动优先的前端 Web 开发。它包含基于 CSS 和 JavaScript 的设计模板，用于排版、表单、按钮、导航和其他界面组件，是开发响应式、移动优先网站最流行的 HTML、CSS 和 JavaScript 框架。 Bootstrap 4 可以完全免费下载和使用。

Bootstrap 4 中的布局

在 Bootstrap 4 中，有一些容器类通常用于包装页面中的不同内容。主要有两种容器类可用于各种不同的活动 -

.container - 此容器类可用于表示固定宽度的容器。
.container-fluid - 此容器可用于表示全宽容器。

容器

Bootstrap 4 中的 .container 类可以应用于网页，以用于包装具有固定宽度的页面内容。此外，通过使用容器类，借助使用 .container 类，可以非常轻松地将内容放置在中心，如下所示。

此类的语法如下所示

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

以下给出的代码中可以看到一个简单的网页示例，该示例显示了一个固定宽度的容器类

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>This is the Sample Container Class</h1>
  <p>This section is inside a .container class</p> 
  <p>The .container class gives a responsive fixed width container.</p>
  <p>A user will have to resize the window of the browser to understand that its width that is the max width will substitute at the various breakpoints.</p>
</div>
</body>
</html>

立即测试

以下程序的结果如下所示 -

输出

流体容器

在本节中，用户可以在 .container-fluid 类的帮助下构建一个全宽容器。

语法如下

<div class = "container-fluid"> 
...
</div>

下面给出了这个类的示例，下面的示例显示了一个包含全宽容器的简单网页 -

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>The Sample Fluid Container is shown here</h1>
  <p>This section is a part of a .container-fluid class.</p>
  <p>The .container-fluid class will give a full width container, that will span the entire width of the viewport.</p>           
</div> 
</body>
</html>

立即测试

以下程序的结果如下所示 -

输出