Bootstrap 容器



Bootstrap 容器

Bootstrap Container

在Bootstrap中,Container用于设置内容的页边距,以处理布局的响应行为。它包含行元素,行元素是列的Container(称为网格系统)。
Container类用于创建装箱的内容。
Bootstrap中有两个Container类:

container
container-fluid

查看Container的基本布局:
<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 Container示例

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/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.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>