1.Bootstrap的基本了解：
Bootstrap，來自 Twitter，是目前最受歡迎的前端架構。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。——引用自360百科
Bootstrap将通過調整HTML元素大小來确定螢幕的寬度和響應，是以名稱響應式設計（Responsive Design）。
代碼添加到HTML頂部來将Bootstrap添加到任何應用程式：<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" target="_blank" rel="external nofollow" />
Bootstrap使用響應式網格系統，可以輕松地将元素放入行中并指定每個元素的相對寬度。下面是Bootstrap的12列網格布局如何工作的圖：
通過 .row表示行 和 .col-xs-* 這種表示寬度的列快速建立栅格布局：
2.Fluid layout
流布局是一種适應螢幕的做法。即不固定塊的寬度，而是采用百分比作為機關來确定每一塊的寬度。
開始，我們應該将所有的HTML嵌套在一個div元素中，并使用類container-fluid。
3. 圖檔：
類img-responsive img-responsive是圖檔響應式的意思，在Bootstrap架構中，有一個.img-responsive的CSS樣式。應用這個樣式以後，圖檔就會變成響應式圖檔
4.标題
類text-center 實作塊元素居中顯示
類text-primary
5.按鈕
類btn Bootstrap自己的按鈕元素樣式，通常，您的btn類的按鈕元素與其包含的文本一樣寬。
類btn-block 按鈕将伸展到填充您的頁面的整個水準空間，其後的任何元素将流入塊下方的“新行”。
類btn-primary 是您在應用程式中使用的主要顔色。 突出顯示您希望使用者采取的操作。
類btn-info 用于提醒使用者可以采取的可選操作。
類btn-danger 用于通知使用者按鈕執行破壞性操作，例如删除。
6.圖示：
Font Awesome是一個友善的圖示庫。 這些圖示是矢量圖形，以.svg檔案格式存儲。 這些圖示就像字型一樣被處理。 您可以使用像素指定其大小，并且它們将假定其父HTML元素的字型大小。
i元素最初用于制作其他元素斜體，但現在通常用于圖示。 您将Font Awesome類添加到i元素以将其轉換為圖示，例如：
7.其他：
<span> 标簽被用來組合文檔中的行内元素。前後不換行，如下
<p>Things cats <span class="text-danger">love:</span></p>
8.Bootstrap練習
Bootstrap有一個名為well的類，可以為您的列建立一個視覺深度。
轉載于:https://www.cnblogs.com/uferrman/p/7586235.html