Bootstrap是現在很流行的一套前端框架，尤其是它的自適應，真的很不錯，而且對移動設備也很友好，可以達到快速開發的效果，最近想把自己的網站弄個手機版，很果斷的就選用了bootstrap，跟大家分享一下我的學習心得，文筆水平不太好，大家見諒，看不懂的可以回復提問，我會回答的。
先去官網下載bootstrap的編譯好的必要文件http://d.bootcss.com/bootstrap-3.2.0-dist.zip（注意！！下載下來的文件目錄結構不要弄亂了，那里有個字體庫的文件，是用來顯示字體圖標的，這個以后會說到），或者你直接用他們服務器上的也可以。
首先新建一個HTML頁面，在head引入必要的文件，如下：
<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- jQuery文件。務必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
引用之后，就可以在body里面進行快速開發了，接下來是從登陸頁開始：
<div class="container"> <form action="#" class="form-signin" role="form"> <h2 class="form-signin-heading">用戶登錄</h2> <input type="text" class="form-control" placeholder="請輸入用戶名" required autofocus> <div style="height:10px;clear:both;display:block"></div> <input type="password" class="form-control" placeholder="請輸入密碼" required> <div class="checkbox"> <label> <input type="checkbox" value="remember-me"> 記住登錄狀態 </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">登錄</button> </form> </div>
接下來是解釋上面的布局：
新建個.container類的div容器，用於固定寬度並支持響應式布局。
form表單要引用bootstrap的表單樣式form-signin，然后里面的布局也要用它相應的樣式，兩個輸入框中間的div是我自己加上去的，為了防止兩個輸入框貼在一起，
input標簽里面的required屬性則是為必填的意思，如果加了這個屬性，你輸入框問空時，點擊提交會提示你輸入，
input標簽里的autofocus屬性則是自動獲得焦點，就是在頁面加載時，用戶名這個輸入框會自動獲得焦點。
當然，如果你覺得默認的樣式你不喜歡，你可以對他進行重寫，然后再配合自己的布局，加上自己的登錄邏輯，一個手機版的登錄頁面就夠很快的開發出來了，
聲明一點的是，我要做的是手機頁面，所以不需要考慮IE各種兼容的問題。
最終效果：
全部html代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>用戶登錄</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- jQuery文件。務必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <form action="#" class="form-signin" role="form"> <h2 class="form-signin-heading">用戶登錄</h2> <input type="text" class="form-control" placeholder="請輸入用戶名" required autofocus> <div style="height:10px;clear:both;display:block"></div> <input type="password" class="form-control" placeholder="請輸入密碼" required> <div class="checkbox"> <label> <input type="checkbox" value="remember-me"> 記住登錄狀態 </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">登錄</button> </form> </div> </body> </html>
等我手機版頁面做好之后，會跟大家分享部分源碼，到時候大家用手機訪問www.weixh.net時會自動跳轉到手機頁，就能夠目睹到bootstrap的效果了，今天就到這里，接下來會跟大家說說bootstrap組件的使用。