首页
所有分类
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 事件查询综合
Jul 13 Javascript
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
JS处理一些简单计算题
Feb 24 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 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
Switch(1) Spring JPA(1) mt-swipe(1) REST(1) 慢日志(1) cmd(1) Mint UI(1) exists(2) 远程桌面(2) 相对路径 (1)
You might like
做个自己站内搜索引擎
2006/10/09 PHP
php&amp;java（一）
2006/10/09 PHP
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
php array的学习笔记
2012/05/10 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
js资料toString 方法
2007/03/13 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
js实现瀑布流效果（自动生成新的内容）
2017/03/16 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
7个好用的JavaScript技巧分享（译）
2019/05/07 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
JavaScript动态生成表格的示例
2020/11/02 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友？
2018/04/06 DOTA
使用python实现tcp自动重连
2017/07/02 Python
Python操作mongodb的9个步骤
2018/06/04 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
解决python 找不到module的问题
2020/02/12 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
保密普查工作实施方案
2014/02/25 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
租房协议书怎么写
2014/04/10 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
四则混合运算教学反思
2016/02/23 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书