编程 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 常用函数

Dec 30 Javascript

Jquery选中或取消radio示例

Sep 29 Javascript

jquery让返回的内容显示在特定div里(代码少而精悍)

Jun 23 Javascript

JS原型对象的创建方法详解

Jun 16 Javascript

jQuery联动日历的实例解析

Dec 02 Javascript

Angular directive递归实现目录树结构代码实例

May 05 Javascript

浅谈vue-router2路由参数注意的问题

Nov 08 Javascript

Vue 换肤的示例实践

Jan 23 Javascript

利用原生的JavaScript实现简单拼图游戏

Nov 18 Javascript

vue实现Excel文件的上传与下载功能的两种方式

Jun 28 Javascript

vuex actions异步修改状态的实例详解

Nov 06 Javascript

Vue通过for循环随机生成不同的颜色或随机数的实例

Nov 09 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

中国的第一台收音机

2021/03/01 无线电

PHP 和 MySQL 开发的 8 个技巧

2006/10/09 PHP

dedecms系统常用术语汇总

2007/04/03 PHP

PHP实现利用MySQL保存session的方法

2014/08/23 PHP

PHP5.4起内置web服务器使用方法

2016/08/09 PHP

php 微信公众平台开发模式实现多客服的实例代码

2016/11/07 PHP

在firefox和Chrome下关闭浏览器窗口无效的解决方法

2014/01/16 Javascript

JS兼容浏览器的导出Excel（CSV）文件的方法

2014/05/03 Javascript

javasript实现密码的隐藏与显示

2015/05/08 Javascript

原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

2016/08/05 Javascript

微信小程序之小豆瓣图书实例

2016/11/30 Javascript

基于jQuery实现滚动刷新效果

2017/01/09 Javascript

原生js实现图片放大缩小计时器效果

2017/01/20 Javascript

利用vue.js插入dom节点的方法

2017/03/15 Javascript

让微信小程序支持ES6中Promise特性的方法详解

2017/06/13 Javascript

layui 数据表格复选框实现单选功能的例子

2019/09/19 Javascript

layui 图片上传+表单提交+ Spring MVC的实例

2019/09/21 Javascript

解决layer.prompt无效的问题

2019/09/24 Javascript

利用JS判断元素是否为数组的方法示例

2021/01/08 Javascript

JavaScript canvas实现跟随鼠标移动小球

2021/02/09 Javascript

pycharm 配置远程解释器的方法

2018/10/28 Python

django框架中ajax的使用及避开CSRF 验证的方式详解

2019/12/11 Python

python读取hdfs上的parquet文件方式

2020/06/06 Python

拿来就用！Python批量合并PDF的示例代码

2020/08/10 Python

详解css3使用transform出现字体模糊的解决办法

2020/10/16 HTML / CSS

Glamest意大利：女性在线奢侈品零售店

2019/04/28 全球购物

荷兰睡眠专家：Beter Bed

2020/11/23 全球购物

阿迪达斯越南官网：adidas越南

2020/07/19 全球购物

保安员岗位职责

2013/11/17 职场文书

学生处主任岗位职责

2013/12/01 职场文书

党员领导干部廉洁从政承诺书

2014/03/27 职场文书

2016年母亲节广告语

2016/01/28 职场文书

三八红旗手先进事迹材料（2016推荐版）

2016/02/25 职场文书

Python绘制分类图的方法

2021/04/20 Python

解析python中的jsonpath 提取器

2022/01/18 Python

唤醒紫霞仙子，携手再游三界！大话手游X《大话西游》电影合作专属剧情任务

2022/04/03 其他游戏