線上書籍

Home

XOOPS 新版佈景設計

一、 BootStrap的版面布局（網格）
  1. Bootstrap 是建立在12欄網格、佈局和元件之上。
  2. Bootstrap 須使用HTML5 doctype，所有網頁開頭都要有<!DOCTYPE html>
二、 BootStrap的固定版面布局 container＋row
  1. 固定布局，可先用<div class="container"></div>做出一個寬度約螢幕畫面90%並置中的網頁容器。
  2. 接著，用<div class="row"></div>畫出一個橫向區域（一行），再用<div class="span數"></div>將一行分成數欄。
  3. 可巢狀，即<div class="span數"></div>中可以有<div class="row"></div>，但其子row裡面的span數總和，不得大於父span數。
  4. 沒有嚮應式。可視視窗在低於767px 寬度下，列會變成流動且垂直堆疊。 <div class="container"> <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div> </div>
三、 BootStrap的流動版面布局container-fluid＋row-fluid
  1. 流動布局，可先用<div class="container-fluid"></div>做出滿版的網頁容器。
  2. 接著，用<div class="row-fluid"></div>畫出一個橫向區域（一行），再用<div class="span數"></div>將一行分成數欄（總和12欄）。
  3. 可巢狀，即<div class="span數"></div>中可以有<div class="row-fluid"> </div>，其子row-fluid裡面又是12欄，和固定的row不同。 <div class="container-fluid"> <div class="row-fluid"> <div class="span4">...</div> <div class="span8">...</div> </div> </div>
四、 利用offset可以跳過幾個欄位： <div class="row-fluid"> <div class="span4">...</div> <div class="span4 offset4">...</div> </div>