一系列Bootstrap导航条使用方法分享

更新时间：2016年04月29日 11:45:05 投稿：lijiao

这篇文章主要为大家整理了一系列Bootstrap导航条使用方法，分享给大家，感兴趣的小伙伴们可以参考一下

本文包含了Bootstrap导航条基础使用方法，供大家参考，具体内容如下

1、Bootstrap基础导航样式
Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。比如右侧代码编辑器中就有一个tab导航条的例子，他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式

<ul class="nav nav-tabs">
 <li><a href="##">Home</a></li>
 <li><a href="##">CSS3</a></li>
 <li><a href="##">Sass</a></li>
 <li><a href="##">jQuery</a></li>
 <li><a href="##">Responsive</a></li>
</ul>

2、Bootstrap基础导航条
在制作一个基础导航条时，主要分以下几步：

第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”

“.navbar”样式的主要功能就是设置左右padding和圆角等效果，但他和颜色相关的样式没有进行任何的设置

<div class="navbar navbar-default" role="navigation">
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
</div>

3、Bootstrap导航条添加标题
在Web页面制作中，常常在菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，其通过“navbar-header”和“navbar-brand”来实现。

<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">导航条</a>
 　</div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
</div>

4、Bootstrap导航条二级菜单
在导航条中添加二级菜单也非常简单

<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">导航条</a>
 　</div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
</div>

5、Bootstrap带表单的导航条
有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单。navbar-left”让表单左浮动，更好实现对齐。在Bootstrap框架中，还提供了“navbar-right”样式，让元素在导航条靠右对齐。

<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">Bootstrap</a>
 　</div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 <form action="##" class="navbar-form navbar-left" rol="search">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>

6、Bootstrap导航条中的按钮、文本和链接
Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式：
1).导航条中的按钮navbar-btn

2).导航条中的文本navbar-text

3).导航条中的普通链接navbar-link
但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">Bootstrap</a>
 　</div>
 <ul class="nav navbar-nav">
 <li><a href="##" class="navbar-text">Navbar Text</a></li>
 <li><a href="##" class="navbar-text">Navbar Text</a></li>
 <li><a href="##" class="navbar-text">Navbar Text</a></li>
 </ul>
</div>

<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">Bootstrap</a>
 　</div>
 <div class="nav navbar-nav">
 <a href="##" class="navbar-text">Navbar Text</a>
 <a href="##" class="navbar-text">Navbar Text</a>
 <a href="##" class="navbar-text">Navbar Text</a>
 </div>
</div>

7、Bootstrap固定导航条
很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式：
.navbar-fixed-top：导航条固定在浏览器窗口顶部
.navbar-fixed-bottom：导航条固定在浏览器窗口底部

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>

8、Bootstrap分页导航
带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法。

<ul class="pagination">
 <li><a href="#">&laquo;</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">&raquo;</a></li>
</ul>

在Bootstrap框架中，也可以通过几个不同的情况来设置分页按钮大小。
1).通过“pagination-lg”让分页导航变大；
2).通过“pagination-sm”让分页导航变小

<ul class="pagination pagination-lg">
 …
</ul>
<ul class="pagination">
 …
</ul>
<ul class="pagination pagination-sm">
 …
</ul>

Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。
在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类。

<ul class="pager">
 <li><a href="#">&laquo;上一页</a></li>
 <li><a href="#">下一页&raquo;</a></li>
</ul>

默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式
previous：让“上一步”按钮居左
next：让“下一步”按钮居右

<ul class="pager">
 <li class="previous"><a href="#">&laquo;上一页</a></li>
 <li class="next"><a href="#">下一页&raquo;</a></li>
</ul>

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是关于Bootstrap 导航条的全部内容，希望对大家的学习有所帮助。

您可能感兴趣的文章:

一文带你搞懂JS中六种For循环的使用
for 循环是出现最早，也是应用最普遍的一个遍历，能够满足绝大多数的遍历。可以遍历数组、对象、字符串。本文将详细为大家介绍JS中的六种For循环的使用，需要的可以参考一下
2022-04-04
小程序调用微信支付的方法
这篇文章主要为大家详细介绍了小程序调用微信支付的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
JS+JQuery实现无缝连接轮播图
这篇文章主要介绍了JS+JQuery实现无缝连接轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
file控件选择上传文件确定后触发的js事件是哪个
这篇文章主要介绍了file控件选择上传文件确定后触发了什么js事件,需要的朋友可以参考下
2014-03-03
利用原生JavaScript获取元素样式只是获取而已
原生JavaScript获取样式，是获取样式，不是设置样式。若没有给元素设置样式值，则返回浏览器给予的默认值
2014-10-10
教你一步步实现一个简易promise
Promise是异步编程的一种解决方案,比传统的解决方案回调函数和事件更合理且更强大,这篇文章主要给大家介绍了关于如何一步步实现一个简易promise的相关资料,需要的朋友可以参考下
2021-11-11
javascript获取隐藏元素(display:none)的高度和宽度的方法
这篇文章主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下
2014-06-06
如何基于原生javaScript生成带图片的二维码
这篇文章主要介绍了如何基于原生javaScript生成带图片的二维码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-11-11
js绘制圆形和矩形的方法
这篇文章主要介绍了js绘制圆形和矩形的方法,涉及javascript鼠标事件及页面元素样式的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
元素未显示设置width/height时IE中使用currentStyle获取为auto
元素未显示设置width/height时IE中无法使用currentStyle获取，默认获取值为auto,需要的朋友可以参考下
2014-05-05

一系列Bootstrap导航条使用方法分享

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具