Bootstrap如何實(shí)現(xiàn)下拉菜單Dropdowns

發(fā)布時(shí)間：2021-07-07 09:54:57 來(lái)源：億速云閱讀：131 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)Bootstrap如何實(shí)現(xiàn)下拉菜單Dropdowns的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

具體內(nèi)容如下

<!DOCTYPE html> 
<html> 
 <head> 
  <title>Bootstrap-下拉菜單標(biāo)題</title> 
   <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > 
  <style> 
   body {  
    padding-top: 150px;  
    padding-bottom: 40px;  
    font-family: '宋體';  
   } 
  </style> 
 </head> 
 
 <body> 
  <div class="container"> 
  <div class="dropdown"> 
   <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" 
   > 
    常用語(yǔ)種 <span class="caret"> </span> 
   </button> 
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
    <li role="presentation" class="dropdown-header"> 
     下拉菜單標(biāo)題 
    </li> 
    <li role="presentation" > 
     <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" >中文</a> 
    </li> 
    <li role="presentation" class="dropdown-header"> 
     下拉菜單標(biāo)題 
    </li> 
    <li role="presentation"> 
     <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" >英文</a> 
    </li> 
   </ul> 
  </div> 
  </div> 
  <script src="js/jquery.min.js"></script> 
  <script src="js/bootstrap.min.js"></script> 
 </body> 
</html>

效果圖：

Bootstrap如何實(shí)現(xiàn)下拉菜單Dropdowns

感謝各位的閱讀！關(guān)于“Bootstrap如何實(shí)現(xiàn)下拉菜單Dropdowns”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

Bootstrap如何實(shí)現(xiàn)下拉菜單Dropdowns

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽