第一次接触神奇的Bootstrap导航条


Posted in Javascript onAugust 09, 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.实战三-响应式导航条

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
  <!-- .navbar-toggle样式用于toggle收缩的内容,即nav-collapse collapse样式所在元素 -->
  <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
  <span class="sr-only"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>
  <!-- 确保无论是宽屏还是窄屏,navbar-brand都显示 -->
  <a href="##" class="navbar-brand">标题</a>
 </div>
 <!-- 屏幕宽度小于768px时,div.navbar-responsive-collapse容器里的内容都会隐藏,
  显示icon-bar图标,当点击icon-bar图标时,再展开。屏幕大于768px时,默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse">
  <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>

效果图如下:

第一次接触神奇的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导航条

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

Javascript 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
json数据处理及数据绑定
Jan 25 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
JS实现小米轮播图
Sep 21 Javascript
React 高阶组件HOC用法归纳
Jun 13 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 #Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 #Javascript
jQuery实现产品对比功能附源码下载
Aug 09 #Javascript
AngularJS利用Controller完成URL跳转
Aug 09 #Javascript
JavaScript实现广告弹窗效果
Aug 09 #Javascript
谈谈JavaScript中的几种借用方法
Aug 09 #Javascript
Backbone View 之间通信的三种方式
Aug 09 #Javascript
You might like
一个经典的PHP文件上传类分享
2014/11/18 PHP
php绘制一个矩形的方法
2015/01/24 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
JS表的模拟方法
2015/02/05 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
Python中字符串对齐方法介绍
2015/05/21 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
python实现共轭梯度法
2019/07/03 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
keras打印loss对权重的导数方式
2020/06/10 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python