XOOPS輕鬆架 - 線上書籍

:::

PHP8入門
======

1. 主畫面部份，希望在平板以上（`md`）的網誌都可以分為兩欄，側邊欄在右側，比例約 `9:3`，容器使用有限寬度的`.container`，因此，可以寫成： 
    ```markup
    <div class="container">
      <h3>所有文章</h3>
      <div class="row">
        <div class="col-md-9">主內容區</div>
        <div class="col-md-3">側邊欄</div>
      </div>
    </div>
    ```
    
    快速完成語法：
    
     
    ```markup
    .container>h3+.row>.col-md-9+.col-md-3
    ```
    
    
    1. `. `是 class 的意思
    2. `>` 是下一層
    3. `+` 則是同一層
2. BootStrap 把畫面分成12等份，為網格之基礎，必須在容器（`<span style=""><span lang="en-US">.container</span></span>`）中才有作用 
    1. 一個頁面中可以有多個容器。
    2. 容器也可以巢狀使用（容器中還有容器）
    3. `.container `是寬度有上限的容器，`<span style=""><span lang="en-US">.container-fluid</span></span>`是全螢幕容器
    4. 容器中用`<span style=""><span lang="en-US"> .row</span></span>` 來產生一個橫列，並用`<span style=""><span lang="en-US">.col</span></span>`來指定欄位
    5. `<span style=""><span lang="en-US">.row</span></span>` 中的`<span style=""><span lang="en-US"> .col </span></span>`總和需為12，若超過12，會自動往下移
3. `.row` 是一個橫列的意思
4. `.row` 底下用`.col-md-9`、`.col-md-3`代表當呈現裝置解析度在768px以上時，會分成左邊佔9欄，右邊佔3欄之意。
5. 完整網格工具可參考：<https://bootstrap5.hexschool.com/docs/5.0/layout/grid/>

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1781

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器