第一次接触神奇的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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
浅析javascript函数表达式
Feb 10 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
javascript中的this作用域详解
Jul 15 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 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中this,self,parent的区别详解
2013/06/08 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
python进程与线程小结实例分析
2018/11/11 PHP
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
从零学Python之入门(二)基本数据类型
2014/05/25 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
详解Python if-elif-else知识点
2018/06/11 Python
python实现字符串和字典的转换
2018/09/29 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
Yahoo的PHP面试题
2014/05/26 面试题
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
软件工程师面试题
2012/06/25 面试题
司机岗位职责
2013/11/15 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
师范毕业生个人求职信
2013/12/09 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS