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

跨浏览器的设置innerHTML方法

Sep 18 Javascript

javascript 数据类型转换(parseInt,parseFloat)

Jul 20 Javascript

使用javascript创建快捷方式的简单实例

Aug 09 Javascript

javascript判断并获取注册表中可信任站点的方法

Jun 01 Javascript

基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果

Nov 09 Javascript

详解js中==与===的区别

Jan 08 Javascript

node.js 抓取代理ip实例代码

Apr 30 Javascript

修改 bootstrap table 默认detailRow样式的实例代码

Jul 21 Javascript

构建大型 Vue.js 项目的10条建议(小结)

Nov 14 Javascript

小程序Scroll-view上拉滚动刷新数据

Jun 21 Javascript

vue根据条件不同显示不同按钮的操作

Aug 04 Javascript

吃通javascript正则表达式

Apr 21 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代码

2006/12/06 PHP

apache和php之间协同工作的配置经验分享

2013/04/08 PHP

php二维数组排序与默认自然排序的方法介绍

2013/04/27 PHP

解析PHP的session过期设置

2013/06/29 PHP

php实现简单的语法高亮函数实例分析

2015/04/27 PHP

php实现的日历程序

2015/06/18 PHP

CodeIgniter扩展核心类实例详解

2016/01/20 PHP

jquery ajax提交表单数据的两种实现方法

2010/04/29 Javascript

javascript:void(0)的作用示例介绍

2013/10/28 Javascript

jQuery中bind,live,delegate与one方法的用法及区别解析

2013/12/30 Javascript

js调试系列断点与动态调试[基础篇]

2014/06/18 Javascript

javascript面向对象之对象的深入理解

2015/01/13 Javascript

AngularJS Module方法详解

2015/12/08 Javascript

JavaScript Math.round() 方法

2015/12/18 Javascript

AngularJS指令中的绑定策略实例分析

2016/12/14 Javascript

深究AngularJS如何获取input的焦点（自定义指令）

2017/06/12 Javascript

jQuery操作attr、prop、val()/text()/html()、class属性

2019/05/23 jQuery

微信小程序页面间传递数组对象方法解析

2019/11/06 Javascript

基于js实现逐步显示文字输出代码实例

2020/04/02 Javascript

Express 配置HTML页面访问的实现

2020/11/01 Javascript

使用Python编写一个最基础的代码解释器的要点解析

2016/07/12 Python

python实现人民币大写转换

2018/06/20 Python

python 实现视频流下载保存MP4的方法

2019/01/09 Python

Python手绘可视化工具cutecharts使用实例

2019/12/05 Python

Python不支持 i ++ 语法的原因解析

2020/07/22 Python

python PyAUtoGUI库实现自动化控制鼠标键盘

2020/09/09 Python

python实现启动一个外部程序,并且不阻塞当前进程

2020/12/05 Python

使用Html5 Stream开发实时监控系统

2020/06/02 HTML / CSS

世界上最好的威士忌和烈性酒购买网站：The Whisky Exchange

2016/11/20 全球购物

维多利亚的秘密官方旗舰店：VICTORIA’S SECRET

2018/04/02 全球购物

Etam德国：内衣精品店

2019/08/25 全球购物

幼儿如何来做好自我评价

2013/11/05 职场文书

爱耳日宣传活动总结

2014/07/05 职场文书

不尊敬老师检讨书范文

2014/11/19 职场文书

走进毛泽东观后感

2015/06/04 职场文书

小区物业管理2015年度工作总结

2015/10/22 职场文书