官網下載

在這里我還是要推薦下我自己建的web前端開發(fā)學習群：731669587，群里都是學web前端開發(fā)的，如果你正在學習前端，小編歡迎你加入，今天分享的這個案例已經上傳到群文件，大家都是軟件開發(fā)黨，不定期分享干貨（只有前端軟件開發(fā)相關的），包括我自己整理的一份2018最新的前端進階資料和高級開發(fā)教程，歡迎進階中和進想深入前端的小伙伴。

這個是必須要引入的東西，都給寫好了，直接在官網復制就ok，但是他們的連接都是網絡地址，需要改一下，自己所放那些文件的本地地址

這里面的東西，我們需要導入到我們的html項目中

要找到這個導入

導入之后的結果是這樣的額

至此下載及導入工作就完成了，使用BootStrap需要一個基本模板，需要在這個基本模板的基礎之上進行開發(fā)

Bootstrap基本模板

BootStrap

移動設備上的viewport就是設備的屏幕上能用來顯示我們的網頁的那一塊區(qū)域，

如果不設置meta viewport標簽，那么移動設備上瀏覽器默認的寬度值為800px，980px，1024px等這些，總之是大于屏幕寬度的。但帶來的后果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區(qū)域的寬度是比這個默認的viewport的寬度要小的，這里的寬度所用的單位px都是指css中的px，它跟代表實際屏幕物理像素的px不是一回事。

在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css 中的像素就是設備的物理像素。但實際情況卻并非如此，css中的像素只是一個抽象的單位，在不同的設備或不同的環(huán)境中，css中的1px所代表的設備物理像素是不同的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，如 iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術的發(fā)展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。其他品牌的移動設備也是這個道理。例如安卓設備根據屏幕像素密度可分為 ldpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五花八門，安卓設備上的一個css像素相當于多少個屏幕物理像素，也因設備的不同而不同，沒有一個定論。

該meta標簽的作用是讓當前viewport的寬度等于設備的寬度，同時不允許用戶手動縮放。也不允許用戶縮放不同的網站有不同的要求，但讓 viewport的寬度等于設備的寬度，這個應該是大家都想要的效果，如果你不這樣的設定的話，那就會使用那個比屏幕寬的默認viewport，也就是說會出現橫向滾動條。

設置瀏覽器視口寬度為設備理想寬度

每個移動設備瀏覽器中都有一個理想的寬度，這個理想的寬度是指css中的寬度，跟設備的物理寬度沒有關系，在css中，這個寬度就相當于100%的所代表的那個寬度。我們可以用meta標簽把viewport的寬度設為那個理想的寬度，如果不知道這個設備的理想寬度是多少，那么用device- width這個特殊值就行了

至此準備工作基本完成，下面進行使用BootStrap重寫購物網站首頁，要做網站首頁，關鍵在于布局，前面用table進行過布局，然后有用div+css進行布局，現在使用BootStrap進行布局

BootStrap官方提供了兩個容器，一個是container，還有一個是container-fluid，我們在用div的時候只用在div上寫上class=“這兩個樣式之一”就可以使用這兩個樣式了，當然這兩個樣式還是有些區(qū)別的。

這里有兩個div，分別給他們設置不同的class，可以看有出這兩個樣式有和不同，還有一點這官方給定的樣式沒有border，所以這里自己寫一下，為了觀看方便

效果是這樣的，這是二者的區(qū)別

這個是官方給定的container的樣式，如果對這個不滿意，我們不要更改這個，而是在《style》中重寫這個，注意《style》要在link引入之后，只有這樣才能覆蓋掉官方給定的，達到修改的目的

BootStrap主要給定全局css，組件，以及javascript插件，我們用到這方幾方面內容的時候可以直接copy過來，因為官方給了大量的實例，非常方便，非常詳細

柵格系統(tǒng)

Bootstrap的布局柵格系統(tǒng)原理

1柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內容就可以放入這些創(chuàng)建好的布局中。

2“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。也就是說行必須寫在class為.container （固定寬度）或 .container-fluid （100% 寬度）的div下

3通過“行（row）”在水平方向創(chuàng)建一組“列（column），創(chuàng)建一行，那么效果就相當于創(chuàng)建一列

4你的內容應當放置于“列（column）”內，并且，只有“列（column）”可以作為行（row）的直接子元素

5類似 .row 和 .col-xs-4 等這種預定義的類，官方都給定了固定的樣式，可以用來快速創(chuàng)建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創(chuàng)建語義化的布局

6通過為“列（column）”設置 padding 屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為 .row 元素設置負值 margin 從而抵消掉為 .container 元素設置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。

7負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行

8柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創(chuàng)建。

9如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。

10柵格類適用于與屏幕寬度大于或等于分界點大小的設備，并且針對小屏幕設備覆蓋柵格類。因此，在元素上應用任何 .col-md-* 柵格類適用于與屏幕寬度大于或等于分界點大小的設備，并且針對小屏幕設備覆蓋柵格類。因此，在元素上應用任何 .col-lg-* 不存在，也影響大屏幕設備。

我們通過柵格系統(tǒng)可以實現在不同大小設備上顯示不同的頁面布局，還可以讓在不同大小設備上讓一些東西不顯示，這就是響應式布局，這些官方已經給定，想要什么效果就把官方給定的class添加就ok，具體實現我們不用關心

class=".col-xs-4 .col-sm-6"這個意思是這個在超小屏幕上占4列，在小屏幕上占六列，至于其它的大小的頁面則沒有任何效果，所以一般我們要對所有大小的屏幕都進行布局設計，防止其他大小頁面網站不能友好顯示

這個也比較常用，比如頁面內容太多，在pc端正常顯示，而在手機端我們需要讓一些沒有太多意義的內容隱藏掉，那么我們可以使用這些class來完成隱藏操作。

布局的時候要使用行還有列來基本布局，至于列在各種設備上占多大，還有列在什么設備上隱藏，需要以上的一些clas來搭配使用，這些事基本的布局操作，至于除了布局之外的一些表單之內的，官方也給提供了實例，直接copy然后修改一下就ok了。

下面重寫購物網站首頁

效果

通過代碼可以看出這行的設計，首先改行寫在了容器中，其次，行class=row，列class=好多，列的具體情況就是，在超小屏幕手機中每列占四，在平板屏幕中第一列占4，第二列占5，第三列占3，其他的頁面尺寸就不多說了，這些都是根據不同大小的頁面如何才能顯示的很好來一點一點試的，還有一個在第二列中class=hidden-xs這個意思就是說在最小屏幕上這個div就不要顯示了，隱藏，相當于代碼刪掉一個效果。還有一個圖片設置了高度，這在實際開發(fā)中是不存在的，因為實際中圖片大小應該是正合適的，還有一個列div設置了padding，這個效果就是使得登陸注冊購物車距離上面遠一點，能夠達到居中的而效果，如果不寫則默認貼著上面，這是官方給定的效果，我們可以重寫，達到覆蓋的效果。