首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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导航条学习使用(一)

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

Bootstrap导航条学习使用(一)

- Author -

轻扰时光

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
JavaScript检查数据中是否存在相同的元素（两种方法）
Oct 07 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 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
奥地利购物网站(28) 捷克购物网站(26) 新西兰购物网站(42) 斯洛伐克购物网站(7) 泰国购物网站(30) 土耳其购物网站(10) 阿联酋购物网站(26) 智利购物网站(5) 波兰购物网站(52) 沙特阿拉伯购物网站(9)
You might like
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
PHP新手上路（七）
2006/10/09 PHP
php 分页函数multi() discuz
2009/06/21 PHP
PHP 危险函数全解析
2009/09/09 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
PHP 断点续传实例详解
2017/11/11 PHP
浅说js变量
2011/05/25 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
Angular2使用Angular-CLI快速搭建工程（二）
2017/05/21 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
vue实现组件之间传值功能示例
2018/07/13 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
加拿大租车网站：Enterprise Rent-A-Car
2018/07/26 全球购物
英国最大的在线蜡烛商店：Candles Direct
2019/03/26 全球购物
护理毕业生自我鉴定
2014/02/11 职场文书
周年庆典主持词
2014/04/02 职场文书
保证书格式范文
2014/04/28 职场文书
天下第一关导游词
2015/02/06 职场文书
表扬信范文
2015/05/04 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python