首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

全面接触神奇的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实战教程

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

- Author -

smartbetter

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
vue2.0 实现导航守卫（路由守卫）
May 21 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
vue2路由基本用法实例分析
Mar 06 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
NTP(1) RestTemplate(1) Quartz(1) Windows Server(4) HttpClient(1) dataBinding(1) 反射(1) Hive(5) Windows Server 2022(3) ip2region(1)
You might like
两种设置php载入页面时编码的方法
2014/07/29 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
php新建文件的方法实例
2019/09/26 PHP
js资料prototype 属性
2007/03/13 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
this.$toast() 了解一下？
2019/04/18 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
深入理解Django自定义信号（signals)
2018/10/15 Python
python多线程同步之文件读写控制
2021/02/25 Python
python 实现两个线程交替执行
2020/05/02 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
什么是聚集索引和非聚集索引
2012/01/17 面试题
介绍一下gcc特性
2012/01/20 面试题
珠宝店促销方案
2014/03/21 职场文书
ktv好的活动方案
2014/08/15 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
民事答辩状格式范文
2015/05/21 职场文书
军事理论课感想
2015/08/11 职场文书