Bootstrap 导航元素

2020-06-18 05:59:00易采站长站整理


结果如下所示:

导航元素中的禁用链接

该 class 只会改变 的外观,不会改变它的功能。在这里,您需要使用自定义的 JavaScript 来禁用链接。

下拉菜单

导航菜单与下拉菜单使用相似的语法。默认情况下,列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表。

带有下拉菜单的标签

向标签添加下拉菜单的步骤如下:

以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs
添加带有 .dropdown-menu class 的无序列表。

实例

带有下拉菜单的标签

HomeSVNiOSVB.Net
Java

SwingjMeterEJB分离的链接PHP


结果如下所示:

带有下拉菜单的标签

带有下拉菜单的胶囊

步骤与创建带有下拉菜单的标签相同,只是需要把 .nav-tabs class 改为 .nav-pills,如下面的实例所示:

实例

带有下拉菜单的胶囊

HomeSVNiOSVB.Net
Java

SwingjMeterEJB分离的链接PHP


结果如下所示:

带有下拉菜单的胶囊


更多导航元素组件实例
标签页与胶囊式标签页

相关文章 大家在看
描述实例
.nav nav-tabs标签页
.nav nav-pills胶囊式标签页
.nav nav-pills nav-stacked胶囊式标签页以垂直方向堆叠排列的
.nav-justified两端对齐的标签页,在大于 768px 的屏幕上,通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上,导航链接呈现堆叠样式。
.disabled禁用的标签页
标签添加下拉菜单
带下拉菜单的胶囊式标签页
.tab-content与 .tab-pane 和 data-toggle=”tab” (data-toggle=”pill” ) 一同使用, 设置标签页对应的内容随标签的切换而更改