Tad 教材網 - 線上書籍

:::

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 寬度下，列會變成流動且垂直堆疊。 ```
  <pre class="brush:xml;">
  <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不同。 ```
  <pre class="brush:xml;">
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span4">...</div>
      <div class="span8">...</div>
    </div>
  </div>
  ```
 
### 四、 利用offset可以跳過幾個欄位：

```
<pre class="brush:xml;">
<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset4">...</div>
</div>
```

:::