bootstrap進入官網下載:boostrap官網?——》http://v3.bootcss.com/
開始下載我們所需要的包：
下載成功后可以得到一個.zip的文件，解壓后我們可以得到一個包含css询件、fonts和js的文件夾
新建一個文件夾燃乍，命名為test，將剛剛三個文件夾復制到test文件夾中宛琅。然后新建一個html文件刻蟹，采用bootstrap的基礎摸板 ?如下：
柵格系統(tǒng)
Bootstrap 提供了一套響應式、移動設備優(yōu)先的流式柵格系統(tǒng)嘿辟，隨著屏幕或視口（viewport）尺寸的增加座咆，系統(tǒng)會自動分為最多12列痢艺。它包含了易于使用的預定義類，還有強大的mixin 用于生成更具語義的布局介陶。
簡介
柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局堤舒，你的內容就可以放入這些創(chuàng)建好的布局中。下面就介紹一下 Bootstrap 柵格系統(tǒng)的工作原理：
“行（row）”必須包含在.container（固定寬度）或.container-fluid（100% 寬度）中哺呜，以便為其賦予合適的排列（aligment）和內補（padding）舌缤。
通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。
你的內容應當放置于“列（column）”內某残，并且国撵，只有“列（column）”可以作為行（row）”的直接子元素。
類似.row和.col-xs-4這種預定義的類玻墅，可以用來快速創(chuàng)建柵格布局介牙。Bootstrap 源碼中定義的 mixin 也可以用來創(chuàng)建語義化的布局。
通過為“列（column）”設置padding屬性澳厢，從而創(chuàng)建列與列之間的間隔（gutter）环础。通過為.row元素設置負值margin從而抵消掉為.container元素設置的padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding剩拢。
負值的 margin就是下面的示例為什么是向外突出的原因线得。在柵格列中的內容排成一行。
柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍徐伐。例如贯钩，三個等寬的列可以使用三個.col-xs-4來創(chuàng)建。
如果一“行（row）”中包含了的“列（column）”大于 12办素，多余的“列（column）”所在的元素將被作為一個整體另起一行排列角雷。
柵格類適用于與屏幕寬度大于或等于分界點大小的設備 ， 并且針對小屏幕設備覆蓋柵格類性穿。 因此勺三，在元素上應用任何.col-md-*柵格類適用于與屏幕寬度大于或等于分界點大小的設備 ， 并且針對小屏幕設備覆蓋柵格類季二。 因此，在元素上應用任何.col-lg-*不存在揭措， 也影響大屏幕設備胯舷。
通過研究后面的實例，可以將這些原理應用到你的代碼中绊含。
媒體查詢
在柵格系統(tǒng)中桑嘶，我們在 Less 文件中使用以下媒體查詢（media query）來創(chuàng)建關鍵的分界點閾值。
/* 超小屏幕（手機躬充，小于 768px） *//* 沒有任何媒體查詢相關的代碼逃顶，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優(yōu)先的嗎讨便？） *//* 小屏幕（平板，大于等于 768px） */@media(min-width:@screen-sm-min){...}/* 中等屏幕（桌面顯示器以政，大于等于 992px） */@media(min-width:@screen-md-min){...}/* 大屏幕（大桌面顯示器霸褒，大于等于 1200px） */@media(min-width:@screen-lg-min){...}
我們偶爾也會在媒體查詢代碼中包含max-width從而將 CSS 的影響限制在更小范圍的屏幕大小之內。
@media(max-width:@screen-xs-max){...}@media(min-width:@screen-sm-min)and(max-width:@screen-sm-max){...}@media(min-width:@screen-md-min)and(max-width:@screen-md-max){...}@media(min-width:@screen-lg-min){...}
柵格參數(shù)
通過下表可以詳細查看 Bootstrap 的柵格系統(tǒng)是如何在多種屏幕設備上工作的盈蛮。
詳細的資料去bootstrap官網上查找：bootstrap起步的詳情介紹http://v3.bootcss.com/css/#grid
