首页
所有分类
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 汉字字节判断
Aug 01 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
js调用刷新界面的几种方式
May 03 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
vue制作toast组件npm包示例代码
Oct 29 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 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
外键约束(1) 云服务器(1) JDK(1) expdp(1) Foreign Key(1) queue(1) TaiShan(1) 数据备份(2) 内存池(1) 腾讯云(1)
You might like
preg_match_all使用心得分享
2014/01/31 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
JavaScript中创建字典对象（dictionary）实例
2015/03/31 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
原生js实现购物车
2020/09/23 Javascript
Python字符串处理函数简明总结
2015/04/13 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
python实现测试工具（一）——命令行发送get请求
2020/10/19 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
国际花店：Pickup Flowers
2020/04/10 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
小学生检讨书大全
2014/02/06 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
javascript的var与let,const之间的区别详解
2022/02/18 Javascript
redis数据结构之压缩列表
2022/03/21 Redis
服务器间如何实现文件共享
2022/05/20 Servers