一、需要添加 HTML5 doctype
二、爲了讓 Bootstrap 開發的網站對移動設備友好，確保適當的繪製和觸屏縮放，可以在head 之中添加 如下代碼：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
其中： width=device-width 表示寬度是設備屏幕的寬度。
initial-scale=1 表示初始的縮放比例。
shrink-to-fit=no 自動適應手機屏幕的寬度。
三、需要一個容器元素來包裹網站的內容，可以使用以下兩個容器類：
（1）.container 類用於固定寬度並支持響應式佈局的容器。
（2）.container-fluid 類用於 100% 寬度，佔據全部視口（viewport）的容器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>測試</title>
<!-- 引入bootsrap -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>這是一些文本。</p>
</div>
<div class="container-fluid">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>使用了 .container-fluid，100% 寬度，佔據全部視口（viewport）的容器。</p>
</div>
</body>
</html>
四、Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分爲最多 12 列（1/4/6/8/12列）。Bootstrap 4 的網格系統是響應式的，列會根據屏幕大小自動重新排列。Bootstrap 網格系統如何在不同設備上工作的：
| 超小設備 <576px |
平板 ≥576px |
桌面顯示器 ≥768px |
大桌面顯示器 ≥992px |
超大桌面顯示器 ≥1200px |
|
|---|---|---|---|---|---|
| 容器最大寬度 | None (auto) | 540px | 720px | 960px | 1140px |
| 類前綴 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| 列數量和 | 12 | ||||
| 間隙寬度 | 30px （一個列的每邊分別 15px） | ||||
| 可嵌套 | Yes | ||||
| 列排序 | Yes | ||||