1.Helloword
仍然從偉大的helloword開始，想要實現bootstrap樣式的helloword：
1、導入核心庫bootstrap.css,或其壓縮版bootstrap.min.css。
2、bootstrap基於jQuery因此在引入bootstrap.js之前先要引入jquery。如此環境配置完畢。源代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>helloword</title>
<meta charset="utf-8"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>2、柵格
bootstrap將每行分爲12個柵格，這樣div的定義變得更爲規範方便，我們不需要自己計算div的大小，只需要決
定給它幾個柵格的位置即可。源代碼如下：
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 10px #444, inset -1px 1px 1px #444;">
<p>第一列</p>
</div>
<div class="col-md-6 col-lg-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二列 </p>
</div>
</div>
</div>首先，bootstrap所有的組件都在容器內工作，因此，代碼第一行的container是必須聲明的。class=”row”表明我要創建行，而我在行裏設置了兩列，列用class=”col-md-6 col-lg-4”來聲明，其中md是設備的大小共有四級：
- xs:超小型設備（移動設備）
- sm:小型設備
- md:中型設備
- lg:大型設備
如此聲明實現跨瀏覽器顯示，即兼容不通大小的設備，當我使用的是中型設備那麼行被分爲6：6的兩列，當使用大型設備時行分爲4：8的兩列。
3、柵格shandow
*box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;”*div陰影設置，inset顧名思義即使插入、使頁面有沉入感，兩個inset分別對方格左、下，右、上進行設置。前兩個px表示邊框寬度，第三個表示陰影深度。效果圖如下：
