1. 背景
響應式網頁指的是可以在不同尺寸/分辨率裝置下都可以運作良好的網頁，本篇就來講解下如何使用Bootstrap建構符合标準規範的響應式網頁。
2. 建立标準HTML5頁面
首先建立一個标準的HTML5網頁，代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>boostrap-responsive</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
</body>
</html>
注意其中<!DOCTYPE html>是為了告訴浏覽器，目前文檔是HTML5文檔。
<meta http-equiv="X-UA-Compatible" content="IE=edge">告訴IE浏覽器，以盡可能高的仿真版本顯示目前網頁。所謂仿真版本，指的是IE浏覽器可以仿照運作的其他版本的IE，如下圖：
<meta name="viewport" content="width=device-width,initial-scale=1">改行代碼則訓示了頁面的初始寬度為裝置寬度，初始縮放比例為100%，這樣的話能支援網頁在螢幕較小但DPI較高的裝置(例如iPhone)上正确顯示。
3. 添加響應式内容
首先添加對Bootstrap支援。
<!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- 引入jQuery -->
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
注意Bootstrap對響應式的支援，是通過控制網格列在不同容器寬度下占據不同的列數來實作的。
當浏覽器容器寬度小于768像素時，Bootstrap會采用.col-xs-開頭的列。
當浏覽器容器寬度處于[768,992)是，将采用.col-sm-開頭的列。
當浏覽器容器寬度處于[992,1200)是，将采用.col-md-開頭的列。
當浏覽器容器寬度大于1200是，将采用.col-lg-開頭的列。
注意上面四個寬度尺寸，實際上對應的是手機、平闆、小型PC顯示器、大型PC顯示器，但是随着顯示裝置的發展，目前這樣的預設已經不再精準，需要根據實際情況來具體設定。
好的，有了上面的理論基礎，我們來實作一個可以同時支援電腦顯示器和手機顯示器的網頁，代碼如下：
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-3">
<img src="bootstrap-logo.jpg" />
</div>
</div>
</div>
按照上面的設定，當螢幕尺寸較大時，會采用.col-md-3的列顯示方式，是以每個圖檔會占據3/12容器寬度，效果如下：
.col-sm-12
4. 小結
Bootstrap實作響應式網頁的方式十分簡潔優雅，用同一套代碼，就能支援各類不同分辨率的裝置，優秀！