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 相关文章推荐
JSON相关知识汇总
Jul 03 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
vue select 获取value和lable操作
Aug 28 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
php array的学习笔记
2012/05/10 PHP
详解PHP数组赋值方法
2015/11/07 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
JS 常用校验函数
2009/03/26 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
Python中set与frozenset方法和区别详解
2016/05/23 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
Python解析json代码实例解析
2019/11/25 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
2014庆六一活动方案
2014/03/02 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
python代码实现备忘录案例讲解
2021/07/26 Python
Pandas 数据编码的十种方法
2022/04/20 Python
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL