directory search
Bootstrap 基础教程 Bootstrap 环境安装 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概览 Bootstrap 按钮 Bootstrap 表单 Bootstrap 表格 Bootstrap 代码 Bootstrap 辅助类 Bootstrap 排版 Bootstrap 图片 Bootstrap 网格系统 Bootstrap 网格系统实例:堆叠的水平 Bootstrap 网格系统实例:手机、平板电脑、台式电脑 Bootstrap 网格系统实例:中型和大型设备 Bootstrap 响应式实用工具 Bootstrap 布局组件 Bootstrap Well Bootstrap 按钮下拉菜单 Bootstrap 按钮组 Bootstrap 标签 Bootstrap 超大屏幕(Jumbotron) Bootstrap 导航栏 Bootstrap 导航元素 Bootstrap 多媒体对象(Media Object) Bootstrap 分页 Bootstrap 徽章(Badges) Bootstrap 进度条 Bootstrap 警告(Alerts) Bootstrap 列表组 Bootstrap 面板(Panels) Bootstrap 面包屑导航(Breadcrumbs) Bootstrap 输入框组 Bootstrap 缩略图 Bootstrap 下拉菜单(Dropdowns) Bootstrap 页面标题(Page Header) Bootstrap 字体图标(Glyphicons) Bootstrap 插件 Bootstrap 按钮(Button) Bootstrap 标签页(Tab) Bootstrap 插件概览 Bootstrap 弹出框(Popover) Bootstrap 附加导航(Affix) Bootstrap 滚动监听(Scrollspy) Bootstrap 过渡效果(Transition) Bootstrap 警告框(Alert) Bootstrap 轮播(Carousel) Bootstrap 模态框(Modal)插件 Bootstrap 提示工具(Tooltip) Bootstrap 下拉菜单(Dropdown) Bootstrap 折叠(Collapse) Bootstrap 附录 Bootstrap CSS编码规范 Bootstrap HTML编码规范 Bootstrap UI 编辑器
characters

Bootstrap 导航元素


本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类.nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class,可以在不同的样式间进行切换。

表格导航或标签

创建一个标签式的导航菜单:

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

下面的实例演示了这点:

   Bootstrap 实例 - 标签式的导航菜单    

标签式的导航菜单

结果如下所示:

标签式的导航菜单

胶囊式的导航菜单

基本的胶囊式导航菜单

如果需要把标签改成胶囊的样式,只需要使用 class.nav-pills代替.nav-tabs即可,其他的步骤与上面相同。

下面的实例演示了这点:

   Bootstrap 实例 - 基本的胶囊式导航菜单    

基本的胶囊式导航菜单

结果如下所示:

基本的胶囊式导航菜单

垂直的胶囊式导航菜单

您可以在使用 class.nav、.nav-pills的同时使用 class.nav-stacked,让胶囊垂直堆叠。

下面的实例演示了这点:

   Bootstrap 实例 - 垂直的胶囊式导航菜单    

垂直的胶囊式导航菜单

结果如下所示:

垂直的胶囊式导航菜单

两端对齐的导航

您可以在屏幕宽度大于 768px 时,通过在分别使用.nav、.nav-tabs.nav、.nav-pills的同时使用 class.nav-justified,让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上,导航链接会堆叠。

下面的实例演示了这点:

   Bootstrap 实例 - 两端对齐的导航元素    

两端对齐的导航元素




结果如下所示:

两端对齐的导航元素

禁用链接

对每个.navclass,如果添加了.disabledclass,则会创建一个灰色的链接,同时禁用了该链接的:hover状态,如下面的实例所示:

   Bootstrap 实例 - 导航元素中的禁用链接    

导航元素中的禁用链接



结果如下所示:

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

下拉菜单

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

带有下拉菜单的标签

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

  • 以一个带有 class.nav的无序列表开始。
  • 添加 class.nav-tabs
  • 添加带有.dropdown-menuclass 的无序列表。
   Bootstrap 实例 - 带有下拉菜单的标签    

带有下拉菜单的标签

结果如下所示:

带有下拉菜单的标签

带有下拉菜单的胶囊

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

   Bootstrap 实例 - 带有下拉菜单的胶囊    

带有下拉菜单的胶囊

结果如下所示:

带有下拉菜单的胶囊
Previous article: Next article: