:::

3-2-1 設計導覽列

  1. BootStrap5 的導覽列:https://getbootstrap.com/docs/5.0/components/navbar
  2. 輸入 nav,選擇 bs5-navbar-defaultEnter,快速產生導覽列語法
    <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. 調整在平板以上的螢幕下,導覽列才會完整出現(手機就出現導覽列小按鈕即可)
    <nav class="navbar navbar-expand-md navbar-light bg-light">
    • .navbar-expand-md:展開選項,其中 md 是斷點(當螢幕寬度符合斷點大小時,才會執行指定之樣式
      • sm >= 576px(手機)
      • md >= 768px(平板)
      • lg >= 992px(桌機)
      • xl >= 1200px(高解析度螢幕)
  4. 調整底色為藍色,文字為白色
    <nav class="navbar navbar-expand-md navbar-dark bg-info">
  5. 調整導覽列離下方元件距離:
    <nav class="navbar navbar-expand-md navbar-dark bg-info mb-5">
  6. 調整導覽列為全螢幕
    <div class="container-fluid">
    • .container 是寬度有上限的容器(約1170px)
    • .container-fluid 是全螢幕容器
    • 一個畫面中,可以有好多個.container容器
    • 容器也可以巢狀使用(容器中還有容器)
  7. 調整導覽列標題,導覽列可以用.navbar-brand定義文字Logo
    <a class="navbar-brand" href="/">XX國小學校日誌</a>
    • 我們在 href 屬性中加入點擊Logo時要連結的檔案,例如 index.php,或直接用相對路徑,指向到網頁根目錄 /
    • 用手機觀看時,Logo部份會作為主要呈現部份,選項則會被隱藏起來
  8. 設定導覽列選項,選項放在 ul.navbar-nav 裡面:
    <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. 完成選項內容,請自訂幾個分類:
    <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. 調整搜尋框
    <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-2y 代表 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. 導覽列完語法:
    <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>

     


:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1965

計數器

今天: 1487148714871487
昨天: 1416141614161416
總計: 7340134734013473401347340134734013473401347340134