目錄
1、下載Bootstrap
2、引入Bootstrap相關的css、js
3、一個最簡單的Bootstrap頁面
4、瀏覽器支持
1、下載Bootstrap
Bootstrap官網下載地址
Bootstrap-v3.0.3下載地址
注：本教程采用Bootstrap v3.0.3版本進行演示。
下載壓縮包之后，將其解壓縮到任意目錄即可看到以下目錄結構：
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
這是最基本的Bootstrap組織形式：未壓縮版的文件可以在任意web項目中直接使用。我們提供了壓縮(bootstrap.min.*)與未壓縮 (bootstrap.*)的CSS和JS文件。字體圖標文件來自於Glyphicons。
2、引入Bootstrap相關的css、js
<!-- Bootstrap核心CSS文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"> <!-- 可選的Bootstrap主題文件(一般不用引入) --> <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css"> <!-- jQuery文件，在bootstrap.min.js之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <!-- Bootstrap核心JavaScript文件 --> <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
Bootstrap依賴jQuery
請注意，所有 JavaScript 插件都依賴 jQuery，因此jQuery必須在Bootstrap之前引入，jQuery版本需大於或等於1.9.0。點擊此可以查看Bootstrap所對應的jQuery版本。
3、一個最簡單的Bootstrap頁面
使用以下給出的這份超級簡單的HTML模版，或者修改這些案例。我們強烈建議你對這些案例按照自己的需求進行修改，而不要簡單的復制、粘貼。
<!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> </body> </html>
HTML5文檔類型說明
Bootstrap使用到的某些HTML元素和CSS屬性需要將頁面設置為HTML5文檔類型。在你項目中的每個頁面都要參照下面的格式進行設置。
<!DOCTYPE html> <html lang="zh-cn"> ... </html>
引入respond.min.js說明
Internet Explorer 8 和 9 是被支持的，然而，你要知道，很多CSS3屬性和HTML5元素 -- 例如，圓角矩形和投影 -- 是肯定不被支持的。另外，Internet Explorer 8 需要Respond.js配合才能實現對媒體查詢（media query）的支持。
引入html5shiv.min.js說明
越來越多的站點開始使用 HTML5 標簽。但是目前的情況是還有很多人在使用IE6，IE7，IE8。為了讓所有網站瀏覽者都能正常的訪問網站，解決方案就有下面兩個：
a、為網站創建多套模板，通過程序對User-Agent的判斷給不同的瀏覽器用戶顯示不同的頁面，比如優酷網就是采用的這種模式。
b、使用Javascript來使不支持HTML5的瀏覽器支持HTML標簽。目前很多網站采用的這種方式。
針對IE瀏覽器比較好的解決方案是html5shiv。htnl5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能作為父節點包裹子元素，並且不能應用CSS樣式。讓CSS 樣式應用在未知元素上只需執行 document.createElement(elementName) 即可實現。html5shiv就是根據這個原理創建的。
html5shiv的使用非常的簡單，考慮到IE9是支持html5的，所以只需要在頁面head中添加如下代碼即可：
<!--[if lt IE 9]>
<script type="text/javascript" src="scripts/html5shiv.js"></script>
<![endif]-->
4、瀏覽器支持
Bootstrap的目標是在最新的桌面和移動瀏覽器上有最佳的表現，也就是說，在較老舊的瀏覽器上可能會導致某些組件表現出的樣式有些不同，但是功能是完整的。
被支持的瀏覽器
特別注意，我們堅決支持這些瀏覽器的最新版本：
a. Chrome (Mac、Windows、iOS和Android)
b. Safari (只支持Mac和iOS版，Windows版已經基本死掉了)
c. Firefox (Mac、Windows)
d. Internet Explorer
e. Opera (Mac、Windows)
Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表現也是很不錯的，雖然我們不對其進行官方支持。