JS组件引导程序导航条使用方法详解

导航条是在您的应用或网站中作为导航标头的响应式元组件。

1、默认的导航条

导航条在移动设备上可以折叠（并且可开可关),且在可用的视口宽度增加时变为水平展开模式定制折叠模式与水平模式的阈值根据你所放在导航条上的内容的长度，也许你需要调整导航条进入折叠模式和水平模式的阈值。通过改变@网格-浮动-断点变量的值或加入您自己的媒体查询半铸钢钢性铸铁(铸造半钢)代码均可实现你的需求。第一步：最外面的容器航行标签，并添加导航条样式类，表示这里面属于导航条

nav class=' nav bar nav bar-默认值'角色='导航'/导航效果：

第二步：增加页眉

nav class=' nav bar nav bar-默认值'角色='导航' div class='导航条-标题'按钮类型=' button ' class=' nav bar-toggle ' data-toggle=' collapse ' data-target=' # bs-example-nav bar-collapse-1 ' span class=' Sr-only ' toggle导航/span class=' icon-bar '/span class=' icon-bar '/span class=' icon-bar '/span/button a href=' # ' class=' nav bar-brand '品牌/a /div /nav按钮标签里嵌套了三个跨度的图标。然后给与导航条-切换样式类和属性崩溃（收起),点击的时候目标为数据目标。当窗口缩小到一定程度，右侧的效果显现。

第三步：嵌套下拉菜单，形式表单，下拉菜单。代码：

氕类="页眉"导航条/h1 nav class='导航条导航条-默认'角色='导航' div class='导航条-标题'按钮类型=' button ' class=' nav bar-toggle ' data-toggle=' collapse ' data-target=' # bs-example-nav bar-collapse-1 ' span class=' Sr-only ' toggle导航/span class=' icon-bar '/span class=' icon-bar '/span class=' icon-bar '/span/button a href=' # ' class=' nav bar-brand '品牌/a/div div class='折叠导航条-折叠' id=' bs-example-导航条-折叠-1！-嵌套下拉菜单-ul class=' nav bar-nav ' Li class=' active ' a href=' # ' Link/下拉b类='插入符号'/a ul类='下拉菜单lia href='# '操作/a/li lia href='# '操作/a/li lia href='# '操作/a/li lia href='# '操作/a/Li lia href=' # '操作/a/li /ul /li /ul！-嵌套表单-表单操作=' class='导航栏-表单导航栏-左侧'角色='search' div class='form-group '输入类型=' text ' class=' form-control '/div button type=' button ' class=' BTN BTN-default ' Submit/button/form！- /div /nav预览：

增强导航条的可访问性要增强可访问性，一定要给每个导航条加上角色='导航。

2、表单将表单放置于navbar .形之内可以呈现很好的垂直对齐，并在较窄的视口中呈现折叠状态。使用对齐选项可以确定其在导航条上出现的位置。

通过使用混合，混合.导航条形和。表单内联共享了很多代码。

代码

表单操作=' class='导航栏-表单导航栏-左侧'角色='search' div class='form-group '输入类型=' text ' class=' form-control '/div按钮类型=' button ' class=' BTN BTN-默认' Submit/button/form(9503 . 163.com)

为输入框添加标签标签如果你没有为输入框添加标签标签，屏幕阅读器将会遇到问题。对于导航条内的表单，可以通过。仅立体弧度类隐藏标签标签。

3、按钮代码：button type=' button ' class=' BTN BTN-默认navbar-btn '登陆/按钮预览：

4.当文本被换行时。navbar-text，P标记通常用于正确的行距和颜色。代码段：p class='navbar-text' text /p5。非导航链接也许你想添加标准链接到标准导航组件，然后使用。navbar-link类可以使链接具有正确的默认颜色和反向颜色。代码段：复制的代码如下： p class=' nav bar-text nav bar-right '。这是a href='#' class='navbar-link '链接/a/p 6。对于元件对齐，请使用。nav bar-左侧或。nav bar-右对齐导航链接、表单、按钮或文本的工具类。这两种类型都在特定方向上使用CSS浮动样式。例如，要对齐导航链接，请将它们放在单独的ul中，并应用工具类。

这些类是。向左拉。右拉，但它们仅限于媒体查询，这使得在各种大小的屏幕上处理导航栏组件变得更加容易。

7.固定在顶部添加。navbar-fixed-top用于将导航栏固定在顶部。没用的。您需要为正文标签设置填充。这个固定的导航栏将覆盖页面上的其他内容，除非您为正文的顶部设置填充。使用您自己的值，或者使用下面给出的代码。提示：导航栏的默认高度是50px。

车身{ padding-top : 70px；}必须放在Bootstrap CSS的核心文件之后。(覆盖问题)8。把它固定在底部，换成。nav bar-固定底部。您需要为正文标签设置填充。这个固定的导航栏将覆盖页面上的其他内容，除非您为正文的底部设置填充。使用您自己的值，或者使用下面给出的代码。提示：导航栏的默认高度是50px。

车身{衬垫-底部： 70px；}请务必在加载其核心后使用Bootstrap CSS。9.站在顶部不动，通过添加创建一个带有页面的导航栏。nav bar-静态-顶部。它会随着页面向下滚动而消失。不像。navbar-fixed-* class，不需要在正文中添加填充。10.颜色相反的导航栏可以通过添加。逆类。

如果你还想深入学习，可以点击这里学习，然后为你附上3个精彩话题：

引导教程。

自举实用教程。

引导插件教程。

以上是关于Bootstrap导航栏使用的详细介绍，希望对大家的学习有所帮助。