Bootstrap导航条学习使用(二)

更新时间：2017年02月08日 15:16:47 作者：轻扰时光

这篇文章主要为大家详细介绍了Bootstrap导航条的使用方法第二篇，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Bootstrap导航条实现的具体代码，供大家参考，具体内容如下

navbar-header：导航的头部，一般情况下用来放置logo
navbar-brand ：用来放置logo，需要配合navbar-header使用

具体代码：

<!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>
 <!--有链接和文字的导航条-->
 <nav class="navbar navbar-default">
 <div class="container"><!--将外围的div放在nav标签里面-->
  <div class="navbar-header">
  <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" class="navbar-brand">logo</a><!--navbar-brand 用来放置logo的-->
  </div>
  <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" >苹果</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" >香蕉</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" >橘子</a></li>
  </ul>
  <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" class="navbar-link navbar-text">链接</a><!--navbar-link为导航里的链接-->
  <p class="navbar-text">这里是一段文字</p><!--navbar-text为导航里的文字-->
  <ul class="nav navbar-nav navbar-right"><!--右对齐，而navbar-left为左对齐-->
  <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" >登录</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" >注册</a></li>
  </ul>
 </div>
 </nav>
 <!--有表单的导航条-->
 <nav class="navbar navbar-default">
 <div class="container">
  <div class="navbar-header">
  <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" class="navbar-brand">logo</a>
  </div>
  <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" >苹果</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" >香蕉</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" >橘子</a></li>
  </ul>
  <button class="btn btn-default navbar-btn navbar-left">搜索</button>

  <form action="URL" class="navbar-form navbar-left"><!--navbar-form是在导航条里添加表单，navbar-left使表单左浮动，使其与其他内容在一行显示-->
  <input type="text" class="form-control"/>
  <button class="btn btn-default">搜索</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
  <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" >登录</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" >注册</a></li>
  </ul>
 </div>
 </nav>
 <script src="js/jquery-2.1.0.js"></script>
 <script src="js/bootstrap.js"></script>
</body>
</html>

效果图：

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

您可能感兴趣的文章:

JavaScript 上万关键字瞬间匹配实现代码
发一篇之前写的文章，平时还是经常用到的，尤其是河蟹词特别多的聊天系统里
2013-07-07
js实现轮播图自动切换
这篇文章主要为大家详细介绍了js实现轮播图自动切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
解析为什么axios会有params和data两个参数
本文给大家分享为什么axios会有params和data两个参数,先来回顾一下axios的基本使用,怎么发送一个请求,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2023-10-10
js按指定格式显示日期时间的样式代码
按指定格式显示日期时间在开发与时间相关的应用时非常有用，接下来与大家分享下格式化显示日期时间的方法，感兴趣的朋友可以参考下哈
2013-04-04
原生JavaScript实现购物车
这篇文章主要为大家详细介绍了原生JavaScript实现购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
本篇文章主要介绍了JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法，具有一定的参考价值，有兴趣的可以了解一下。
2016-12-12
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
这篇文章主要介绍了JS使用正则表达式获取小括号、中括号及花括号内容的方法,涉及javascript针对三种括号正则匹配的相关操作技巧,需要的朋友可以参考下
2018-06-06
javascript实现倒计时小案例
这篇文章主要为大家详细介绍了javascript实现倒计时小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
canvas实现探照灯效果
本文介绍了使用clip()方法实现一个探照灯效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
es6 字符串String的扩展(实例讲解)
下面小编就为大家带来一篇es6 字符串String的扩展(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08