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 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。

默认的导航栏

创建一个默认的导航栏的步骤如下:

下面的实例演示了这点:

   Bootstrap 实例 - 默认的导航栏    

结果如下所示:

默认的导航栏

响应式的导航栏

为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes.collapse、.navbar-collapse

中。折叠起来的导航栏实际上是一个带有 class.navbar-toggle及两个 data- 元素的按钮。第一个是data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是data-target,指示要切换到哪一个元素。三个带有 class.icon-bar 创建所谓的汉堡按钮。这些会切换为.nav-collapse
中的元素。为了实现以上这些功能,您必须包含 Bootstrap 折叠(Collapse)插件。

下面的实例演示了这点:

   Bootstrap 实例 - 响应式的导航栏    

结果如下所示:

响应式的导航栏

导航栏中的表单

导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class,它是使用.navbar-formclass。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项(这将在组件对齐方式部分进行详细讲解)来决定导航栏中的内容放置在哪里。

下面的实例演示了这点:

   Bootstrap 实例 - 导航栏中的表单    

结果如下所示:

导航栏中的表单

导航栏中的按钮

您可以使用 class.navbar-btn向不在

中的

结果如下所示:

导航栏中的按钮

导航栏中的文本

如果需要在导航中包含文本字符串,请使用 class.navbar-text。这通常与

标签一起使用,确保适当的前导和颜色。下面的实例演示了这点:

   Bootstrap 实例 - 导航栏中的文本    

结果如下所示:

导航栏中的文本

非导航链接

如果您不想在常规的导航栏导航组件内使用标准的链接,那么请使用 classnavbar-link来为默认的和倒转的导航栏选项添加适当的颜色,如下面的实例所示:

   Bootstrap 实例 - 非导航链接    

结果如下所示:

非导航链接

组件对齐方式

您可以使用实用工具 class.navbar-left.navbar-right向左或向右对齐导航栏中的导航链接、表单、按钮或文本这些组件。这两个 class 都会在指定的方向上添加 CSS 浮动。下面的实例演示了这点:

   Bootstrap 实例 - 组件对齐方式    

结果如下所示:

组件对齐方式

固定到顶部

Bootstrap 导航栏可以动态定位。默认情况下,它是块级元素,它是基于在 HTML 中放置的位置定位的。通过一些帮助器类,您可以把它放置在页面的顶部或者底部,或者您可以让它成为随着页面一起滚动的静态导航栏。

如果您想要让导航栏固定在页面的顶部,请向.navbar class添加 class.navbar-fixed-top。下面的实例演示了这点:

为了防止导航栏与页面主体中的其他内容的顶部相交错,请向 标签添加至少 50 像素的内边距(padding),内边距的值可以根据您的需要进行设置。
   Bootstrap 实例 - 固定到顶部    

结果如下所示:

固定到顶部

固定到底部

如果您想要让导航栏固定在页面的底部,请向.navbar class添加 class.navbar-fixed-bottom。下面的实例演示了这点:

   Bootstrap 实例 - 固定到底部    

结果如下所示:

固定到底部

静态的顶部

如需创建能随着页面一起滚动的导航栏,请添加.navbar-static-topclass。该 class 不要求向 添加内边距(padding)。

   Bootstrap 实例 - 静态的顶部    

结果如下所示:

静态的顶部

倒置的导航栏

为了创建一个带有黑色背景白色文本的倒置的导航栏,只需要简单地向.navbarclass 添加.navbar-inverseclass 即可,如下面的实例所示:

为了防止导航栏与页面主体中的其他内容的顶部相交错,请向 标签添加至少 50 像素的内边距(padding),内边距的值可以根据您的需要进行设置。
   Bootstrap 实例 - 倒置的导航栏    

结果如下所示:

倒置的导航栏
Previous article: Next article: