Bootstrap 4 中文开发手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
目录 搜索
Getting started Accessibility（无障碍） Browsers and devices（浏览器和设备） Build tools（构建工具） Contents（内容） 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（滚动监听） Components: Tooltips Tooltips（提示工具） Content Code（代码） Figures（图片区） Images（图片） Reboot（重置） Tables（表格） Typography（排版） Layout Grid（网格） Layout（布局） Media object（多媒体对象） Utilities for layout（排版通用类别） Migration Migrating to v4（迁移到v4） Utilities Borders（边框） Clearfix（清除浮动） Close icon（关闭图标） Colors（颜色） Display property（显示属性） Embeds（内嵌） Flex（弹性） Float（浮动） Image replacement（图像替换） Position（位置） Screenreaders（荧幕阅读器） Sizing（尺寸） Spacing（间隔） Text（文本） Vertical alignment（垂直对齐） Visibility（能见度）

©
本文档使用PHP中文网手册发布

文字

Bootstrap 功能强大的响应式导航标题和导航栏的文档和示例。包括对品牌，导航等的支持，包括对我们的折叠插件的支持。

怎么运行的

以下是开始使用导航栏之前需要了解的内容：

  • 导航栏需要用.navbar-expand{-sm|-md|-lg|-xl}包装.navbar的响应倒塌和颜色方案的类。

  • 导航栏及其内容默认为流畅的。使用可选容器限制其水平宽度。

  • 使用我们的间距和柔性工具类来控制 navbars 中的间距和对齐。

  • 导航栏默认情况下是响应式的，但您可以轻松修改它们来改变它。响应行为取决于我们的 Collapse JavaScript 插件。

  • 打印时，导航栏默认为隐藏状态。强制他们打印通过添加.d-print到.navbar。请参阅显示实用程序类。

  • 确保使用

请阅读有关支持的子组件的示例和列表。

支持的内容

Navbars 内置了对少数子组件的支持。根据需要选择：

  • .navbar-brand为您的公司，产品或项目名称。

  • .navbar-nav用于全高和轻量级导航（包括对下拉菜单的支持）。

  • .navbar-toggler用于我们的折叠插件和其他导航切换行为。

  • .form-inline用于任何形式控制和操作。

  • .navbar-text用于添加垂直居中的文本字符串。

  • .collapse.navbar-collapse通过父断点来分组和隐藏导航栏内容。

下面是一个响应式光主题导航栏中包含的所有子组件的示例，该导航栏在lg（大）断点处自动崩溃。

本例使用的颜色（bg-light）和间距（my-2，my-lg-0，mr-sm-0，my-sm-0）的工具类。

品牌

.navbar-brand可应用于大部分元素，但是锚效果最好的一些元素可能需要的工具类或自定义样式。

将图像添加到.navbar-brand可能总是需要自定义样式或实用程序才能适当调整大小。下面是一些要演示的示例。

NAV

Navbar 导航链接基于我们的.nav选项和他们自己的修饰符类，并且需要使用切换器类来提供正确的响应式样式。导航栏中的导航也将越来越占用尽可能多的水平空间，以保持导航栏内容的安全对齐。

活动状态.active- 指示当前页面可以直接应用于.nav-links或其直接父级.nav-item。

而且因为我们为导航使用类，所以如果您愿意，可以完全避免使用基于列表的方法。

您也可以在导航栏导航中使用下拉菜单。下拉菜单需要用于定位的缠绕元件，所以一定要使用单独的和嵌套的元素.nav-item和.nav-link，如下所示。

形式

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

根据需要将内联表单的内容与实用程序对齐。

输入组也可以工作：

作为这些导航栏形式的一部分，也支持各种按钮。这也是一个很好的提示，即垂直对齐工具可以用来对齐不同大小的元素。

文本

导航栏可能会在.navbar-text帮助下包含一些文本。该类为文本字符串调整垂直对齐和水平间距。

根据需要混合并匹配其他组件和实用程序。

配色方案

由于主题类和background-color实用程序的组合，导航导航栏从未如此简单。选择.navbar-light用于浅色背景色或.navbar-dark用于深色背景色。然后，使用.bg-*实用程序自定义

容器

尽管这不是必需的，但您可以将导航栏包装.container到一个页面中，也可以在其中添加一个，以便仅将固定顶部导航栏或静态顶部导航栏的内容居中。

当容器在导航栏中时，其横向填充将在低于指定.navbar-expand{-sm|-md|-lg|-xl}类别的断点处移除。这可以确保在导航栏折叠时，我们不会在较低视口上不必要地加倍填充。

放置

使用我们的位置公用程序将导航栏放置在非静态位置。从固定到顶部，固定到底部或粘到顶部（与页面滚动直到到达顶部，然后停留在那里）。固定导航栏使用position: fixed，这意味着他们从 DOM 的正常流动和拉可能需要自定义的 CSS（例如，padding-top上），以防止重叠与其他元素。

另请注意，使用**，[在每个浏览器**中都不完全支持]（https://caniuse.com/#feat=css-sticky）。.sticky-topposition: sticky

响应行为

当他们的内容在按钮后面崩溃时，导航栏可以利用.navbar-toggler，.navbar-collapse和.navbar-expand{-sm|-md|-lg|-xl}类进行更改。结合其他实用程序，您可以轻松选择何时显示或隐藏特定元素。

对于永不崩溃.navbar-expand的导航栏，请在导航栏上添加该类。对于总是崩溃的导航栏，请勿添加任何.navbar-expand课程。

Toggler

Navbar 的切换器默认是左对齐的，但是它们应该像一个.navbar-brand一样遵循一个兄弟元素，它们会自动对齐到最右边。反转你的标记会颠倒切换器的位置。以下是不同切换样式的示例。

没有.navbar-brand显示在最低的断点：

品牌名称显示在左侧，右侧显示切换器：

在左边有一个触发器，右边是品牌名称：

外部内容

有时您想使用折叠插件触发页面上其他地方的隐藏内容。因为我们的插件适用于id和data-target匹配，这很容易完成！
上一篇： 下一篇：