:::
10-3 內容的對齊
11. 導覽列
- BootStrap4 有內建導覽列：http://bootstrap.hexschool.com/docs/4.0/components/navbar/
- 直接照著下面的架構做即可：
<nav class="navbar navbar-expand-md"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <!--此處加入選項--> </ul> </div> </nav> -
.navbar-expand-md是指在 md 範圍以上才會直接展開選項 -
<button>中的data-target="#navbarSupportedContent"必須對應下方<div>中的id="navbarSupportedContent" - 目前就只能一層，要多層的話，須改用其他的導覽列工具。
- 若想加入一個不含子選單的選項，可用：
<li class="nav-item"> <a class="nav-link" href="#">選項</a> </li> -
若想加入一個有含子選單的選項，可用（注意 id 必須每個選項不一樣）：
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbar1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">選項1</a> <div class="dropdown-menu" aria-labelledby="navbar1"> <a class="dropdown-item" href="#">子選項1</a> <a class="dropdown-item" href="#">子選項2</a> </div> </li> -
我們可以在
<nav>中加入p-sm-0 m-sm-0讓導覽列在電腦螢幕上看起來瘦一點。<nav class="navbar navbar-expand-md p-sm-0 m-sm-0">
- 讓導覽列的選項置中，利用
.mx-auto即可（即margin-left: auto; margin-right: auto;之意）：<ul class="navbar-nav mx-auto">
