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