Bootstrap作為支持響應式佈局的一個前端插件，確實發揮著重要的作用，無論你是在手機，平板還是ＰＣ上瀏覽網頁，都能達到不錯的效果，這一切一切，都是bootstrap帶給我們的！
今天主要說下頁面的佈局，這是最基礎的東西了，當我們設計一個站點時，應該為它設計一個全局性的統一的規範頁面，這種頁面我們叫它佈局頁，而在頁面上體現出來的東西，就是佈局的元素，在bootstrap里當然也是不可缺少的東西。
Bootstrap的佈局是一種柵格系統，即它由行和列組成，在使用時需要為頁面內容和柵格系統包裹一個.container 容器。
一.container 類用於固定寬度並支持響應式佈局的容器。
<div>...</div> .container-fluid 類用於100% 寬度，佔據全部視口（viewport）的容器。 <div>...</div>
二柵格系統的行和列，在bootstrap裡，行和列使用row和col表示，而一行中最多有１２個列單元組成，col-md-1表示佔用１個單元的寬度，而col-md-7表示佔用７個單元的寬度，它們加在一起最多為１２個單元
<div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div></div><div><div>.col-md-8</div><div>.col-md-4</div></div><div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div></div>
第二和第三行顯示出來的效果類似這樣
三嵌套列，列中還可以有列，這種嵌套我們需要把md改為sm
<div><div>Level 1: .col-sm-9<div><div>Level 2: .col-xs-8 .col-sm-6</div><div>Level 2: .col-xs-4 .col-sm-6</div></div></div></div>
效果類似於這樣
以上所述是小編給大家介紹的Bootstrap頁面佈局基礎知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！