📌  相关文章
📜  Bootstrap-导航栏

📅  最后修改于: 2020-10-27 06:13:35             🧑  作者: Mango

 

导航栏是Bootstrap网站的主要功能之一。导航栏是响应式“元”组件，用作您的应用程序或站点的导航标题。导航栏在移动视图中折叠，并随着可用视口宽度的增加而变为水平。导航栏的核心是网站名称和基本导航的样式。

默认导航栏

创建默认导航栏-

以下示例演示了这一点-

现场演示

响应式导航栏

要将响应功能添加到导航栏，需要折叠的内容需要使用.collapse，.navbar-collapse类包装在

中。崩溃的性质由具有.navbar-toggle类的按钮触发，然后具有两个数据元素。第一个是data-toggle ，用于告诉JavaScript如何处理按钮，第二个是data-target ，指示要切换的元素。然后使用.icon-bar类创建我们喜欢的“汉堡包”按钮。这将切换.nav-collapse
中的元素。要使用此功能，您需要包括Bootstrap Collapse Plugin 。

以下示例演示了这一点-

现场演示

导航栏中的表格

可以使用.navbar-form类，而不是使用Chapters Bootstrap Forms中默认的基于类的表单，而是使用navbar中的表单。这样可以确保表单在狭窄视口中正确的垂直对齐和折叠行为。使用对齐选项(在“组件对齐”部分中有说明)来确定它在导航栏内容中的位置。

以下示例演示了这一点-

现场演示

导航栏中的按钮

您可以使用类.navbar-btn向不位于

中的

导航栏中的文字

要将文本字符串包装在元素中，请使用.navbar-text类。通常将其与

标记一起使用以获取正确的前导和颜色。以下示例演示了这一点-

现场演示

非导航链接

如果要使用常规导航栏导航组件中未包含的标准链接，请使用navbar-link类为默认和反向导航栏选项添加适当的颜色，如以下示例所示-

现场演示

组件对齐

您可以使用实用程序类.navbar-left或.navbar-right将导航链接，表单，按钮或文本之类的组件在导航栏中左对齐或右对齐。这两个类都将沿指定方向添加CSS浮点数。以下示例演示了这一点-

现场演示

固定到顶部

Bootstrap导航栏的位置可以动态。默认情况下，它是一个块级元素，根据其在HTML中的位置进行定位。使用一些帮助程序类，您可以将其放置在页面的顶部或底部，也可以使其随页面静态滚动。

如果要将导航栏固定在顶部，请将.navbar-fixed-top类添加到.navbar类。以下示例演示了这一点-

为防止导航栏位于页面正文中的其他内容之上，请在标记中至少添加50像素的填充或尝试使用您自己的值。

现场演示

固定在底部

如果要将导航栏固定在页面底部，请将.navbar-fixed-bottom类添加到.navbar类。以下示例演示了这一点-

现场演示

静态顶

要创建随页面滚动的导航栏，请添加.navbar-static-top类。此类不需要将填充添加到。

现场演示

反向导航栏

要创建具有黑色背景和白色文本的反向导航栏，只需将.navbar-inverse类添加到.navbar类中，如以下示例所示-

为防止导航栏位于页面正文中的其他内容之上，请在标记中至少添加50像素的填充或尝试使用您自己的值。

现场演示