<!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是為了讓下拉菜單里面的鏈接的顏色從黑色變成更像超級鏈接的藍(lán)色-->
  <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之前，寫一個下拉菜單，要定義一個隱藏圖層，當(dāng)鼠標(biāo)懸?；蛘唿c擊相應(yīng)的超級鏈接之后，此圖層顯示出來。當(dāng)鼠標(biāo)懸停在此隱藏圖層，此隱藏圖層依舊顯示，當(dāng)鼠標(biāo)離開此隱藏圖層，則此隱藏圖層繼續(xù)從顯示變成隱藏，很麻煩的。

如果大家還想深入學(xué)習(xí)，可以點擊這里進(jìn)行學(xué)習(xí)，再為大家附3個精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實戰(zhàn)教程

Bootstrap插件使用教程

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

您可能感興趣的文章: