Getting started
Accessibility（無障礙）
Browsers and devices（瀏覽器和設(shè)備）
Build tools（構(gòu)建工具）
Contents（內(nèi)容）
Download（下載）
JavaScript
Theming Bootstrap（主題Bootstrap）
Webpack
Components: Alerts
Alerts（警報）
Components: Badges
Badges（徽章）
Components: Breadcrumb
Breadcrumb
Components: Button group
Button group（按鈕組）
Components: Buttons
Buttons（按鈕）
Components: Cards
Components: Carousel
Cards（卡）
Carousel（圓盤傳送帶）
Components: Collapse
Collapse（折疊）
Components: Dropdowns
Dropdowns（下拉菜單）
Components: Forms
Forms（表單）
Components: Input group
Input group（輸入群組）
Components: Input group
Jumbotron（廣告大屏幕）
Components: List group
List group（列表組）
Components: Modal
Modal（互動視窗）
Components: Navbar
Navbar（導航欄）
Components: Navs
Navs（導航欄）
Components: Pagination
Pagination（分頁）
Components: Popovers
Popovers（彈出框）
Components: Progress
Progress（進度條）
Components: Scrollspy
Scrollspy（滾動監(jiān)聽）
Components: Tooltips
Tooltips（提示工具）
Content
Code（代碼）
Figures（圖片區(qū)）
Images（圖片）
Reboot（重置）
Tables（表格）
Typography（排版）
Layout
Grid（網(wǎng)格）
Layout（布局）
Media object（多媒體對象）
Utilities for layout（排版通用類別）
Migration
Migrating to v4（遷移到v4）
Utilities
Borders（邊框）
Clearfix（清除浮動）
Close icon（關(guān)閉圖標）
Colors（顏色）
Display property（顯示屬性）
Embeds（內(nèi)嵌）
Flex（彈性）
Float（浮動）
Image replacement（圖像替換）
Position（位置）
Screenreaders（熒幕閱讀器）
Sizing（尺寸）
Spacing（間隔）
Text（文本）
Vertical alignment（垂直對齊）
Visibility（能見度）
?
This document uses PHP Chinese website manual Release
characters
Bootstrap 功能強大的響應式導航標題和導航欄的文檔和示例。包括對品牌，導航等的支持，包括對我們的折疊插件的支持。
怎么運行的
以下是開始使用導航欄之前需要了解的內(nèi)容：
導航欄需要用
.navbar-expand{-sm|-md|-lg|-xl}包裝.navbar的響應倒塌和顏色方案的類。
導航欄及其內(nèi)容默認為流暢的。使用可選容器限制其水平寬度。
使用我們的間距和柔性工具類來控制 navbars 中的間距和對齊。
導航欄默認情況下是響應式的，但您可以輕松修改它們來改變它。響應行為取決于我們的 Collapse JavaScript 插件。
打印時，導航欄默認為隱藏狀態(tài)。強制他們打印通過添加
.d-print到.navbar。請參閱顯示實用程序類。
確保使用
<nav>元素的可訪問性，或者如果使用更通用的元素，如<div>，請將每個導航欄添加role="navigation"為明確標識為輔助技術(shù)用戶的地標區(qū)域。
請閱讀有關(guān)支持的子組件的示例和列表。
支持的內(nèi)容
Navbars 內(nèi)置了對少數(shù)子組件的支持。根據(jù)需要選擇：
.navbar-brand為您的公司，產(chǎn)品或項目名稱。
.navbar-nav用于全高和輕量級導航（包括對下拉菜單的支持）。
.navbar-toggler用于我們的折疊插件和其他導航切換行為。
.form-inline用于任何形式控制和操作。
.navbar-text用于添加垂直居中的文本字符串。
.collapse.navbar-collapse通過父斷點來分組和隱藏導航欄內(nèi)容。
下面是一個響應式光主題導航欄中包含的所有子組件的示例，該導航欄在lg（大）斷點處自動崩潰。
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div></nav>
本例使用的顏色（bg-light）和間距（my-2，my-lg-0，mr-sm-0，my-sm-0）的工具類。
品牌
.navbar-brand可應用于大部分元素，但是錨效果最好的一些元素可能需要的工具類或自定義樣式。
<!-- As a link --><nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a></nav><!-- As a heading --><nav class="navbar navbar-light bg-light"> <span class="navbar-brand mb-0 h1">Navbar</span></nav>
將圖像添加到.navbar-brand可能總是需要自定義樣式或?qū)嵱贸绦虿拍苓m當調(diào)整大小。下面是一些要演示的示例。
<!-- Just an image --><nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" alt=""> </a></nav>
<!-- Image and text --><nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> Bootstrap </a></nav>
NAV
Navbar 導航鏈接基于我們的.nav選項和他們自己的修飾符類，并且需要使用切換器類來提供正確的響應式樣式。導航欄中的導航也將越來越占用盡可能多的水平空間，以保持導航欄內(nèi)容的安全對齊。
活動狀態(tài).active- 指示當前頁面可以直接應用于.nav-links或其直接父級.nav-item。
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div></nav>
而且因為我們?yōu)閷Ш绞褂妙?，所以如果您愿意，可以完全避免使用基于列表的方法?/p>
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Features</a> <a class="nav-item nav-link" href="#">Pricing</a> <a class="nav-item nav-link disabled" href="#">Disabled</a> </div> </div></nav>
您也可以在導航欄導航中使用下拉菜單。下拉菜單需要用于定位的纏繞元件，所以一定要使用單獨的和嵌套的元素.nav-item和.nav-link，如下所示。
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div></nav>
形式
使用.form-inline在導航欄中放置各種表單控件和組件。
<nav class="navbar navbar-light bg-light"> <form class="form-inline"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form></nav>
根據(jù)需要將內(nèi)聯(lián)表單的內(nèi)容與實用程序?qū)R。
<nav class="navbar navbar-light bg-light justify-content-between"> <a class="navbar-brand">Navbar</a> <form class="form-inline"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form></nav>
輸入組也可以工作：
<nav class="navbar navbar-light bg-light"> <form class="form-inline"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> </form></nav>
作為這些導航欄形式的一部分，也支持各種按鈕。這也是一個很好的提示，即垂直對齊工具可以用來對齊不同大小的元素。
<nav class="navbar navbar-light bg-light"> <form class="form-inline"> <button class="btn btn-outline-success" type="button">Main button</button> <button class="btn btn-sm align-middle btn-outline-secondary" type="button">Smaller button</button> </form></nav>
文本
導航欄可能會在.navbar-text幫助下包含一些文本。該類為文本字符串調(diào)整垂直對齊和水平間距。
<nav class="navbar navbar-light bg-light"> <span class="navbar-text"> Navbar text with an inline element </span></nav>
根據(jù)需要混合并匹配其他組件和實用程序。
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar w/ text</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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></nav>
配色方案
由于主題類和background-color實用程序的組合，導航導航欄從未如此簡單。選擇.navbar-light用于淺色背景色或.navbar-dark用于深色背景色。然后，使用.bg-*實用程序自定義
<nav class="navbar navbar-dark bg-dark"> <!-- Navbar content --></nav><nav class="navbar navbar-dark bg-primary"> <!-- Navbar content --></nav><nav class="navbar navbar-light" style="background-color: #e3f2fd;"> <!-- Navbar content --></nav>
容器
盡管這不是必需的，但您可以將導航欄包裝.container到一個頁面中，也可以在其中添加一個，以便僅將固定頂部導航欄或靜態(tài)頂部導航欄的內(nèi)容居中。
<div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> </nav></div>
當容器在導航欄中時，其橫向填充將在低于指定.navbar-expand{-sm|-md|-lg|-xl}類別的斷點處移除。這可以確保在導航欄折疊時，我們不會在較低視口上不必要地加倍填充。
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#">Navbar</a> </div></nav>
放置
使用我們的位置公用程序?qū)Ш綑诜胖迷诜庆o態(tài)位置。從固定到頂部，固定到底部或粘到頂部（與頁面滾動直到到達頂部，然后停留在那里）。固定導航欄使用position: fixed，這意味著他們從 DOM 的正常流動和拉可能需要自定義的 CSS（例如，padding-top上<body>），以防止重疊與其他元素。
另請注意，使用**，[在每個瀏覽器**中都不完全支持]（https://caniuse.com/#feat=css-sticky）。.sticky-top position: sticky
<nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Default</a></nav>
<nav class="navbar fixed-top navbar-light bg-light"> <a class="navbar-brand" href="#">Fixed top</a></nav>
<nav class="navbar fixed-bottom navbar-light bg-light"> <a class="navbar-brand" href="#">Fixed bottom</a></nav>
<nav class="navbar sticky-top navbar-light bg-light"> <a class="navbar-brand" href="#">Sticky top</a></nav>
響應行為
當他們的內(nèi)容在按鈕后面崩潰時，導航欄可以利用.navbar-toggler，.navbar-collapse和.navbar-expand{-sm|-md|-lg|-xl}類進行更改。結(jié)合其他實用程序，您可以輕松選擇何時顯示或隱藏特定元素。
對于永不崩潰.navbar-expand的導航欄，請在導航欄上添加該類。對于總是崩潰的導航欄，請勿添加任何.navbar-expand課程。
Toggler
Navbar 的切換器默認是左對齊的，但是它們應該像一個.navbar-brand一樣遵循一個兄弟元素，它們會自動對齊到最右邊。反轉(zhuǎn)你的標記會顛倒切換器的位置。以下是不同切換樣式的示例。
沒有.navbar-brand顯示在最低的斷點：
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div></nav>
品牌名稱顯示在左側(cè)，右側(cè)顯示切換器：
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div></nav>
在左邊有一個觸發(fā)器，右邊是品牌名稱：
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div></nav>
外部內(nèi)容
有時您想使用折疊插件觸發(fā)頁面上其他地方的隱藏內(nèi)容。因為我們的插件適用于id和data-target匹配，這很容易完成！
<div class="pos-f-t"> <div class="collapse" id="navbarToggleExternalContent"> <div class="bg-dark p-4"> <h4 class="text-white">Collapsed content</h4> <span class="text-muted">Toggleable via the navbar brand.</span> </div> </div> <nav class="navbar navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </nav></div>