欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

第一次接觸神奇的Bootstrap導(dǎo)航條

 更新時間:2016年08月09日 14:53:32   作者:smartbetter  
第一次接觸神奇的Bootstrap導(dǎo)航條,Bootstrap讓W(xué)eb開發(fā)更迅速、更簡單,感興趣的小伙伴們可以參考一下

導(dǎo)航條(navbar)在Bootstrap中是一個獨立組件,導(dǎo)航條(navbar)和導(dǎo)航(nav)在Bootstrap中是有明顯的區(qū)別的。在導(dǎo)航條(navbar)中有一個背景色、而且導(dǎo)航條可以是純鏈接、表單、表單和導(dǎo)航一起結(jié)合等多種形式。

1.實戰(zhàn)一-帶二級菜單和表單的導(dǎo)航條

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>導(dǎo)航條</title>
 <link rel="stylesheet" >
 <!--css樣式-->
 <style >
  body{margin:30px;padding:30px;}
 </style>
</head>
<body>
<div class="navbar navbar-default" role="navigation">
 <!--標題通過“navbar-header”和“navbar-brand”來實現(xiàn)-->
 <div class="navbar-header">
  <a href="##" class="navbar-brand">標題</a>
 </div>
 <ul class="nav navbar-nav">
  <li class="active"><a href="##">首頁</a></li>
  <li class="dropdown">
  <a href="##" data-toggle="dropdown" class="dropdown-toggle">博客<span class="caret"></span></a>
  <!--二級菜單-->
  <ul class="dropdown-menu">
   <li><a href="##">二級菜單</a></li>
  </ul>
  </li>
  <li><a href="##">論壇</a></li>
 </ul>
 <!--表單-->
 <form action="##" class="navbar-form navbar-left" rol="search">
  <div class="form-group">
  <input type="text" class="form-control" placeholder="請輸入關(guān)鍵詞" />
  </div>
  <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>
<!-- 放置在文檔的結(jié)尾,使頁面加載速度更快 -->
<!-- 如果要使用Bootstrap的js插件,必須先調(diào)入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根據(jù)需要使用的js插件調(diào)用 -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

效果圖如下:

帶二級菜單和表單的導(dǎo)航條

Bootstrap的導(dǎo)航條中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,還可以使用其他元素:
1)導(dǎo)航條中的按鈕navbar-btn
2)導(dǎo)航條中的文本navbar-text
3)導(dǎo)航條中的普通鏈接navbar-link

 2.實戰(zhàn)二-固定導(dǎo)航條

<!--頂部導(dǎo)航條-->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navbar-header">
   <a href="##" class="navbar-brand">標題</a>
  </div>
  <ul class="nav navbar-nav">
  <li class="active"><a href="##">首頁</a></li>
  <li><a href="##">博客</a></li>
  <li><a href="##">論壇</a></li>
  </ul>
</div>
<!--底部導(dǎo)航條-->
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  <div class="navbar-header">
   <a href="##" class="navbar-brand">標題</a>
  </div>
  <ul class="nav navbar-nav">
  <li class="active"><a href="##">首頁</a></li>
  <li><a href="##">博客</a></li>
  <li><a href="##">論壇</a></li>
  </ul>
</div>
<!--正文內(nèi)容-->
<div class="content">網(wǎng)頁正文內(nèi)容</div>

效果圖如下:

固定導(dǎo)航條

3.實戰(zhàn)三-響應(yīng)式導(dǎo)航條

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
  <!-- .navbar-toggle樣式用于toggle收縮的內(nèi)容,即nav-collapse collapse樣式所在元素 -->
  <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
  <span class="sr-only"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>
  <!-- 確保無論是寬屏還是窄屏,navbar-brand都顯示 -->
  <a href="##" class="navbar-brand">標題</a>
 </div>
 <!-- 屏幕寬度小于768px時,div.navbar-responsive-collapse容器里的內(nèi)容都會隱藏,
  顯示icon-bar圖標,當點擊icon-bar圖標時,再展開。屏幕大于768px時,默認顯示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse">
  <ul class="nav navbar-nav">
   <li class="active"><a href="##">首頁</a></li>
   <li><a href="##">博客</a></li>
   <li><a href="##">論壇</a></li>
  </ul>
 </div>
</div>

效果圖如下:

響應(yīng)式導(dǎo)航條

有的時候會有需要反色的情況,Bootstrap為此提供了反色導(dǎo)航條,只是將navbar-deafult類名換成navbar-inverse,然后導(dǎo)航條的背景色和文本的顏色就會修改。

4.實戰(zhàn)四-分頁導(dǎo)航

1)帶頁碼的分頁導(dǎo)航

<!-- pagination:正常大小
 pagination-lg:讓分頁導(dǎo)航變大 
 pagination-sm:讓分頁導(dǎo)航變小-->
<ul class="pagination pagination">
 <li><a href="#">&laquo;首頁</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <!--當前狀態(tài)-->
 <li class="active"><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <!--禁用狀態(tài)-->
 <li class="disabled"><a href="#">尾頁&raquo;</a></li>
</ul>

 效果圖如下:

帶頁碼的分頁導(dǎo)航

2)翻頁分頁導(dǎo)航

<ul class="pager">
 <li><a href="#">&laquo;上一頁</a></li>
 <!--禁用狀態(tài)-->
 <li class="disabled"><a href="#">下一頁&raquo;</a></li>
</ul> 
<!--左右對齊-->
<ul class="pager">
 <li class="previous"><a href="#">&laquo;上一頁</a></li>
 <li class="next"><a href="#">下一頁&raquo;</a></li>
</ul>

 效果圖如下:

翻頁分頁導(dǎo)航

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論