拥Bootstrap入怀——导航栏篇


Posted in Javascript onMay 30, 2016

写在前面
在该文中,我结合自己做的一个山水网页来聊一下Bootstrap的使用,网页截图如下:

拥Bootstrap入怀——导航栏篇

完整网页的效果和代码可以点击这里查看或者到CodePen上查看。网页要达到的主要效果包括以下几点:

1、导航栏的登陆、注册按钮点击后弹出登陆、注册modal框,并且登陆、注册窗口可切换,菜单栏为响应式

2、导航栏中的山水选项可下拉,点击下拉中的九寨沟``丽江``水帘洞会定位到相应的tab

3、幻灯片大屏轮播

4、tab页点击切换

下面我们开始拥Bootstrap入怀。

Bootstrap想必小伙伴们都听说过或使用过,在这个网页中,我用的是cdn Bootstrap v3.3.4,点击这里可以下载最新版本的Bootstrap v3.3.5或者点击这里自行到官网上下载,相信总有一款适合你~~~~~~

这篇文章让我们先聊一下导航栏。

导航栏
在使用bs之前首先要引用bs,包括css和js,引用的方式很简单,和引用普通外部文件相同,可以使用cdn链接,也可以放在本地引用。下面给出代码。

<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>myvin's山水</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
</head>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

在该山水网页例子中,我用的是cdn链接。

同时,因为bs的插件是基于jq的,所以jq也得引入。

先给出导航栏完整代码

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
 <div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">自己定义一个商标</a>
  </div>

  <!-- 左上角的导航 -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav" >
  <li ><a href="#">主页<span class="sr-only">(current)</span></a></li>
  <li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">山水 <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu">
   <li><a href="#jiuzhaigou">九寨沟</a></li>
   <li><a href="#lijiang">丽江</a></li>
   <li><a href="#shuiliandong">水帘洞</a></li>
   <li class="divider"></li>
   <li><a href="#">更多..</a></li>
  </ul>
  </li>
  <li data-toggle="modal" data-target="#about"><a href="#" >关于</a></li>
  </ul>


  <form class="navbar-form navbar-right" role="search">
  <div class="form-group">
  <input type="text" class="form-control" placeholder="搜索景点..">
  <button type="button" class="btn btn-default">Go</button>
  </div>
  </form>


  <ul class="nav navbar-nav navbar-right">
  <li data-toggle="modal" data-target="#signin-signup-tab" id="signin-button"><a href="#" >登陆</a></li>
  <li data-toggle="modal" data-target="#signin-signup-tab" id="signup-button"><a href="#" >注册</a></li>
  </ul>
  </div>
 </div>
 </nav>

bs的导航组件都依赖同一个.nav类,代码分开讲解。先看这一段:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</button>

这段代码的作用是viewport减小时,导航栏上的菜单选项会折叠,点击折叠图标,导航栏菜单选项会纵向排列。nav中的.navbar-inverse类是反色,小伙伴们可以把.navbar-inverse类去掉观察下效果。因为我是一个黑色控,所以在这里我用反色。想用其他颜色的,土豪金啊,小伙伴们可以按照自己的口味自行搭配。.navbar-brand类可以用来定义自己网站的商标,我在这里以自己定义一个商标的文字代替,感兴趣的小伙伴可以添加自己的logo。.dropdown-toggle类可以实现一个下拉, .divider类可以实现一个浅深色的分割线。

搜索框和登陆、注册中的.navbar-right类顾名思义就是置右。

data属性
在这里有必要说一下bs的data属性。在bs中,开发者可以仅仅通过data属性来使用bs中的所有js插件,这是bs中的一等api,也经常是我们使用js插件的首选方式。比如上面代码中的data-toggle="collapse"data-toggle="dropdown"等,这些就是bs中的使用js插件的方式。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家学习Bootstrap导航栏有所帮助。

Javascript 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
图片自动缩小 点击放大
Jul 07 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
javascript 数组操作详解
Jan 29 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
Vuex简单入门
Apr 19 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 #Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 #Javascript
Bootstrap编写导航栏和登陆框
May 30 #Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 #Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 #Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 #Javascript
BootStrap下jQuery自动完成的样式调整
May 30 #Javascript
You might like
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
javascript中的self和this用法小结
2014/02/08 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
Python中subprocess模块用法实例详解
2015/05/20 Python
Django开发中的日志输出的方法
2018/07/02 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
python多线程抽象编程模型详解
2019/03/20 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
pytorch 预训练层的使用方法
2019/08/20 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
元旦晚会邀请函
2014/02/01 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
小学教师培训方案
2014/06/09 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
创先争优活动承诺书
2014/08/30 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
岗位职责范本大全
2015/02/26 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电