全面接触神奇的Bootstrap导航条实战篇


Posted in Javascript onAugust 01, 2016

导航条(navbar)在Bootstrap中是一个独立组件,导航条(navbar)和导航(nav)在Bootstrap中是有明显的区别的。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接、表单、表单和导航一起结合等多种形式。

1.实战一-带二级菜单和表单的导航条

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>导航条</title>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 <!--css样式-->
 <style >
 body{margin:30px;padding:30px;}
 </style>
</head>
<body>
<div class="navbar navbar-default" role="navigation">
 <!--标题通过“navbar-header”和“navbar-brand”来实现-->
 <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="##">二级菜单</a></li>
 </ul>
 </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>
<!-- 放置在文档的结尾,使页面加载速度更快 -->
<!-- 如果要使用Bootstrap的js插件,必须先调入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

效果图如下:

全面接触神奇的Bootstrap导航条实战篇

Bootstrap的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素:

1)导航条中的按钮navbar-btn
2)导航条中的文本navbar-text
3)导航条中的普通链接navbar-link

2.实战二-固定导航条

<!--顶部导航条-->
<div class="navbar navbar-default navbar-fixed-top" 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>
  </ul>
</div>
<!--底部导航条-->
<div class="navbar navbar-default navbar-fixed-bottom" 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>
  </ul>
</div>
<!--正文内容-->
<div class="content">网页正文内容</div>

效果图如下:

全面接触神奇的Bootstrap导航条实战篇

3.实战三-响应式导航条

效果图如下:

全面接触神奇的Bootstrap导航条实战篇

有的时候会有需要反色的情况,Bootstrap为此提供了反色导航条,只是将navbar-deafult类名换成navbar-inverse,然后导航条的背景色和文本的颜色就会修改。

4.实战四-分页导航

1)带页码的分页导航

<!-- pagination:正常大小
 pagination-lg:让分页导航变大 
 pagination-sm:让分页导航变小-->
<ul class="pagination pagination">
 <li><a href="#">«首页</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <!--当前状态-->
 <li class="active"><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <!--禁用状态-->
 <li class="disabled"><a href="#">尾页»</a></li>
</ul>

效果图如下:

全面接触神奇的Bootstrap导航条实战篇

2)翻页分页导航

<ul class="pager">
 <li><a href="#">«上一页</a></li>
 <!--禁用状态-->
 <li class="disabled"><a href="#">下一页»</a></li>
</ul> 
<!--左右对齐-->
<ul class="pager">
 <li class="previous"><a href="#">«上一页</a></li>
 <li class="next"><a href="#">下一页»</a></li>
</ul>

效果图如下:

全面接触神奇的Bootstrap导航条实战篇

5.实战五-标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,例如:

全面接触神奇的Bootstrap导航条实战篇

Bootstrap中将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示。和按钮元素button类似,label样式也提供了多种颜色,主要是通过这几个类名来修改背景颜色和文本颜色:

效果图如下:

全面接触神奇的Bootstrap导航条实战篇

6.实战六-徽章

徽章多用于提醒有多少未读消息这样的需求,在Bootstrap中,使用“badge”样式来实现徽章效果。

<!--navbar-default导航条勋章-->
<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="##">论坛<span class="badge">10</span></a></li>
  <li><a href="##">反馈</a></li>
 </ul>
</div>

效果图如下:

全面接触神奇的Bootstrap导航条实战篇

7.实战七-带动画过渡的弹出框

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>带动画过的渡弹出框</title>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 <!--css样式-->
 <style >
  body{margin:30px;padding:30px;}
 </style>
</head>
<body>

<button class="btn btn-primary" type="button">点击我</button>
<div class="modal fade" id="mymodal">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">
     <span aria-hidden="true">×</span><span class="sr-only">Close</span>
    </button>
    <h4 class="modal-title">弹出窗标题</h4>
   </div>
   <div class="modal-body">
    <p>弹出窗主体内容</p>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    <button type="button" class="btn btn-primary">保存</button>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 放置在文档的结尾,使页面加载速度更快 -->
<!-- 如果要使用Bootstrap的js插件,必须先调入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script>
 $(function(){
  $(".btn").click(function(){
   $("#mymodal").modal("toggle");
  });
 });
</script>
</body>
</html>

效果图如下:

全面接触神奇的Bootstrap导航条实战篇

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

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

Javascript 相关文章推荐
JS 判断undefined的实现代码
Nov 26 Javascript
基于jQuery的表格操作插件
Apr 22 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
JavaScript控制台的更多功能
Apr 28 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 #Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 #Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 #Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 #Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 #Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 #Javascript
js添加千分位的实现代码(超简单)
Aug 01 #Javascript
You might like
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
php制作简单模版引擎
2016/04/07 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
基python实现多线程网页爬虫
2015/09/06 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
大学生在校学习的自我评价
2014/02/18 职场文书
行政人事岗位职责
2014/03/17 职场文书
职务聘任书范文
2014/03/29 职场文书
授权委托书范文
2014/07/31 职场文书
校车安全责任书
2014/08/25 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
2022微信温控新功能上线
2022/05/09 数码科技