中文字幕精品亚洲无线码二区,国产黄a三级三级三级看三级,亚洲七七久久桃花影院,丰满少妇被猛烈进入,国产小视频在线观看网站

Bootstrap~頁面的布局

回到目錄

Bootstrap作(zuo)為支持響應(ying)式(shi)布局(ju)的一(yi)個前端插件，確實發揮(hui)著重要的作(zuo)用，無論你是(shi)在(zai)手機，平板(ban)還是(shi)ＰＣ上(shang)瀏覽網頁，都(dou)能達到不錯的效(xiao)果，這(zhe)一(yi)切一(yi)切，都(dou)是(shi)bootstrap帶給我們的！

今天主要說下(xia)頁(ye)(ye)(ye)(ye)面(mian)的布(bu)局(ju)，這是最(zui)基礎的東西(xi)了(le)，當我(wo)們設計一(yi)個站點時，應該為(wei)它設計一(yi)個全(quan)局(ju)性的統(tong)一(yi)的規(gui)范頁(ye)(ye)(ye)(ye)面(mian)，這種頁(ye)(ye)(ye)(ye)面(mian)我(wo)們叫它布(bu)局(ju)頁(ye)(ye)(ye)(ye)，而在(zai)頁(ye)(ye)(ye)(ye)面(mian)上體現出來的東西(xi)，就是布(bu)局(ju)的元(yuan)素(su)，在(zai)bootstrap里當然也是不可缺(que)少的東西(xi)。

Bootstrap的布局是一種柵格系統，即它由行和列組成，在使用時需要為頁面內容和柵格系統包裹一個 .container 容器。

一　.container 類用于(yu)固定寬度并支持(chi)響(xiang)應(ying)式布局的容(rong)器。

<div class="container">
  ...
</div>

.container-fluid 類用于(yu) 100% 寬度(du)，占據全部視口（viewport）的容(rong)器。

<div class="container-fluid">
  ...
</div>

二　柵格系統的行和列，在bootstrap里，行和列使用row和col表示，而(er)一(yi)行中最多有(you)１２個(ge)列單(dan)元(yuan)組成，col-md-1表示占用(yong)１個(ge)單(dan)元(yuan)的(de)寬度，而(er)col-md-7表示占用(yong)７個(ge)單(dan)元(yuan)的(de)寬度，它們(men)加在一(yi)起(qi)最多為１２個(ge)單(dan)元(yuan)

<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>

第二和(he)第三行顯(xian)示出(chu)來的效果類(lei)似這樣

三　嵌套列(lie)，列(lie)中還(huan)可以有列(lie)，這種嵌套我們需要把(ba)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>

效果類似于這樣

今天就說到這里，主要是(shi)大體布局的一(yi)些基礎知識(shi)。

回到目錄

posted @ 2015-07-08 16:39  張占嶺  閱讀(9398)  評論(0)    收藏  舉報