首頁 >web前端 >js教程 >Bootstrap實現響應式導覽列效果_javascript技巧

Bootstrap實現響應式導覽列效果_javascript技巧

WBOY
WBOY原創
2016-05-16 15:22:591693瀏覽

為了在導覽列中添加響應式特性,您要折疊的內容必須包裹在帶有 classes .collapse、.navbar-collapse 的

中。折疊起來的導覽列其實是一個有class .navbar-toggle 和兩個 data- 元素的按鈕。第一個是 data-toggle,用來告訴 JavaScript 需要對按鈕做什麼,第二個是 data-target,指示要切換到哪一個元素。三個帶有 class .icon-bar 的 創建所謂的漢堡按鈕。這些會切換為 .nav-collapse
中的元素。為了實現以上這些功能,您必須包含 Bootstrap 折疊(Collapse)插件。
效果圖:

下面的實例示範了這一點:

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap 实例 - 响应式的导航栏</title> 
 <link href="bootstrap.min.css" rel="stylesheet"> 
 <script src="jquery-2.1.4.min.js"></script> 
 <script src="bootstrap.min.js"></script> 
</head> 
<body> 
 
<nav class="navbar navbar-default" role="navigation"> 
 <div class="navbar-header"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" 
   data-target="#example-navbar-collapse"> 
   <span class="sr-only">切换导航</span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
  </button> 
  <a class="navbar-brand" href="#">12345</a> 
 </div> 
 <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
  <ul class="nav navbar-nav"> 
   <li class="active"><a href="#">iOS</a></li> 
   <li><a href="#">fgghh</a></li> 
   <li class="dropdown"> 
   <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
    Java <b class="caret"></b> 
   </a> 
   <ul class="dropdown-menu"> 
    <li><a href="#">vgghhr</a></li> 
    <li><a href="#">dg</a></li> 
    <li><a href="#">sfg</a></li> 
    <li class="divider"></li> 
    <li><a href="#">分离的链接</a></li> 
    <li class="divider"></li> 
    <li><a href="#">另一个分离的链接</a></li> 
   </ul> 
   </li> 
  </ul> 
 </div> 
</nav> 
 
 
</body> 
</html> 

以上就是本文的全部內容,希望對大家的學習有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn