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

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

Bootstrap4 導(dǎo)航

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

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

實(shí)例

<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>

運(yùn)行代碼 ?

導(dǎo)航對(duì)齊方式

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

實(shí)例

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

運(yùn)行代碼 ?

垂直導(dǎo)航

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

實(shí)例

<ul class="nav flex-column">

運(yùn)行代碼 ?

選項(xiàng)卡

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

實(shí)例

<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>

運(yùn)行代碼 ?

膠囊導(dǎo)航

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

實(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>

運(yùn)行代碼 ?

導(dǎo)航等寬

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

實(shí)例

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

運(yùn)行代碼 ?

膠囊下拉菜單

實(shí)例

<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>

運(yùn)行代碼 ?

選項(xiàng)卡下拉菜單

實(shí)例

<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>

運(yùn)行代碼 ?

動(dòng)態(tài)選項(xiàng)卡

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

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

實(shí)例

<!-- 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>

運(yùn)行代碼 ?

膠囊狀動(dòng)態(tài)選項(xiàng)卡

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

實(shí)例

<!-- 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>

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