13.1 工作原理
Bootstrap導(dǎo)航工具條（Navbar）與上一節(jié)學(xué)習(xí)的導(dǎo)航比，功能強大，且是響應(yīng)式的，結(jié)構(gòu)包括包括品牌、導(dǎo)航、表單等，以及針對折疊插件的支持。
在開始使用導(dǎo)航條之前，您需要了解以下內(nèi)容：
- 導(dǎo)航條需要使用.navbar包裝，并透過.navbar-expand{-sm|-md|-lg|-xl}給予響應(yīng)式的折疊以及使用color scheme class。
- 導(dǎo)航條預(yù)設(shè)的內(nèi)容寬度是浮動的，更改containers以不同的方式來限制水平寬度。
- 使用間距及彈性盒子通用類來控制物件在導(dǎo)航條的間隔及對齊。
- 導(dǎo)航條默認(rèn)是響應(yīng)式的，但也可以輕易的修改這個選項。
- 使用nav元素確保親和性，也可使用更通用的元素，如div。
- 通過設(shè)置aria-current=“page”于當(dāng)前頁面，或?qū)ria-current=“true”設(shè)置于群組中的當(dāng)前項目來指示目前位置。
13.2 導(dǎo)航條的結(jié)構(gòu)
13.2.1 支持的子元件
導(dǎo)航條內(nèi)置對一些對子元件的支持。根據(jù)需求可從以下選項中進行選擇：
-
navbar-brand 用于您的公司，產(chǎn)品或項目名稱。
-
navbar-nav 提供高度完整和輕便的導(dǎo)航（包括對下拉清單的支持）。
-
navbar-toggler 用于我們的折疊插件和其他navigation toggling行為。
-
間距及彈性盒子通用類 用于表單控制與行為。
-
navbar-text 用于垂直居中的文本字串。
-
.collapse.navbar-collapse 透過父層斷點來群組、隱藏導(dǎo)航條內(nèi)容。
-
添加可選的.navbar-scroll以設(shè)置最大高度并滾動擴展的navbar內(nèi)容。
以下是一個包含子元件的示例，包括在一個自動在 md 斷點處摺疊的響應(yīng)式導(dǎo)航條。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>導(dǎo)航演示</title>
</head>
<body>
<br><br>
<div class="container">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="http://www.roadlinkinfra.com"><img src="pic/logo.jpg" height="60px" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
版本
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Bootstrap 4</a></li>
<li><a class="dropdown-item" href="#">Bootstrap 5</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">早期版本</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">留言</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="關(guān)鍵詞" aria-label="Search">
<button class="btn btn-outline-success text-nowrap" type="submit">搜索</button>
</form>
</div>
</div>
</nav>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復(fù)制代碼在斷點前后顯示的導(dǎo)航如圖
點擊右側(cè)三道橫線顯示下圖，在此點擊恢復(fù)
經(jīng)過上面的例子，如果你要手寫代碼實現(xiàn)，是要花很多功夫的，現(xiàn)在簡單復(fù)制粘貼就好了。 下面我們詳細(xì)介紹一下各部分元件的功能及使用方法。
13.2.2 品牌（navbar-brand）
里面可以放置文字、圖像、圖像和文字組合，上面的例子我們放的是logo圖像。
文字
<!-- 可以放鏈接 -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- 也可以放純文本標(biāo)簽 -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>
復(fù)制代碼圖像在上面的示例中已經(jīng)用了，現(xiàn)在來個圖像和文字混合的
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/static/doc5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>
復(fù)制代碼13.2.3 導(dǎo)航
導(dǎo)航的連接建立在我們之前學(xué)習(xí)過的.nav上，并且需要使用toggler classes以建立適當(dāng)?shù)捻憫?yīng)樣式。在導(dǎo)航條中的導(dǎo)航元件會盡可能的占用水平空間，以保持您的導(dǎo)航條內(nèi)容安全對齊。
- 啟用狀態(tài)-用.active -表示當(dāng)前頁面。可直接用于.nav-link或直屬的.nav-item。
- 請注意，您應(yīng)該在.nav-link本身上添加aria-current屬性。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>導(dǎo)航演示</title>
</head>
<body>
<br><br>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">品牌</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復(fù)制代碼不使用列表的簡潔方法。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">品牌</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">首頁</a>
<a class="nav-link" href="#">功能</a>
<a class="nav-link" href="#">價格</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
復(fù)制代碼二者效果一樣
您還可以在導(dǎo)航條的導(dǎo)航元件使用下拉菜單。下拉菜單需要一個包裝元素進行定位，請確保為.nav-item和.nav-link使用單獨及嵌套的元素，如下所示。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>導(dǎo)航演示</title>
</head>
<body>
<br><br>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">品牌</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
下拉菜單
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">菜單一</a></li>
<li><a class="dropdown-item" href="#">菜單二</a></li>
<li><a class="dropdown-item" href="#">菜單三</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復(fù)制代碼13.2.4 表單
你可以將各種表單和元件放在導(dǎo)航條中，如13.2.1 中的搜索表單，navbar中的直接子元素使用flex排版，預(yù)設(shè)為justify-content: space-between，也就是兩端對齊。根據(jù)需要使用其他單星盒子類來調(diào)整此行為。
input群組也可以這樣使用。如果導(dǎo)航條整個都是表單，或者大部分是表單，則可以使用form元素作為容器并保存HTML。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>導(dǎo)航演示</title>
</head>
<body>
<br><br>
<div class="container">
<nav class="navbar navbar-light bg-light">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="請輸入用戶名" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復(fù)制代碼表單導(dǎo)航條也支持各種按鈕。這也大大的提醒了我們可以使用垂直對齊工具來對齊不同大小的元素。
<nav class="navbar navbar-light bg-light">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>
復(fù)制代碼13.2.5 文本
透過.navbar-text導(dǎo)航條可以包含一些文本。該class調(diào)整了文本字串的垂直對齊和水平間距。貌似這個用的不多，直接拿官方例子。
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
復(fù)制代碼
根據(jù)需要與其他元件和通用類別混合使用。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</div>
</nav>
復(fù)制代碼13.3 配色方案
由于主題class和background-color通用類別class的結(jié)合，主題化導(dǎo)航條從未如此簡單。從navbar-light選用淺色背景顏色，或者navbar-dark用于深色背景顏色。然后，使用.bg-*通用類別自定義。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>導(dǎo)航演示</title>
</head>
<body>
<br><br>
<div class="bd-example">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">品牌</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<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="#">關(guān)于</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="輸入關(guān)鍵詞" aria-label="Search">
<button class="btn btn-outline-light text-nowrap" type="submit">搜索</button>
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">品牌</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<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="#">關(guān)于</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="輸入關(guān)鍵詞" aria-label="Search">
<button class="btn btn-outline-light text-nowrap" type="submit">搜索</button>
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<div class="container-fluid">
<a class="navbar-brand" href="#">品牌</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<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="#">關(guān)于</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="輸入關(guān)鍵詞" aria-label="Search">
<button class="btn btn-outline-primary text-nowrap" type="submit">搜索</button>
</form>
</div>
</div>
</nav>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復(fù)制代碼更多顏色在通用類>背景顏色中查看，在前面章節(jié)表格顏色中也有相關(guān)介紹。
13.4 容器
雖然不是必需的，但您可以把導(dǎo)航條包裝在.container中，將其置中于頁面。您可以使用任意響應(yīng)式容器以更改導(dǎo)航條中內(nèi)容的顯示寬度。這部分內(nèi)容比較簡單，我就不在演示了。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
復(fù)制代碼13.5 定位
使用我們的定位通用類別將導(dǎo)航條放置在非靜態(tài)位置。選擇固定到頂部、固定到底部、或粘貼到頂部（會隨著頁面滾動，直到物件達(dá)到頂部，并停留在原處）。固定的導(dǎo)航條使用position:fixed，這意味著它們會脫離正常的DOM的文件流，并且可能需要自定義CSS（例如body上的padding-top），以防止與其他元素重疊。 還要注意.sticky-top使用position:sticky，并沒有被所有瀏覽器支持。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>導(dǎo)航演示</title>
</head>
<body>
<br><br>
<div class="container">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">默認(rèn)</a>
</div>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">固定到頂部</a>
</div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">固定到底部</a>
</div>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">粘貼到頂部</a>
</div>
</nav>
<div style="height: 600px;"></div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復(fù)制代碼向下拉動滾動條后變化
通過上面的例子我們可以看出
- 固定到頂部和固定到底部雖然在container內(nèi)，但是效果上不會受影響，其寬度超出了container限制。
- 使用了固定到頂部后，默認(rèn)導(dǎo)航條會自動排在其后。
- 粘貼到頂部會自動跟在已有可視元素后面
- 當(dāng)拖動滾定條后，固定到頂部和固定到底部位置不變，但默認(rèn)和粘貼到頂部會被拖上去。
13.6 滾動
添加.navbar-nav-scroll到 .navbar-nav （或其他navbar子組件），以在折疊的navbar的可切換內(nèi)容內(nèi)啟用垂直滾動。默認(rèn)情況下，滾動以75vh（或75%的視口高度）啟動，但您可以使用本地CSS自定義屬性（--bs-navbar-height或自定義風(fēng)格）覆蓋該屬性。在較大的視口中，當(dāng)導(dǎo)航欄展開時，內(nèi)容將顯示為默認(rèn)導(dǎo)航欄中的內(nèi)容。
請注意，當(dāng)設(shè)置overflow-y:auto（需要在此處滾動內(nèi)容）時，這種行為可能會帶來溢出的缺點，overflow-x相當(dāng)于auto，它將裁剪一些水平內(nèi)容。
以上是手冊對此內(nèi)容的解釋，啰嗦了很多，其實很簡單，直接看效果圖就好了，說白了就是強制在移動狀態(tài)下點擊三道橫線出現(xiàn)一個滾動條，俺老劉覺得這純屬多事。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
復(fù)制代碼13.7 響應(yīng)性行為
導(dǎo)航條可以使用.navbar-toggler，.navbar-collapse和.navbar-expand{-sm|-md|-lg|-xl}決定它們的內(nèi)容何時會摺疊。結(jié)合其他通用類別，您可以選擇何時顯示或隱藏特定元素。
對于不需要折疊的導(dǎo)航條，在導(dǎo)航條中加入.navbar-expand。對于總是折疊的導(dǎo)航條，不要加任何.navbar-expand class。
13.8 切換元素
導(dǎo)航條的切換元素（toggler）預(yù)設(shè)情況下會對齊左邊，但如果它們位于同層級的.navbar-brand后面，它們將自動和最右邊對齊。反轉(zhuǎn)您的標(biāo)記將對調(diào)切換元素的位置。以下是不同切換元素樣式的示例。
13.8.1 在最小斷點沒有.navbar-brand：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
復(fù)制代碼13.8.2 在最小斷點左側(cè)有一個品牌名稱，右邊是切換元素：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
復(fù)制代碼13.8.3 在最小斷點左側(cè)有一個切換元素，右邊是品牌名稱
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
復(fù)制代碼13.8.3 外部內(nèi)容
有時會需要使用折疊插件來觸發(fā)位于.navbar外的容器內(nèi)容。因為插件是透過匹配id和data-bs-target來執(zhí)行的，這將很容易完成！ 這個很有意思，給個完整代碼，自己試試看。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>導(dǎo)航演示</title>
</head>
<body>
<br><br>
<div class="container">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復(fù)制代碼今天的課程就到這里，。請關(guān)注我，及時學(xué)習(xí) 俺老劉原創(chuàng)的《Bootstrap5零基礎(chǔ)到精通》第14節(jié) Bootstrap5滑動導(dǎo)航組件使用。