编程 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 相关文章推荐

html下载本地

Jun 19 Javascript

jQuery最佳实践完整篇

Aug 20 Javascript

Json和Jsonp理论实例代码详解

Nov 15 Javascript

JavaScript针对网页节点的增删改查用法实例

Feb 02 Javascript

jQuery flip插件实现的翻牌效果示例【附demo源码下载】

Sep 20 Javascript

jquery 实现轮播图详解及实例代码

Oct 12 Javascript

vue2实现移动端上传、预览、压缩图片解决拍照旋转问题

Apr 13 Javascript

Javascript中 toFixed四舍六入方法

Aug 21 Javascript

element-ui中的select下拉列表设置默认值方法

Aug 24 Javascript

浅谈webpack性能榨汁机(打包速度优化)

Jan 09 Javascript

Vue 3.0 前瞻Vue Function API新特性体验

Aug 12 Javascript

2019最新21个MySQL高频面试题介绍

Feb 06 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+MySQL判断update语句是否执行成功的方法

2014/08/28 PHP

PHP使用file_get_content设置头信息的方法

2016/02/14 PHP

PHP中explode函数和split函数的区别小结

2016/08/24 PHP

php用wangeditor3实现图片上传功能

2019/08/22 PHP

基于laravel缓冲cache的用法详解

2019/10/23 PHP

JavaScript Undefined，Null类型和NaN值区别

2008/10/22 Javascript

浅析javascript闭包实例分析

2010/12/25 Javascript

jQuery实现的简单提示信息插件

2015/12/08 Javascript

jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

2016/06/12 Javascript

javascript实现圣旨卷轴展开效果（代码分享）

2017/03/23 Javascript

VSCode 配置React Native开发环境的方法

2017/12/27 Javascript

vue watch监听对象及对应值的变化详解

2018/02/24 Javascript

vue 中引用gojs绘制E-R图的方法示例

2018/08/24 Javascript

微信小程序实现发微博功能的示例代码

2020/06/24 Javascript

[01:11:21]DOTA2-DPC中国联赛正赛 VG vs Elephant BO3 第一场 3月6日

2021/03/11 DOTA

10个易被忽视但应掌握的Python基本用法

2015/04/01 Python

Python自定义scrapy中间模块避免重复采集的方法

2015/04/07 Python

常见python正则用法的简单实例

2016/06/21 Python

Python requests发送post请求的一些疑点

2018/05/20 Python

使用PyInstaller将python转成可执行文件exe笔记

2018/05/26 Python

python3实现磁盘空间监控

2018/06/21 Python

详解用Pytest+Allure生成漂亮的HTML图形化测试报告

2020/03/31 Python

django迁移文件migrations的实现

2020/03/31 Python

python实现将两个文件夹合并至另一个文件夹(制作数据集)

2020/04/03 Python

python matplotlib.pyplot.plot()参数用法

2020/04/14 Python

什么是python的函数体

2020/06/19 Python

python多线程semaphore实现线程数控制的示例

2020/08/10 Python

python之随机数函数的实现示例

2020/12/30 Python

伦敦最著名的老字号百货公司：Selfridges（塞尔福里奇百货）

2016/07/25 全球购物

英国领先的高级美容和在线皮肤诊所：Face the Future

2020/06/17 全球购物

护士自荐信

2013/10/25 职场文书

同学聚会老师邀请函

2014/01/28 职场文书

市场营销方案范文

2014/03/11 职场文书

KTV员工管理制度

2015/08/06 职场文书

python元组打包和解包过程详解

2021/08/02 Python

Python Flask搭建yolov3目标检测系统详解流程

2021/11/07 Python