?
This document uses PHP Chinese website manual Release
有關(guān)如何使用 Bootstrap 包含的導(dǎo)航組件的文檔和示例。
在Bootstrap中分享一些導(dǎo)航中可用的標(biāo)記和風(fēng)格, 從基礎(chǔ)的 .nav
類中通過切換修飾符類以在可用和禁用狀態(tài)之間切換。
基礎(chǔ)的.nav
組件是用fiexbox組建的,為組建各種類型的導(dǎo)航組件提供堅(jiān)實(shí)的基礎(chǔ)。其包含一些樣式的覆蓋(用于處理列表),一些link有更大的padding并且禁用了一些基礎(chǔ)樣式。
基礎(chǔ)的.nav
組件不包含任何.active
狀態(tài)。 下面的例子就使用了這個(gè)類, 主要是證明這個(gè)特定的類不會(huì)觸發(fā)任何特殊的樣式。
舉個(gè)例子
<ul class="nav"> <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>
類在整個(gè)頁面中生效,因此你可以非常靈活的使用。像上面使用 <ul>
, 或者用你自己的<nav>
標(biāo)簽。因?yàn)檫@個(gè) .nav
標(biāo)簽使用了 display: flex
, 導(dǎo)航鏈接的動(dòng)過和導(dǎo)航的動(dòng)作是相同的,只是沒有額外標(biāo)記出而已。
舉個(gè)例子
<nav class="nav"> <a class="nav-link active" href="#">Active</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#">Disabled</a></nav>
通過改變修飾符和組件來改變.nav
的樣式。根據(jù)需要自行搭配,或者使用自己創(chuàng)建的樣式。
通過使用Flexbox來更改導(dǎo)航的水平對(duì)齊方式。默認(rèn)情況下,導(dǎo)航是左對(duì)齊的,但您可以很容易地將它們更改為居中或右對(duì)齊。
居中 .justify-content-center
:
舉個(gè)荔枝
<ul class="nav justify-content-center"> <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ōu)對(duì)齊 .justify-content-end
:
舉個(gè)栗子
<ul class="nav justify-content-end"> <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>
Stack your navigation by changing the flex item direction with the .flex-column
utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column
).
舉個(gè)梨子
<ul class="nav flex-column"> <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āng)然,不用 <ul>
也可以做到。