W3C:https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
Navigation Bars:
幾乎所有網頁都會有導覽列，Navbar通常都會放在網頁的最上方。

Vertical Navbar:
要用Navbar只要把<ul><li></li></ul>的ul標籤用class="navbar"的<nav>標籤圈起來就有基本效果了。
有關ul標籤:https://www.w3schools.com/tags/tag_ul.asp
為了符合BS的版:
<ul> ->class="navbar-nav"
<li> ->class="nav-item"
<a href=""> ->class="nav-link"

<nav class="navbar">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link 3</a>
        </li>
    </ul>
</nav>

這樣就是垂直的NavBar了。

Basic Navbar:
要做一般的橫列版的話，navbar的class要再加navbar-expand-xl|lg|md|sm。跟之前提過的RWD一樣，會在這些螢幕寬度以上時做出橫列，小於的話就疊起來。(EX:class="navbar-expand-sm"時，會在螢幕寬度>=576px時做出橫列導覽列)傳送門。

<nav class="navbar navbar-expand-sm">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link 3</a>
        </li>
    </ul>
</nav>

Colored Navbar:
使用bg-"color"的Class可以使navbar產生背景顏色。color可以是success(綠色)、info(淡藍色)。寫在navbar框在的後面。

<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <!--.......-->
  </ul>
</nav>

有關BS4的顏色運用可以看這裡:https://www.w3schools.com/bootstrap4/bootstrap_colors.asp

link字體顏色:
link預設是原本的藍色。navbar-dark可以把link字體顏色改成白色(這裡就是配合暗色背景的意思)，navbar-light則是改成黑色(配合亮色背景)。像上面的程式碼就是bg-light亮色背景、navbar-light黑色文字。

Active/disabled state:
可以在<li>或<a>標籤的class加入active表示目前開的頁面，disabled表示連結無效。

<li class="nav-item active">
    <a class="nav-link" href="#">Active</a>
</li>
<--........-->
<li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
</li>

Brand / Logo:
使用class="navbar-brand"來放置你的LOGO，可以是文字或圖片，通常也會加連結(<a href=""></a>)。文字的話會自動使他看起來比其他連結大(顯眼)，通常放在開頭(<nav>裡第一行)，你要插在連結中間也行@@。

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <a class="navbar-brand" href="#">Logo</a>
</nav>

也可以用在<img>裡會自動根據navbar調整圖片大小。

<a class="navbar-brand" href="#">
    <img src="bird.jpg" alt="Logo" style="width:40px;">
</a>

Collapsing The Navigation Bar:
collapse:摺疊起來，collapsible:可摺疊的；可拆卸的
就是RWD需要用的東西，螢幕寬度過小的話字會擠在一起(垂直放也一樣)。所以手機網頁右上或左上常常會有三條線的圖示，案了之後就會跳出導覽列。
使用方法:
1.ul和li標籤內容用class="collapse navbar-collapse"的<div>框起來，再給個自訂id。

<div class="collapse navbar-collapse" id="collapsibleNavbar">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <!--......-->
  </ul>
</div>

2.在<nav>標籤裡創建<button>並給予以下屬性。

• class="navbar-toggler" 套用BS
• type="button" 就是button
• data-toggle="collapse" 讓他有收起和展開的功能
• data-target="#collapsibleNavbar" 這裡就放剛剛的自訂id。

<button class="navbar-toggler" type="button" data-toggle="collapse" 
data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
</button>

3.在<button>塞一個class="navbar-toggler-icon"的span就會產生一般的按鈕圖示了，你想要自訂按鈕圖示的話，可以用img加class上去。

是否會產生collapsibleNavbar是看螢幕寬度和navbar-expand-xl|lg|md|sm你選擇哪一個，剛剛會垂直排列的話這裡就會把導覽列收進去變下拉式選單的樣子，如果你想要所有螢幕都是用collapsibleNavbar的話就把navbar-expand-xx去掉就行了

東西太多，明天再續~

第二篇:https://ithelp.ithome.com.tw/articles/10196860