1. 首頁 > 生活百科 > >

bootstrap底部導航欄 bootstrap遮罩層( 二 )

生活百科


</body>
</html>
3. 它是怎么組成一個布局？
首先Bootstrap是一個響應式布局框架，我們都知道一個框架里面必有一個容納其他內容的東西，這個東西叫容器 。在Bootstrap中我們用的是container class（在Bootstrap中我們通常在class這個類中寫樣式），在這個容器中,它是有固定寬度（但是所謂固定寬度并不允許我們設置容器的寬度，而是bootstrap內部通過bootstrap.css根據屏幕寬度利用媒體查詢，幫我們設置了固定寬度，為什么設置寬度的時候都要以百分比來設置因為能充分的能夠體現自適應的 。這是容器的使用圖片我們看一下：
我們知道一個完美布局不單單是主要有一個簡單的容器，如果我們這樣想純屬于貶低它 。在此不得不提到一個名字：柵格系統也可以叫做網格系統，我們可以看看網格系統整個布局圖片：
我們可以根據這張布局圖片這屬于container的內部布局，網格系統包括 row(行)，column（列），在圖片1中我們可以看到行和列 。
首先row行我們包括十二個column列相當于十二個網格（每個網格對應一個列）,如圖二所示每個column列也有十二個網格，每個網格能放十二個column列 。一般的網頁布局都是按著 2-8-2（column列）來給網頁布局的！我們也可以用不同的布局來表達自己的邏輯！
下面這張圖是在768像素到992像素之間的通用的布局 *** col-md-1，這個（1）代表的是一個網格相當一個列（column） 。
以下就是Bootstrap的幾點各種屏幕自適應響應式的樣式大家了解一下對今后的網頁布局很有幫助！
4. 它是用來干什么的？
隨著各種計算機的問世，屏幕大小，網頁界面不適合屏幕的，這讓我們這些前端工程師很是頭痛 。
Bootstrap的問世解決了很多的問題，首先我們的頁面不用更換，它可以適用各種屏幕的大小（我們可以不用擔心不同的屏幕換不同的網頁的問題） 。通過框架布局我們可以迅速的做出一個既美觀邏輯又清晰的網頁來 。我們來看一下完整的Bootstrap頁面！
下面的網頁是正常大小 。
下面的網頁是屏幕縮小的大小
Bootstrap能調用CSS、JavaScript對沒有美工處理的網站修飾充分的展現出他們的美感與簡約的動感 。
Bootstrap大多數被用來做一些內容不是太復雜的門戶網站，比如 *** 、京東、管理系統等頁面在PC端和移動端根據屏幕的大小，來自適應的網頁布局（一般來說PC端的網站比移動端的網站內容比較多，這跟屏幕大小的自適應有關） 。使網民更加的對網站有印象，讓網民對網頁一目了然，就知道這個網頁具體想表達哪些內容 。這樣的網頁一般應用于簡約的門戶網站 。
5. Bootstrap的局限性
總體來說bootstrap不太適合做那些頁面布局很復雜，內容較多，特別炫酷的網站，因為bootstrap已經寫好CSS的樣式了所以引用bootstrap要改css樣式，組件，插件太多了，還容易造成代碼混亂，還不如直接不用更快，特別是對于新手前端工程師是來說更不推薦使用，但是它很適合做那些企業內部的網站，一般此類網站不會對頁面的布局沒有過多的要求，只要體現主要功能即可，bootstrap就完全是切合此類網站的特性 。
作者贈言：
想要學習Bootstrap的機靈鬼們，還在猶豫什么？如此實用簡單的框架難道還不值得我們青睞嗎？
如果有什么不對的地方歡迎大家指出，畢竟本人才疏學淺，歡迎大家指出問題所在，相互學習共贏互利！
世上無難事只怕有心人，世上本沒路人走的多了就有了，期待我們更上一層樓！

推薦閱讀