風格一：
【代碼】
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" 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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(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="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
【效果】
PC端：
移動端：
這是一個官方的例子，接下來對它做如下解釋：
nav ：在創建一個導航欄時，你需要把它放在nav標籤裏，目的是爲了確保親和性，除此之外，如果你想在導航欄裏添加一些輔助樣式，可以在外面包一個div標籤，然後指定額外的輔助樣式，比如：
<div class="navigation">
<nav>
...
</nav>
</div>
navbar ：該類用於創建一個標準的導航欄，去掉該類整體佈局都會亂掉。
navbar-expand-lg ：該類用於設置響應式摺疊斷點。什麼意思呢，比方說，就用navbar-expand-lg，那麼當屏幕尺寸小到 lg 斷點時，菜單就會被摺疊，而如果使用其它類似的，比方說navbar-expand-md，那麼只有當屏幕尺寸小於 md 斷點時，菜單纔會被摺疊。刪除該類，那麼導航欄將變爲垂直排列。
navbar-brand ：該類用於裝飾你的網站名字，或者說商標。
緊接着是一個button按鈕，爲什麼這裏會有一個button呢？其實，這個button，設置的就是當導航欄被摺疊時可以通過點擊打開導航欄的那個按鈕。
navbar-toggler ：該類修飾button按鈕，如果不加該類，那麼你的button按鈕會很難看。另外，它還定義了摺疊插件的一些樣式和行爲。
data-toggle="collapse" ：可以看到在button按鈕中有這麼一個屬性，該屬性用於設置button的行爲，即單擊一次打開導航欄，再單擊一個關閉導航欄，如果不設置該屬性，那麼你的button按鈕即使被點擊了也將毫無反應。
data-target="#navbarSupportedContent" ：該屬性用於設置button按鈕需要打開的導航欄，它的值爲一個id，你會發現該id剛好是下面的導航欄的id，所以button按鈕才能打開它。如果不設置該值，那麼你的button按鈕將形同虛設。
其實，你的button按鈕裏面只要有以上這兩個屬性，外加一個navbar-toggler就可以了，剩餘的其它屬性加不加都可，不會影響總體樣式和功能，你自己看着辦。
navbar-toggler-icon : 這個設置的其實就是按鈕裏面的那三條槓，沒有它的話，按鈕就只是一個普通的按鈕了，很醜。
接着就是導航欄的主體部分。這裏用了一個div標籤控制整體樣式。
collapse ：該類定義了導航欄在屏幕尺寸小於斷點的初始狀態下是否會被隱藏。什麼意思呢，對於屏幕尺寸大於斷點的情況，該類沒什麼用，對於屏幕尺寸小於斷點的情況，如果加上這個類，那麼初始狀態下導航欄是被摺疊的狀態，如果不加該類，那麼初始狀態下導航欄是未被摺疊的狀態，當然不管加不加該類，都不影響導航欄之後因爲單擊按鈕而被隱藏或者顯示這一功能，因爲按鈕不會被隱藏。
navbar-collapse：該類定義了導航欄在屏幕尺寸大於斷點的初始狀態下是否會被隱藏。如果不加該類，那麼在大於斷點的情況下，導航欄會被隱藏，但小於斷點的情況不受影響。另外，如果不加該類，那麼在大於斷點的情況下，導航欄就真的被隱藏了，因爲這時按鈕也會被隱藏，所以無法通過任何行爲來顯示導航欄。
navbar-nav ：該類用於全高度的輕量級導航，包括對下拉菜單的支持，如果不加該類，那麼你的導航欄將可能會是這樣：
mr-auto：即 margin-right:auto。
nav-item & nav-link ：都是控制每一項的樣式的。
sr-only ：
有時候 UI 上會出現一些僅供視覺識別的元素，比如說“漢堡包菜單按鈕”，只有視力正常的人才能清楚辨識這些元素的作用。而殘障人士，比如弱勢或盲人是不可能知道這些視覺識別元素是什麼的。他們上網使用的是屏幕閱讀器，也就是 screen reader（sr），屏幕閱讀器需要找到能辨識的文本說明然後“讀”出來給用戶聽。問題是圖形元素怎麼可能“讀出來”呢？因此我們還要寫上這些元素的文本說明，但是又不需要展示給普通用戶看到，於是加上 sr-only的意義就在於能保證屏幕閱讀器正確讀取且不會影響 UI 的視覺呈現。
鏈接：https://www.cnblogs.com/xiaoxiaoyao/p/8629474.html
dropdown & dropdown-menu & dropdown-item ：下拉菜單。注意需要設置 data-toggle=“dropdown”。
dropdown-divider ：下拉菜單分割線。
form-inline ：用於任何表單控制元件和操作。
my-2 ：m即margin，y即y軸，my-2表示margin的上下邊距均爲2。
form-control：表單樣式。
btn btn-outline-success：button樣式。