Bootstrap 导航栏

导航栏就像导航头，放在页面顶部。您可以根据屏幕大小折叠或展开它。

您可以使用 <nav class="navbar navbar-default"> 在页面顶部创建一个标准的导航栏。

请看这个例子

Bootstrap 反色导航栏

反色导航栏提供了一个替代的黑色导航栏。可以通过将 .navbar-default class 更改为 .navbar-inverse class 来对默认导航栏进行样式设置。

请看这个例子

带有下拉菜单的 Bootstrap 导航栏

您还可以添加带有导航栏的下拉菜单。以下示例为“页面 1”按钮添加了下拉菜单。

请看这个例子

Bootstrap 右对齐导航栏

使用 .navbar-right class 将导航栏按钮右对齐。在以下示例中，我们在导航栏的右侧添加了“注册”和“登录”按钮。

请看这个例子

基本导航栏

在 Bootstrap 4 中，您可以根据屏幕大小扩展或折叠导航栏。标准导航栏使用 .navbar 类创建，后跟一个响应式折叠类：.navbar-expand-xl|lg|md|sm（在超大、大、中或小屏幕上垂直堆叠导航栏）。

要在导航栏内添加链接，请使用带有 class="navbar-nav" 的 <ul> 元素。然后添加带有 .nav-item 类，后跟带有 .nav-link 类的 <a> 元素的 <li> 元素。

示例

垂直导航栏

如果您想创建一个垂直导航栏，请删除 .navbar-expand-xl|lg|md|sm 类。

示例

彩色导航栏

您可以使用任何 .bg-color 类来更改导航栏的背景颜色（.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger、.bg-secondary、.bg-dark 和 .bg-light）。

注意：使用 .navbar-dark 类将白色文本颜色添加到导航栏中的所有链接，或者使用 .navbar-light 类添加黑色文本颜色。

示例

品牌 / 标志

.navbar-brand 类用于突出显示您页面的品牌/徽标/项目名称。

示例

如果您在图像上使用 .navbar-brand 类，Bootstrap 4 将自动设置图像样式以适合导航栏。

示例

导航栏表单和按钮

带有 class="form-inline" 的 <form> 元素用于并排组合输入和按钮。

示例

您还可以使用其他输入类，例如 .input-group-addon，以在输入字段旁边附加图标或帮助文本。您将在 Bootstrap 输入章节中了解有关这些类的更多信息。

示例

导航栏文本

.navbar-text 类用于垂直对齐导航栏内不是链接的任何元素。您必须确保适当的填充和文本颜色。

示例

固定导航栏

您可以使导航栏固定在页面顶部或底部。固定导航栏保持在固定位置（顶部或底部）可见，而不依赖于页面滚动。

顶部固定导航栏

.fixed-top 类使导航栏固定在顶部。

示例

底部固定导航栏

.fixed-bottom 类用于使导航栏保持在页面底部。

示例

粘性导航栏

当您滚动经过时，粘性导航栏会固定在页面顶部。您可以通过滚动此页面来查看效果。

注意：此功能在 IE11 及更早版本中不起作用。

示例