📌  相关文章
📜  Bootstrap-导航元素

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

 

Bootstrap为样式化导航元素提供了一些不同的选项。它们都共享相同的标记和基类.nav 。 Bootstrap还提供了一个帮助程序类，以共享标记和状态。交换修饰符类可在每种样式之间切换。

表格导航或标签

创建选项卡式导航菜单-

  • 从基本无序列表开始，其基类为.nav
  • 添加类.nav-tabs 。

以下示例演示了这一点-

现场演示
Tabs Example

药丸导航

基本药

要将标签转变为药丸，请按照上述相同的步骤操作，请使用.nav-pills类而不是.nav-tabs 。

以下示例演示了这一点-

现场演示
Pills Example

堆叠药丸

您可以使用.nav-stacked类与.nav，.nav-pills类一起垂直堆叠药丸。

以下示例演示了这一点-

现场演示
Vertical Pills Example

合理导航

您可以使用.nav-justified类和.nav，.nav-tabs或.nav，.nav-pills分别在宽度大于768px的屏幕上制作与父级宽度相同的标签或药片。在较小的屏幕上，导航链接被堆叠。

以下示例演示了这一点-

现场演示
Justified Nav Elements Example

禁用链接

对于每个.nav类，如果添加.disabled类，它将创建一个灰色链接，该链接也会禁用：hover状态，如以下示例所示-

现场演示
Disabled Link Example

此类只会更改的外观，而不会更改其功能。在此处使用自定义JavaScript禁用链接。

下拉菜单

导航菜单与下拉菜单共享相似的语法。默认情况下，您具有一个列表项，该列表项具有一个锚以及一些数据属性，以触发带有.dropdown-menu类的无序列表。

带有下拉菜单的标签

要将下拉列表添加到选项卡-

  • 从基本无序列表开始，其基类为.nav
  • 添加类.nav-tabs 。
  • 现在添加一个带有.dropdown-menu类的无序列表。
现场演示
Tabs With Dropdown Example

滴丸

要对药丸执行相同的操作，只需将.nav-tabs类与.nav-pills互换，如以下示例所示。

现场演示
Pills With Dropdown Example