Bootstrap 导航栏.docx
- 文档编号：29547259
- 上传时间：2023-07-24
- 格式：DOCX
- 页数：19
- 大小：17.66KB
Bootstrap 导航栏.docx
《Bootstrap 导航栏.docx》由会员分享，可在线阅读，更多相关《Bootstrap 导航栏.docx（19页珍藏版）》请在冰豆网上搜索。
Bootstrap导航栏
Bootstrap导航栏
导航栏是一个很好的功能，是Bootstrap网站的一个突出特点。
导航栏在您的应用或网站中作为导航页头的响应式基础组件。
导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。
在Bootstrap导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。
默认的导航栏
创建一个默认的导航栏的步骤如下：
向
向上面的元素添加role="navigation"，有助于增加可访问性。
向
这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有class.nav、.navbar-nav的无序列表即可。
下面的实例演示了这点：
DOCTYPEhtml>
Java
尝试一下»
结果如下所示：
默认的导航栏
响应式的导航栏
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有classes.collapse、.navbar-collapse的
折叠起来的导航栏实际上是一个带有class.navbar-toggle及两个data-元素的按钮。
第一个是data-toggle，用于告诉JavaScript需要对按钮做什么，第二个是data-target，指示要切换到哪一个元素。
三个带有class.icon-bar的创建所谓的汉堡按钮。
这些会切换为.nav-collapse
为了实现以上这些功能，您必须包含Bootstrap折叠（Collapse）插件。
下面的实例演示了这点：
DOCTYPEhtml>
data-target="#example-navbar-collapse">
Java
尝试一下»
结果如下所示：
响应式的导航栏
导航栏中的表单
导航栏中的表单不是使用Bootstrap表单章节中所讲到的默认的class，它是使用.navbar-formclass。
这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。
使用对齐方式选项（这将在组件对齐方式部分进行详细讲解）来决定导航栏中的内容放置在哪里。
下面的实例演示了这点：
DOCTYPEhtml>
尝试一下»
结果如下所示：
导航栏中的表单
导航栏中的按钮
您可以使用class.navbar-btn向不在
导航栏按钮
尝试一下»
结果如下所示：
导航栏中的按钮
导航栏中的文本
如果需要在导航中包含文本字符串，请使用class.navbar-text。
这通常与
标签一起使用，确保适当的前导和颜色。
下面的实例演示了这点：
DOCTYPEhtml>
《贝的故事》教案4.docx
