:::

3-2-1-4 導覽列選項設定

  1. 導覽列選項用ul.navbar-nav包起來,作為選項外框:
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      各個選項
    </ul>
    
    1. me-auto:選項外框的右側距離自動調整(會將右邊元件推到最右邊),可產生「分散對齊」的效果
    2. mb-2:選項外框預設距離下方兩個距離單位
    3. mb-lg-0:選項外框當螢幕大於lg斷點時,下方無距離(也就是用桌機看時,選項會比較垂直置中一點,下方不會空太大)
    4. m代表margin
    5. e代表 margin-rightpadding-right
    6. b代表 margin-bottompadding-bottom
    7. 詳情可參考:https://bootstrap5.hexschool.com/docs/5.0/utilities/spacing/
       
  2. 每一個選項的基本形狀是:
    <li class="nav-item">
      <a class="nav-link" href="連結位置">選項</a>
    </li>

     

  3. 若是要顯示目前所在頁面,.nav-link 後可加上.active
    <li class="nav-item">
      <a class="nav-link active" href="連結位置">選項</a>
    </li>

     

  4. 若要設為不可用的選項,.nav-link 後可加上.disabled
    <li class="nav-item">
      <a class="nav-link disabled" href="連結位置">選項</a>
    </li>

     

  5. 下拉選單這裡暫時用不到,所以先略過,並完成需要選項:
    <ul class="navbar-nav me-auto mb-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" 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>
      <li class="nav-item">
        <a class="nav-link" href="#">海外交流</a>
      </li>
    </ul>
    


:::

書籍目錄

展開 | 闔起

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

計數器

今天: 4129412941294129
昨天: 5069506950695069
總計: 5134577513457751345775134577513457751345775134577