Bootstrap~頁面的佈局

回到目錄html

Bootstrap做爲支持響應式佈局的一個前端插件,確實發揮着重要的做用,不管你是在手機,平板仍是PC上瀏覽網頁,都能達到不錯的效果,這一切一切,都是bootstrap帶給咱們的!前端

今天主要說下頁面的佈局,這是最基礎的東西了,當咱們設計一個站點時,應該爲它設計一個全局性的統一的規範頁面,這種頁面咱們叫它佈局頁,而在頁面上體現出來的東西,就是佈局的元素,在bootstrap裏固然也是不可缺乏的東西。bootstrap

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

一 .container 類用於固定寬度並支持響應式佈局的容器。ui

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

.container-fluid 類用於 100% 寬度,佔據所有視口(viewport)的容器。spa

<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改成smcode

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

效果相似於這樣htm

今天就說到這裏,主要是大致佈局的一些基礎知識。

回到目錄

相關文章
相關標籤/搜索