關于作者：
- 鄭雲飛(天放), 程式員Java
- weibo：@tianFang
- 學習路線圖
bootstrap在網頁中使用
bootstrap布局
bootstrap響應式布局
由于工作需要，下班之餘，就自學了bootstrap。不瞞大家，寫這篇文章我才自學了3天bootstarp，如果你是一個bootstarp高手，就不要閱讀這篇部落格了。
bootstrap是Twitter公司裡面的開發者和設計師做出來的一套用在網頁上面的使用者界面和互動的架構，架構的意思就是把經常用的一些東西事先為你編寫好，你需要的時候可以直接去調用。比如說你想去設計頁面的布局，你需要去計算網頁的寬度，然後手工的把布局要用到的css代碼寫出來。bootstarmp結構内置了一套網格布局的系統，你隻需要在元素中使用設計好的布局相關網格的類，不需要你再去撰寫布局所使用的css代碼，再比如說，你想在網頁中出現一個按鈕，通常你需要先用圖形設計軟體去設計這樣的一個按鈕，然後再把它用html和css表示出來，那麼在網頁中使用bootstarp結構的話，我們可以直接去添加bootstarp設計好的按鈕相關的類，這樣就可以立即在網頁中出現一個漂亮的按鈕，bootstrap還允許我們去控制這個按鈕的顔色，樣式，大小等等。boostrap裡面包含了很多在網頁中經常用的一些界面的設計，表格，表單，導航欄，按鈕組，分頁器，導航路徑等等。bootstrap還提供了很多互動的小插件，比如說，對話框，下拉菜單，工具提示，頁籤等等。
這些你都可以直接去使用，隻需要按照boostrap設計好的方式，先把代碼的結構寫出來，然後在元素上面使用相應的類，剩下的事呢bootstarp全部都會為你做好。這就讓我們的工作變得非常的簡單，下面呢我們就一起來學習使用bootstarp結構。
現在你看到的就是boostrap這個項目的官方網站，這個網站的界面就是用的bootstrap這個架構來建立的，你可以把這個網站當作是bootstrap結構示範的網站，在這個網站還有bootstrap結構詳細的使用說明，我們可以先點開這個Get Started來看一下：
在這個頁面裡面提供了bootstrap的下載下傳位址，介紹了bootstrap檔案結構，bootstrap包含了那些東西，以及html模闆和一些Examples.
接下來我們點選scaffolding這個界面來看一下：
在這個界面裡面，說明了bootstrap一個内置的網格系統的使用，也就是布局網頁要用到的那個網格系統，bootstrap這個網格系統可以是響應時的，也就是如果你願意的話，你可以讓網頁根據上網裝置的螢幕分辨率，來做出相應的變化。
好，我們再看一下Base Css：
這個頁面裡面是bootstrap架構設計好的常用的css樣式，比如說基本的文字的排版，清單的樣式，表格，表單等等。
我們再打開這個Components來看一下：
這個頁面裡面介紹了網頁當中經常用的一些元件，比如說帶下拉菜單的按鈕，導航欄，頁籤等等，我們可以再看一下bootstrap架構的JavaScript插件來看一下：
那麼在這個界面裡面介紹了如何去使用bootstrap結構提供的這些JavaScript小插件，比如說對話框，下拉菜單，工具提示等等。好最後我們再看一下Customize這個菜單：