中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

上一篇：Bootstrap4 導(dǎo)航 下一篇：Bootstrap4 面包屑導(dǎo)航

Bootstrap4 導(dǎo)航欄

導(dǎo)航欄是一個將商標(biāo)、導(dǎo)航以及別的元素簡單放置到一個簡潔導(dǎo)航頁頭的的集合。在Bootstrap4中，導(dǎo)航欄的創(chuàng)建并不難，而且，可以使用各種類對其進行擴展。

我們可以使用 .navbar 類來創(chuàng)建一個標(biāo)準(zhǔn)的導(dǎo)航欄，后面緊跟: .navbar-expand-xl|lg|md|sm 類來創(chuàng)建響應(yīng)式的導(dǎo)航欄 (大屏幕水平鋪開，小屏幕垂直堆疊)。

導(dǎo)航欄上的選項可以使用 <ul> 元素并添加 class="navbar-nav" 類。 然后在 <li> 元素上添加 .nav-item 類， <a> 元素上使用 .nav-link 類:

實例

<!-- 小屏幕上水平導(dǎo)航欄會切換為垂直的 --> <nav class="navbar navbar-expand-sm bg-light"> <!-- Links --> <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>

運行代碼 ?

垂直導(dǎo)航欄

通過刪除 .navbar-expand-xl|lg|md|sm 類來創(chuàng)建垂直導(dǎo)航欄:

實例

<!-- 垂直導(dǎo)航欄 --> <nav class="navbar bg-light"> <!-- Links --> <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>

運行代碼 ?

不同顏色導(dǎo)航欄

可以使用以下類來創(chuàng)建不同顏色導(dǎo)航欄：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。

提示: 對于暗色背景需要設(shè)置文本顏色為淺色的，對于淺色背景需要設(shè)置文本顏色為深色的。

實例

<!-- 灰底黑字 --> <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> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </nav> <!-- 黑底白字 --> <nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav> <!-- 藍底白字 --> <nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

運行代碼 ?

激活和禁用狀態(tài): 可以在 <a> 元素上添加 .active 類來高亮顯示選中的選項。 .disabled 類用于設(shè)置該鏈接是不可點擊的。

品牌/Logo

.navbar-brand 類用于高亮顯示品牌/Logo:

實例

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

運行代碼 ?

如果使用圖片，可以使用 .navbar-brand 類來設(shè)置圖片自適應(yīng)導(dǎo)航欄。

實例

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

運行代碼 ?

折疊導(dǎo)航欄

通常，小屏幕上我們都會折疊導(dǎo)航欄，通過點擊來顯示導(dǎo)航選項。

要創(chuàng)建折疊導(dǎo)航欄，可以在按鈕上添加 class="navbar-toggler", data-toggle="collapse" 與 data-target="#thetarget" 類。然后在設(shè)置了 class="collapse navbar-collapse" 類的 div 上包裹導(dǎo)航內(nèi)容（鏈接）, div 元素上的 id 匹配按鈕 data-target 的上指定的 id:

實例

<nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Navbar</a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </nav>

運行代碼 ?

導(dǎo)航欄使用下拉菜單

導(dǎo)航欄上可以設(shè)置下拉菜單：

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <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> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> </ul> </nav>

運行代碼 ?

導(dǎo)航欄的表單與按鈕

導(dǎo)航欄的表單 <form> 元素使用 class="form-inline" 類來排版輸入框與按鈕：

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-success" type="submit">Search</button> </form> </nav>

運行代碼 ?

你也可以使用其他的輸入框類，如 .input-group-addon 類用于在輸入框前添加小標(biāo)簽。

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div> </form> </nav>

運行代碼 ?

導(dǎo)航欄文本

使用 .navbar-text 類來設(shè)置導(dǎo)航欄上非鏈接文本，可以保證水平對齊，顏色與內(nèi)邊距一樣。

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Links --> <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> </ul> <!-- Navbar text--> <span class="navbar-text"> Navbar text </span> </nav>

運行代碼 ?

固定導(dǎo)航欄

導(dǎo)航欄可以固定在頭部或者底部。

我們使用 .fixed-top 類來實現(xiàn)導(dǎo)航欄的固定：

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>

運行代碼 ?

.fixed-bottom 類用于設(shè)置導(dǎo)航欄固定在底部：

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav>

運行代碼 ?
上一篇：Bootstrap4 導(dǎo)航 下一篇：Bootstrap4 面包屑導(dǎo)航