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

上一篇：Bootstrap4 折疊 下一篇：Bootstrap4 導(dǎo)航欄

Bootstrap4 導(dǎo)航

在Bootstrap4中，可以使用.nav類來創(chuàng)建導(dǎo)航。

如果你想創(chuàng)建一個簡單的水平導(dǎo)航欄，可以在 <ul> 元素上添加 .nav類，在每個 <li> 選項上添加 .nav-item 類，在每個鏈接上添加 .nav-link 類:

實例

<ul class="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> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

運行代碼 ?

導(dǎo)航對齊方式

.justify-content-center 類設(shè)置導(dǎo)航居中顯示， .justify-content-end 類設(shè)置導(dǎo)航右對齊。

實例

<!-- 導(dǎo)航居中 --> <ul class="nav justify-content-center"> <!-- 導(dǎo)航右對齊 --> <ul class="nav justify-content-end"> </div>

運行代碼 ?

垂直導(dǎo)航

.flex-column 類用于創(chuàng)建垂直導(dǎo)航：

實例

<ul class="nav flex-column">

運行代碼 ?

選項卡

使用 .nav-tabs 類可以將導(dǎo)航轉(zhuǎn)化為選項卡。然后對于選中的選項使用 .active 類來標(biāo)記。

實例

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" 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>

運行代碼 ?

膠囊導(dǎo)航

.nav-pills 類可以將導(dǎo)航項設(shè)置成膠囊形狀。

實例

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" 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>

運行代碼 ?

導(dǎo)航等寬

.nav-justified 類可以設(shè)置導(dǎo)航項齊行等寬顯示。

實例

<ul class="nav nav-pills nav-justified">..</ul> <ul class="nav nav-tabs nav-justified">..</ul>

運行代碼 ?

膠囊下拉菜單

實例

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</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> <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>

運行代碼 ?

選項卡下拉菜單

實例

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</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> <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>

運行代碼 ?

動態(tài)選項卡

如果你要設(shè)置選項卡是動態(tài)可切換的，可以在每個鏈接上添加 data-toggle="tab" 屬性。 然后在每個選項對應(yīng)的內(nèi)容的上添加 .tab-pane 類。

如果你希望有淡入效果可以在 .tab-pane 后添加 .fade類:

實例

<!-- Nav tabs --> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active container" id="home">...</div> <div class="tab-pane container" id="menu1">...</div> <div class="tab-pane container" id="menu2">...</div> </div>

運行代碼 ?

膠囊狀動態(tài)選項卡

膠囊狀動態(tài)選項卡只需要將以上實例的代碼中 data-toggle 屬性設(shè)置為 data-toggle="pill":

實例

<!-- Nav pills --> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active container" id="home">...</div> <div class="tab-pane container" id="menu1">...</div> <div class="tab-pane container" id="menu2">...</div> </div>

運行代碼 ?
上一篇：Bootstrap4 折疊 下一篇：Bootstrap4 導(dǎo)航欄