bootstrap导航navbar bootstrapnavbar|Bootstrap教程

本文概述

基本导航栏

导航栏就像放置在页面顶部的导航标题。你可以根据屏幕尺寸折叠或扩展它。
你可以使用< nav class =“ navbar navbar-default”> 在页面顶部创建标准导航栏。
请参阅以下示例：

Bootstrap反向导航栏
【bootstrap导航navbar】反向导航栏提供了替代的黑色导航栏。通过将.navbar-default类更改为.navbar-inverse class，可以用于设置默认导航栏的样式。
请参阅以下示例：

具有下拉菜单的Bootstrap导航栏
你还可以添加带有导航栏的下拉菜单。以下示例为“第1页”按钮添加了一个下拉菜单。
请参阅以下示例：

Bootstrap右对齐导航栏
使用.navbar-right类可将导航栏按钮右对齐。在下面的示例中，我们在导航栏中向右侧添加“注册”和“登录”按钮。
请参阅以下示例：

基本导航栏在Bootstrap 4中，你可以根据屏幕大小扩展或折叠导航栏。使用.navbar类创建一个标准导航栏，然后创建一个响应式折叠类：.navbar-expand-xl | lg | md | sm（将导航栏垂直堆叠在超大，大，中或小屏幕上）。
要在导航栏内添加链接，请使用< ul> 元素和class =“ navbar-nav”。然后添加具有.nav-item类的< li> 元素，然后添加具有.nav-link类的< a> 元素。
例：

垂直导航栏
如果要创建垂直导航栏，请删除.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在输入字段旁边附加图标或帮助文本。你将在“引导输入”一章中了解有关这些类的更多信息。
例：

导航栏文字
.navbar-text类用于垂直对齐导航栏中的所有非链接元素。你必须确保正确的填充和文本颜色。
例：

固定导航栏
你可以将导航栏固定在页面的顶部或底部。固定的导航栏在固定位置（顶部或底部）保持可见，而不依赖于页面滚动。
顶部固定导航栏
.fixed-top类使导航栏固定在顶部。
例：

底部固定导航栏
.fixed-bottom类用于使导航栏停留在页面底部。
例：

粘性导航栏
滚动浏览时，粘性导航栏固定在页面顶部。你可以滚动此页面来查看效果。
注意：此功能在IE11和更早版本中不起作用。例：