一、boostrap是做什麼用的，我們需要用它來做什麼？
bootstrap就是乙個框架集合，集合我們常用的工程元件。讓我們不用做重複性質的工作。比如它封裝了常用的導航樣式、按鈕樣式、輪播圖等等。我們需要做的是引入boostrap然後利用現有的功能元件，組合成我們想要的效果。
二、 bootstrap的組成部分介紹
預置排版樣式
按鈕樣式
**樣式
表單樣式
樣式輔助工具類
**樣式
柵格系統
響應式工具類
三、bootstrap的基本的模板，用的時候注意每個引入的js、css樣式的路徑需要更改，根據自己的檔案位置，更改路徑。每次用複製貼上就可以。剛開始學習最好不使用壓縮版本，這樣方便我們檢視原始碼。
三、對於這些功能我們怎麼使用很多人不知道如何下手。其實我們只要知道它怎麼用就可以，但是我們還是需要認真看一下原始碼以了解它內部的機制是什麼。比如說柵格系統。
3.1分析container就相當於整個網頁的版心。那麼我們在用的時候，對照一下原始碼就很好理解 container的實現方法
.container
@media (min-width: 768px)
}@media (min-width: 992px)
}@media (min-width: 1200px)
}.container-fluid
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12
.col-xs-12
.col-xs-11
.col-xs-10
.col-xs-9
.col-xs-8
.col-xs-7
.col-xs-6
.col-xs-5
.col-xs-4
.col-xs-3
.col-xs-2
.col-xs-1
.col-xs-pull-12
.col-xs-pull-11
.col-xs-pull-10
.col-xs-pull-9
.col-xs-pull-8
.col-xs-pull-7
.col-xs-pull-6
.col-xs-pull-5
.col-xs-pull-4
.col-xs-pull-3
.col-xs-pull-2
.col-xs-pull-1
.col-xs-pull-0
.col-xs-push-12
.col-xs-push-11
.col-xs-push-10
.col-xs-push-9
.col-xs-push-8
.col-xs-push-7
.col-xs-push-6
.col-xs-push-5
.col-xs-push-4
.col-xs-push-3
.col-xs-push-2
.col-xs-push-1
.col-xs-push-0
.col-xs-offset-12
.col-xs-offset-11
.col-xs-offset-10
.col-xs-offset-9
.col-xs-offset-8
.col-xs-offset-7
.col-xs-offset-6
.col-xs-offset-5
.col-xs-offset-4
.col-xs-offset-3
.col-xs-offset-2
.col-xs-offset-1
.col-xs-offset-0
@media (min-width: 768px)
.col-sm-12
.col-sm-11
.col-sm-10
.col-sm-9
.col-sm-8
.col-sm-7
.col-sm-6
.col-sm-5
.col-sm-4
.col-sm-3
.col-sm-2
.col-sm-1
.col-sm-pull-12
.col-sm-pull-11
.col-sm-pull-10
.col-sm-pull-9
.col-sm-pull-8
.col-sm-pull-7
.col-sm-pull-6
.col-sm-pull-5
.col-sm-pull-4
.col-sm-pull-3
.col-sm-pull-2
.col-sm-pull-1
.col-sm-pull-0
.col-sm-push-12
.col-sm-push-11
.col-sm-push-10
.col-sm-push-9
.col-sm-push-8
.col-sm-push-7
.col-sm-push-6
.col-sm-push-5
.col-sm-push-4
.col-sm-push-3
.col-sm-push-2
.col-sm-push-1
.col-sm-push-0
.col-sm-offset-12
.col-sm-offset-11
.col-sm-offset-10
.col-sm-offset-9
.col-sm-offset-8
.col-sm-offset-7
.col-sm-offset-6
.col-sm-offset-5
.col-sm-offset-4
.col-sm-offset-3
.col-sm-offset-2
.col-sm-offset-1
.col-sm-offset-0
}@media (min-width: 992px)
.col-md-12
.col-md-11
.col-md-10
.col-md-9
.col-md-8
.col-md-7
.col-md-6
.col-md-5
.col-md-4
.col-md-3
.col-md-2
.col-md-1
.col-md-pull-12
.col-md-pull-11
.col-md-pull-10
.col-md-pull-9
.col-md-pull-8
.col-md-pull-7
.col-md-pull-6
.col-md-pull-5
.col-md-pull-4
.col-md-pull-3
.col-md-pull-2
.col-md-pull-1
.col-md-pull-0
.col-md-push-12
.col-md-push-11
.col-md-push-10
.col-md-push-9
.col-md-push-8
.col-md-push-7
.col-md-push-6
.col-md-push-5
.col-md-push-4
.col-md-push-3
.col-md-push-2
.col-md-push-1
.col-md-push-0
.col-md-offset-12 {
margin-left: 100%;
3.4已上**比較長，需要我們簡單看一下就可以理解，在本例中的樣式實現的原理。我們可以看到，bootstrap中所有的類都是什麼類，都是公共類，我們如何想使用這個功能非常的簡只需要在每乙個類名後面加上什麼？加上需要效果的類名就可以。
col-xs-3
col-xs-9
按鈕
Bootstrap入門基礎
最近需要做乙個簡單的web頁面。考慮到前端經驗不足，為了快速產出，同時專案只是乙個工具，對專案沒有什麼要求，所以我選擇了bootstrap這個框架作為web框架。寫從零 學習 bootstrap 的初衷 讓我們先從bootstrap的最簡單的模板開始 讓我們一行行的來看 我用 代表解釋 代表這是ht...
Bootstrap基礎入門
一 bootstrap簡介 二 排版屬性 三 布局模式 四 查詢 五 柵格系統 一 bootstrap簡介 二 排版屬性 lead 使段落突出顯示 small 設定小文字為父文字的85 大小 text left 設定文字左對齊 text center 設定文字居中對齊 text reght 設定文字...
bootstrap入門使用
1.bootstrap使用簡單模板 container類用於固定寬度並支援響應式布局的容器。兩邊有留白 container fluid類用於 100 寬度，佔據全部視口 viewport 的容器。查詢 超小螢幕 手機，小於 768px 沒有任何 查詢相關的 因為這在 bootstrap 中是預設的 ...