Bootstrap 4 导航栏

导航栏是一个将商标、导航以及别的元素简单放置到一个简洁导航页头的容器代码组合，它很容易扩展，而且在折叠板插件的帮助下，它可以轻松与其它内容整合。

这些是你开始使用导航条之前需要知道的东西：

此组件的动画效果取决于prefers-reduced-motion 媒体查询. 请参阅我们的 辅助功能文档的简化动作部分.

继续阅读以获取支持的子组件的示例和列表。

Navbar导航栏内置支持少量子组件。根据需要从以下选择：:

以下是一个自动在 lg（大）断点处的自动响应轻型导航栏中包含的所有子组件的示例。

This example uses color (bg-light) and spacing (my-2, my-lg-0, mr-sm-0, my-sm-0) utility classes.

.navbar-brand 可以用于大多数元素，但对于链接最有效，因为某些元素可能需要通用样式类别class或自定义样式。

如果你喜欢，可以完全不使用列表法来做导航。

导航栏链接建立在我们的.nav上，享有使用专属的class样式，并可以使用toggler切换触发器来进行响应式切换，在导航栏中的元件，也装饰占用更多的水平空间，以保持导览列内容安全对齐。

活动状态指示：用 .active表示当前页面，可直接应用于.nav-link或 .nav-item上。

如果你喜欢（或有需要），也可以不使用ul、ol式的列（直接用A其它元素作为列表子项-译者注)。

您还可以在导航栏中使用下拉列表，下拉菜单最好使用一个菜单进行位置定位包裹，请确保使用单独的元素嵌套.nav-item 和 .nav-link，如下所示。

在导航栏中使用 .form-inline放置各种表单控制元件和组件。

根据需要将内联表单引用系统提供的内容与对齐等class样式。

还可以引用input-group输入框组控件：

有的导航中需要用到各种按钮，可以使用通用样式Class来作居中对齐处理。

可以使用.navbar-text选择器来包裹文字-这已经对文本字符串的垂直对齐、水平间距作了处理优化。

根据需要与其它元件或通用样式定义组合使用。

基于主题类class和background-color通用样式class定义，导航栏的配色方案和主题选择从未如此简单！你可以选择.navbar-light 来定义导航颜色反转（强黑白对比），也可以使用.navbar-dark用于深色背景定义，然后再引用.bg-*类通用定义来进行大小处理。

你可以把导航条包裹在一个 .container容器中，从而使之在网页中呈现居中效果（或在导航栏内部居中）--虽然这不是强制的。

When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified .navbar-expand{-sm|-md|-lg|-xl} class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.

使用系统提供的position位置间距定位通用样式可以使导航栏呈现出随浏览器滚动的效果（非固定位置），可选的流动可以包括固定在顶部、固定在底部、或粘到顶部（与页面滚动，直到顶部并停留到那里）。固定导航栏可以使用position: fixed属性，这意味着它们从DOM的正常流动和拉动可能需要自定义的CSS(如在 上定义padding-top)，以防止其重叠覆盖了其它元素。

注意：在.sticky-top 使用 position: sticky, 目前不支持所有常用浏览器。

当内容在按钮后面折叠时，导航栏可以使用 .navbar-toggler、.navbar-collapse 和 .navbar-expand{-sm|-md|-lg|-xl}的 class样式来更改，结合其它常用样式，你可以根据需要定义显示或隐藏特定元素。

對於不需要折疊的導覽列，在導覽列中加入 .navbar-expand。對於總是折疊的導覽列，不要加任何 .navbar-expand class。 对于永不崩溃.navbar-expand的导航栏，请在导航栏上添加该类。对于总是崩溃的导航栏，不要添加任何.navbar-expand类。 对于不需要折叠（隐藏）的导航栏，请在导航栏上增加.navbar-expand class样式来定义，对于总是要折叠（隐藏）的导航栏，请不要加任何的 .navbar-expand class样式。

Navbar下的Toggler是切换触发器（即手机模式下的MENU下拉项），它们默认是左对齐的。如果在它们中间定义一个同级的兄弟元素.navbar-brand，它们会自动对齐到窗口右边，反转你的品牌（LOGO或主标题）元素的位置，以下是不同切换形式（位置）的示例（需要在移动窄屏下才能看到效果）：

没有在最下最小浏览界面中定义 .navbar-brand 的样式（MENU切换按钮在默认左边）：

左侧有一个LOGO(主标题)，右边是MENU切换按钮：

右侧有一个LOGO(主标题)，左边是MENU切换按钮：

使用id 和 data-target 搭配，很容易达成：