bootstrap導航條實現(xiàn)代碼

更新時間：2016年12月28日 17:23:45 作者：有點懶惰的小青年

這篇文章主要為大家詳細介紹了bootstrap導航條的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了bootstrap導航條的具體代碼，供大家參考，具體內(nèi)容如下

<body style="padding-top:50px">
<!--
 navbar  導航條的基礎樣式
 nav navbar-nav 導航條里菜單的固定樣式組合class
 navbar-default 導航條的默認樣式
 navbar-static-top 導航條為直角
 navbar-fixed-top 導航條固定在上面,一般這時候要給body設置padding值或margin
 navbar-fixed-bottom 導航條固定在下面
 -->
<div class="container">
 <!-- 默認樣式的導航條 -->
 <nav class="navbar navbar-default">
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">W3School</a></li>
  <li><a href="#">雪碧</a></li>
  <li><a href="#">果汁</a></li>
 </ul>
 </nav>

 <!-- 黑色的導航條 -->
 <nav class="navbar navbar-inverse">
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">W3School</a></li>
  <li><a href="#">雪碧</a></li>
  <li><a href="#">果汁</a></li>
 </ul>
 </nav>

 <!-- 直角的導航條 -->
 <nav class="navbar navbar-inverse navbar-static-top">
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">W3School</a></li>
  <li><a href="#">雪碧</a></li>
  <li><a href="#">果汁</a></li>
 </ul>
 </nav>

 <!-- 固定在下面/上面的導航條 -->
 <nav class="navbar navbar-inverse navbar-fixed-top">
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">W3School</a></li>
  <li><a href="#">雪碧</a></li>
  <li><a href="#">果汁</a></li>
 </ul>
 </nav>
</div>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
</body>

效果：

導航條的其他樣式：

<!--
 navbar-header  導航的頭部，一般情況下放logo
 navbar-brand  用來放logo的，需要配合navbar-header
 -->

<!-- 一般情況下都會把nav包在container外面 -->
<nav class="navbar navbar-default">
 <div class="container">
 <div class="navbar-header">
  <a href="#" class="navbar-brand">
  <img src="user_photo.png" height="20"/>
  </a>
 </div>
 
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">W3School</a></li>
  <li><a href="#">雪碧</a></li>
  <li><a href="#">果汁</a></li>
 </ul>
 </div>
</nav>

<!-- 對齊方式的導航條 -->
<nav class="navbar navbar-default">
 <div class="container">
 <div class="navbar-header">
  <a href="#" class="navbar-brand">logo</a>
 </div>
 
 <!-- navbar-left表示內(nèi)容以左邊對齊 -->
 <ul class="nav navbar-nav navbar-left">
  <li class="active"><a href="#">W3School</a></li>
  <li><a href="#">雪碧</a></li>
  <li><a href="#">果汁</a></li>
 </ul>

 <!-- navbar-right表示內(nèi)容以右邊對齊 -->
 <ul class="nav navbar-nav navbar-right">
  <li><a href="#">登陸</a></li>
  <li><a href="#">注冊</a></li>
 </ul>
 </div>
</nav>

<!-- 有鏈接與文字的導航條 -->
<nav class="navbar navbar-default">
 <div class="container">
 <div class="navbar-header">
  <a href="#" class="navbar-brand">logo</a>
 </div>
 
 <!-- navbar-left表示內(nèi)容以左邊對齊 -->
 <ul class="nav navbar-nav navbar-left">
  <li class="active"><a href="#">W3School</a></li>
  <li><a href="#">雪碧</a></li>
  <li><a href="#">果汁</a></li>
 </ul>

 <a href="#" class="navbar-link navbar-text">鏈接</a>
 <p class="navbar-text">這里是一段文字</p>

 <!-- navbar-right表示內(nèi)容以右邊對齊 -->
 <ul class="nav navbar-nav navbar-right">
  <li><a href="#">登陸</a></li>
  <li><a href="#">注冊</a></li>
 </ul>
 </div>
</nav>

<!-- 有表單的導航條 -->
<nav class="navbar navbar-default">
 <div class="container">
 <div class="navbar-header">
  <a href="#" class="navbar-brand">logo</a>
 </div>
 
 <!-- navbar-left表示內(nèi)容以左邊對齊 -->
 <ul class="nav navbar-nav navbar-left">
  <li class="active"><a href="#">W3School</a></li>
  <li><a href="#">雪碧</a></li>
  <li><a href="#">果汁</a></li>
 </ul>

 <button class="btn btn-success navbar-btn">搜索</button> 

 <!-- 如果導航里有form，需要給form添加navbar-form,如果讓他們在一行顯示添加navbar-left -->
 <form action="aaa.html" class="navbar-form navbar-left">
  <input type="text" class="form-control"/>
  <button class="btn btn-default">搜索</button>
 </form>
 <!-- navbar-right表示內(nèi)容以右邊對齊 -->
 <ul class="nav navbar-nav navbar-right">
  <li><a href="#">登陸</a></li>
  <li><a href="#">注冊</a></li>
 </ul>
 </div>
</nav>

效果：