<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link href="css/bootstrap.css" rel="stylesheet" media="screen">
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
 <title>下拉菜單dropdown</title>
 </head>

 <body>
 <div class="btn-group">
   <!--將btn-default改成btn-link可以讓其變?yōu)橐粋€文字式的下拉菜單-->
 <button type="button" class="btn btn-link dropdown-toggle"
 data-toggle="dropdown">
 下拉菜單
    <!--這是下拉菜單的旁邊的小三角形-->
 <span class="caret"></span>
 </button>
 <!--這里在class中的dropdown-menu再加入label-warning等屬性可以改變下拉菜單的背景色-->
 <ul class="dropdown-menu" role="menu">
 <li>
    <!--這里的span中的class中的text-info是為了讓下拉菜單里面的鏈接的顏色從黑色變成更像超級鏈接的藍色-->
  <a href="#"><span class="text-info">項目一</span></a>
 </li>
 <li>
  <a href="#"><span class="text-info">項目二</span></a>
 </li>
 </ul>
 </div>
 </body>
</html>

沒有jquery支持下拉菜單也是無法工作的。下拉菜單本來就是一個javascript組件。

沒有bootstrap之前，寫一個下拉菜單，要定義一個隱藏圖層，當鼠標懸停或者點擊相應的超級鏈接之后，此圖層顯示出來。當鼠標懸停在此隱藏圖層，此隱藏圖層依舊顯示，當鼠標離開此隱藏圖層，則此隱藏圖層繼續(xù)從顯示變成隱藏，很麻煩的。

如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：

Bootstrap學習教程

Bootstrap實戰(zhàn)教程

Bootstrap插件使用教程

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

您可能感興趣的文章: