XOOPS輕鬆架

PHP8入門
======

1. BootStrap5 的導覽列：<https://getbootstrap.com/docs/5.0/components/navbar>
2. 輸入 `nav`，選擇 `bs5-navbar-default` 按 <kbd>Enter</kbd>，快速產生導覽列語法 
    ```markup
    <nav class="navbar navbar-expand-sm navbar-light bg-light">
        <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavId" aria-controls="collapsibleNavId"
          aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavId">
          <ul class="navbar-nav me-auto mt-2 mt-lg-0">
            <li class="nav-item">
              <a class="nav-link active" href="#" aria-current="page">Home <span class="visually-hidden">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
              <div class="dropdown-menu" aria-labelledby="dropdownId">
                <a class="dropdown-item" href="#">Action 1</a>
                <a class="dropdown-item" href="#">Action 2</a>
              </div>
            </li>
          </ul>
          <form class="d-flex my-2 my-lg-0">
            <input class="form-control me-sm-2" type="text" placeholder="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>
    ```
3. 調整在平板以上的螢幕下，導覽列才會完整出現（手機就出現導覽列小按鈕即可） 
    ```markup
    <nav class="navbar navbar-expand-md navbar-light bg-light">
    ```
    
    
    - `.navbar-expand-md`：展開選項，其中 `md `是斷點（<span style="background-color:#FFFF00;">當螢幕寬度符合斷點大小時，才會執行指定之樣式</span>） 
        - <span style=""><span lang="en-US">`sm `>= 576px</span></span>（手機）
        - <span style=""><span lang="en-US">`md `>= 768px</span></span>（平板）
        - <span style=""><span lang="en-US">`lg `>= 992px</span></span>（桌機）
        - <span style=""><span lang="en-US">`xl `>= 1200px（高解析度螢幕）</span></span>
4. 調整底色為藍色，文字為白色 
    ```markup
    <nav class="navbar navbar-expand-md navbar-dark bg-info">
    ```
    
    
    - `.navbar-dark`：設定導覽列為深色背景（此時文字會是白色），相反設定為 `.navbar-light`（此時文字會是深色）
    - `.bg-info`：設定背景色，顏色設定有這幾種：<https://bootstrap5.hexschool.com/docs/5.0/utilities/colors/#background-color>
5. 調整導覽列離下方元件距離： 
    ```markup
    <nav class="navbar navbar-expand-md navbar-dark bg-info mb-5">
    ```
    
    
    - `m` 代表 `margin`（邊界）
    - `b` 代表 `bottom `的縮寫（下方）；`t` 代表上方 `top `的縮寫
    - `mb-5 `就是下邊界加入5個距離單元
    - 詳情可參考：<https://bootstrap5.hexschool.com/docs/5.0/utilities/spacing/>
6. 調整導覽列為全螢幕 
    ```markup
    <div class="container-fluid">
    ```
    
    
    - `.container` 是寬度有上限的容器（約1170px）
    - `.container-fluid` 是全螢幕容器
    - 一個畫面中，可以有好多個`.container`容器
    - 容器也可以巢狀使用（容器中還有容器）
7. 調整導覽列標題，導覽列可以用`.navbar-brand`定義文字Logo 
    ```markup
    <a class="navbar-brand" href="/">XX國小學校日誌</a>
    ```
    
    
    - 我們在` href` 屬性中加入點擊Logo時要連結的檔案，例如 `index.php`，或直接用相對路徑，指向到網頁根目錄` /`
    - 用手機觀看時，Logo部份會作為主要呈現部份，選項則會被隱藏起來
8. 設定導覽列選項，選項放在 `ul.navbar-nav` 裡面： 
    ```markup
    <ul class="navbar-nav me-auto mt-2 mt-lg-0">
      各個選項
    </ul>
    
    ```
    
    
    1. `me-auto`：選項外框的右側距離自動調整（會將右邊元件推到最右邊），可產生「分散對齊」的效果
    2. `mt-2`：選項距離上方兩個距離單位
    3. `mt-lg-0`：選項外框當螢幕大於 lg 斷點時，上方無距離（也就是用桌機看時，選項會比較垂直置中一點，上方不會空太大） 
        1. `e` 代表右邊，end 的縮寫（左邊即 `s`，start 的縮寫）
        2. 詳情可參考：<https://bootstrap5.hexschool.com/docs/5.0/utilities/spacing/>
9. 完成選項內容，請自訂幾個分類： 
    ```markup
    <ul class="navbar-nav me-auto mt-2 mt-lg-0">
      <li class="nav-item">
        <a class="nav-link active" href="#">校園日誌</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">榮譽榜</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">媒體新聞</a>
      </li>
    </ul>
    ```
    
    
    - 若是要顯示目前所在頁面，`.nav-link` 後可加上 `.active`
10. 調整搜尋框 
    ```markup
    <form class="d-flex my-2 my-lg-0">
      <input class="form-control me-sm-2" type="text" placeholder="搜尋文章">
      <button class="btn btn-warning my-2 my-sm-0 text-nowrap" type="submit">搜尋</button>
    </form>
    ```
    
    
    - 這個搜尋框目前尚不完整，等系統做完再來改它，暫時修改 `placeholder`（佔位提示）屬性為中文即可
    - 調整搜尋按鈕顏色為 `btn-warning`，使之稍微明顯一點。
    - 此外，加上 `. text-nowrap` 讓中文字不會被換行
    - 其中 `my-2` 的 `y` 代表 Y 軸，也就是上下方之意；`x` 代表 X 軸，就是左右邊之意
    - `.d-flex` 等同於 `display: flex;` 的意思，flex可參考：<https://wcc723.github.io/css/2017/07/21/css-flex/>
    - `d` 工具可參考：<https://bootstrap5.hexschool.com/docs/5.0/utilities/display/>
11. 導覽列完語法： 
    ```markup
    <nav class="navbar navbar-expand-md navbar-dark bg-info mb-5">
        <div class="container-fluid">
        <a class="navbar-brand" href="/">XX國小學校日誌</a>
        <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavId" aria-controls="collapsibleNavId"
          aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavId">
          <ul class="navbar-nav me-auto mt-2 mt-lg-0">
            <li class="nav-item">
              <a class="nav-link active" href="#">校園日誌</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">榮譽榜</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">媒體新聞</a>
            </li>
          </ul>
          <form class="d-flex my-2 my-lg-0">
            <input class="form-control me-sm-2" type="text" placeholder="搜尋文章">
            <button class="btn btn-warning my-2 my-sm-0 text-nowrap" type="submit">搜尋</button>
          </form>
        </div>
      </div>
    </nav>
    ```

書籍目錄

展開 | 闔起

快速登入

進階搜尋

計數器

今天：
昨天：
總計：

主內容區域

MarkDown

左邊區域內容

書籍目錄

快速登入

右邊區域內容

計數器

頁尾區域