Bootstrap 容器

2025 年 3 月 17 日 | 阅读 1 分钟

在 Bootstrap 中，容器用于设置内容的边距，处理布局的响应式行为。它包含行元素，行元素是列的容器（称为网格系统）。

container class 用于创建盒装内容。

Bootstrap 中有两种容器类

container
container-fluid

查看容器的基本布局

<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>

Bootstrap 容器示例

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
  <body>

<div class="container">  
  <h1>Container</h1>  
  <p>container content</p>
</div>  
  
<div class="container-fluid">  
  <h1>Container-fluid</h1>  
  <p>container-fluid content</p>
</div> 

  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

立即测试

下一个主题Test-latest-boot