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 寬度下，列會變成流動且垂直堆疊。 ```
    
    <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>
```

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Fmail.tad0616.cp22.secserverpros.com%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D978

快速登入

書籍目錄

展開 | 闔起

線上使用者

74人線上 (8人在瀏覽線上書籍)

會員: 0

訪客: 74

更多…

MarkDown

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者