规划布局的结构

1<!doctype html>
2<html lang="zh">
3  <head>
4    <!-- 必需的元标签 -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10
11    <title>你好，世界！</title>
12  </head>
13  <body>
14    <h1>你好，世界！</h1>
15
16    <!-- 可选的 JavaScript -->
17    <!-- 先加载 jQuery，然后是 Popper.js，最后是 Bootstrap JS -->
18    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
19    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
20    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
21  </body>
22</html>

1<div class="container-fluid container bg-primary display-1"> 
2  第一栏
3</div> 
4<div class="container-fluid container bg-secondary display-1">
5  第二栏
6</div> 
7<div class="container-fluid container bg-success display-1">
8  第三栏
9</div> 
10<div class="container-fluid container bg-warning display-1">
11  第四栏
12</div> 
13<div class="container-fluid container bg-danger display-1">
14  第五栏
15</div> 
16<div class="container-fluid container bg-info display-1">
17  第六栏
18</div>