,,bootstrap中的导航条实例代码详解

本文通过实例代码给大家介绍了引导程序中的导航条，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

一、和导航的区别

1.导航条比导航多了一个条字

2.直接上图

导航：

导航条：

简单文字描述：由两张图看出，导航内容比较简单，而导航条可以包含导航及其他元素，如表单，搜索框等，并且通常导航条会有一个区别于页面的背景色。

二、在页面中定义导航条

方法：

为父容器添加类名导航条导航条-默认。导航条-默认类用来规定导航条的颜色，可以更改为导航条-反转来让导航条反色显示自举官网建议使用航行元素。但也常用差异元素，建议用差异元素时增加角色='导航'属性，该属性对一些特殊的辅助设备友好。

结构：

标题或者标志；徽标放在类名为。导航条-标题。导航条-品牌的容器中，其他条目可以放在类名为。导航导航条-导航的容器中

navbar navbar-default ' role=' navigation '

div class='navbar-header '

a href='#' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部“不跟随”

/div

ul类别='导航导航条-导航'

li class='active'a href='#' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部“不跟随”首页/a/李

lia href='#' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部“不跟随”条目一/a/李

/ul

/div

包含元素：

1.表单：表单添加类名导航条形式

2.按钮：添加类名导航条-btn(需和类名为"导航条-导航"或导航条-品牌'的元素配合使用，且数量不能多)

3.文本：添加类名导航栏-文本（需和类名为"导航条-导航"或导航条-品牌'的元素配合使用，且数量不能多)

4.链接：添加类名导航栏-链接（需和类名为"导航条-导航"或导航条-品牌'的元素配合使用，且数量不能多)

5.二级菜单：(见下面代码)

navbar navbar-default ' role=' navigation '

div class='navbar-header '

/div

ul类别='导航导航条-导航'

li class='dropdown '

ul class='下拉菜单'

阿利href='#' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部“不跟随”香蕉/a/李

/ul

/李

lia href='##' rel='外部nofollow' rel='外部nofollow' rel='外部“不跟随”蔬菜/a/李

lia href='##' rel='外部nofollow' rel='外部nofollow' rel='外部“不跟随”哈哈/a/李

lia href='##' rel='外部nofollow' rel='外部nofollow' rel='外部“不跟随”呵呵/a/李

/ul

/div

位置样式：

?导航条内元素左浮动：左浮动的元素添加类名导航条-左侧

?导航条内元素右浮动：右浮动的元素添加类名导航条-右侧

?导航条固定在浏览器窗口顶部：导航条父容器添加类名导航条-固定顶部

?导航条固定在浏览器窗口底部：导航条父容器添加类名导航条-固定底部

注意：让导航条固定在浏览器窗口顶部或底部会遮盖到页面顶部或底部的内容，解决办法为：给身体设置合适的内边距（温馨提示：导航条默认高度为50px)。

三、响应式

目的：让导航条内容比较多的时候，在窄屏幕设备上显示更加友好

表现：宽屏正常显示，窄屏时隐藏一部分条目，并调整其排列方式为垂直排列，然后通过一个按钮单击显示

宽屏显示：

窄屏显示：

窄屏展开：

方法：

1.将想要被折叠的元素包裹在一个类名为'折叠导航栏-折叠'的差异中

2.定义想要显示的图标，可以将其放在类名为"导航栏-标题"的元素中

按钮' navbar-toggle ' type=' button ' data-toggle=' collapse '

' span class='仅sr '切换导航/span

span class='icon-bar'/span

/按钮

完整代码：

navbar navbar-default ' role=' navigation '

div class='navbar-header '

button class=' navbar-toggle ' type=' button ' data-toggle=' collapse ' data-target=' .测试

' span class='仅sr '切换导航/span

span class='icon-bar'/span

/按钮

/div

'折叠导航条-折叠测试'

ul类别='导航导航条-导航'

/ul

/div

1.为隐藏元素的父标签添加一个班级类名或身份证明(识别)名，然后让按钮的数据目标链接到该元素：数据目标='。'' class/#id '

响应式的临界点为768px，即当屏幕大于768像素时原样显示，小于768像素时改变样式

路径导航（面包屑导航）

ol class='面包屑'

李class='活动'数据/李

/ol

样式：

总结

以上所述是小编给大家介绍的引导程序中的导航条实例代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读