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


Posted in Javascript onApril 29, 2016

本文包含了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="#">«</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="#">»</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="#">«上一页</a></li>
 <li><a href="#">下一页»</a></li>
</ul>

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

<ul class="pager">
 <li class="previous"><a href="#">«上一页</a></li>
 <li class="next"><a href="#">下一页»</a></li>
</ul>

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

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

Javascript 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
在JavaScript中如何使用宏详解
May 06 Javascript
Bootstrap实现下拉菜单效果
Apr 29 #Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 #Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 #Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 #Javascript
Treegrid的动态加载实例代码
Apr 29 #Javascript
Easyui 之 Treegrid 笔记
Apr 29 #Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 #Javascript
You might like
Smarty Foreach 使用说明
2010/03/23 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
PHP可变变量学习小结
2015/11/29 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
JS解析XML的实现代码
2009/11/12 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
浅析Python 多行匹配模式
2020/07/24 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
模范家庭事迹材料
2014/02/10 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
会议简报格式范文
2015/07/20 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
pt-archiver 主键自增
2022/04/26 MySQL
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android