第一次接触神奇的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 相关文章推荐
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
javascript concat数组累加 示例
Sep 03 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
vue脚手架项目创建步骤详解
Mar 02 Vue.js
教你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
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
初婚初育证明
2014/01/14 职场文书
检举信的格式及范文
2014/04/04 职场文书
小学生寒假家长评语
2014/04/16 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
上课说话检讨书500字
2014/11/01 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
数据库之SQL技巧整理案例
2021/07/07 SQL Server