Bootstrap导航条学习使用(一)


Posted in Javascript onFebruary 08, 2017

本文实例为大家分享了Bootstrap导航条的具体代码,供大家参考,具体内容如下

navbar: 导航条的基础样式
nav navbar-nav :导航条里菜单的的固定样式组合的class
navbar-default :导航条的默认样式
navbar-inverse:黑色的导航条
navbar-static-top:直角导航
navbar-fixed-top:导航条固定在最上边
navbar-fixed-bottom :导航条固定在最下边,不会随滚动条的移动而移动

具体代码:

<!doctype html>
<html>
<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>Bootstrap</title>
 <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
 <div class="container">
 <nav class="navbar navbar-default"><!--默认的导航条-->
  <ul class="nav navbar-nav">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li>
  </ul>
 </nav>
 <nav class="navbar navbar-inverse"><!--黑色的导航条-->
  <ul class="nav navbar-nav">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li>
  </ul>
 </nav>
 <nav class="navbar navbar-default navbar-static-top"><!--直角导航-->
  <ul class="nav navbar-nav">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li>
  </ul>
 </nav>
 <nav class="navbar navbar-inverse navbar-fixed-top"><!--固定在上方的导航条,并将第一个导航条盖住-->
  <ul class="nav navbar-nav">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li>
  </ul>
 </nav>
 <nav class="navbar navbar-inverse navbar-fixed-bottom"><!--底部-->
  <ul class="nav navbar-nav">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li>
  </ul>
 </nav>
 </div>
 <script src="js/jquery-2.1.0.js"></script>
 <script src="js/bootstrap.js"></script>
</body>
</html>

效果图:

Bootstrap导航条学习使用(一)

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

Javascript 相关文章推荐
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
js实现批量删除功能
Aug 27 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 #Javascript
Javascript中的神器——Promise
Feb 08 #Javascript
jquery获取下拉框中的循环值
Feb 08 #Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 #Javascript
jQuery实现标签页效果实战(4)
Feb 08 #Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 #Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 #Javascript
You might like
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
php处理单文件、多文件上传代码分享
2016/08/24 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
python常用函数详解
2016/09/13 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
校园安全检查制度
2014/02/03 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
消费者投诉书范文
2015/07/02 职场文书
学校运动会开幕词
2016/03/03 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
Element实现动态表格的示例代码
2021/08/02 Javascript
Vue router配置与使用分析讲解
2022/12/24 Vue.js