首页
所有分类
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 相关文章推荐
Javascript浅谈之引用类型
Dec 18 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 Javascript
Vue性能优化的方法
Jul 30 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 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
PL-880(1) 索尼(5) 数调机(1) 手调机(1) SONY(15) 德劲(5) RP-F11(1) ICF-7600(1) TOSHIBA(1) 东芝(1)
You might like
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础－1 开始了解php
2011/07/03 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
java script编程起步（第三课）
2007/01/10 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
Python pass详细介绍及实例代码
2016/11/24 Python
python中defaultdict的用法详解
2017/06/07 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
Python中摘要算法MD5，SHA1简介及应用实例代码
2018/01/09 Python
详解python3中zipfile模块用法
2018/06/18 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
jupyter notebook 多行输出实例
2020/04/09 Python
抽象类和接口的区别
2012/09/19 面试题
remote接口和home接口主要作用
2013/05/15 面试题
应用电子专业学生的自我评价
2013/10/16 职场文书
工地门卫岗位职责
2013/12/30 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
企业授权委托书范本
2014/04/02 职场文书
出纳工作检讨书
2014/10/18 职场文书
2014年教学工作总结
2014/11/13 职场文书