第一次接触神奇的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 相关文章推荐
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
小程序实现文字循环滚动动画
Jun 14 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中读写文件实现代码
2011/10/20 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
vue之将echart封装为组件
2018/06/02 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
提升Python程序运行效率的6个方法
2015/03/31 Python
介绍Python中内置的itertools模块
2015/04/29 Python
python和bash统计CPU利用率的方法
2015/07/10 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
HTML5应用之文件上传
2016/12/30 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
大学生的四年学习自我评价
2013/12/13 职场文书
教师师德反思材料
2014/02/15 职场文书
协议书范文
2015/01/27 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL