Bootstrap下拉菜單Dropdowns的實現(xiàn)代碼

更新時間：2017年03月17日 09:22:16 作者：boonyaxnn

這篇文章主要為大家詳細(xì)介紹了Bootstrap下拉菜單Dropdowns的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Bootstrap下拉菜單的具體代碼，供大家參考，具體內(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" 
   style="font-size:36px;: blue; width:100;height: 50; "> 
    常用語種 <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>

效果圖：

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

您可能感興趣的文章:

相關(guān)文章

Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(二)
這篇文章主要介紹了Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(二)的相關(guān)資料,需要的朋友可以參考下
2016-05-05
詳解webpack loader和plugin編寫
這篇文章主要介紹了詳解webpack loader和plugin編寫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
使用clipboard.js庫實現(xiàn)復(fù)制剪切功能
這篇文章介紹了clipboard.js實現(xiàn)復(fù)制功能的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
Javascript promise異步編程淺析
這篇文章主要介紹了Javascript promise異步編程，Promise 是異步編程的一種解決方案，可以替代傳統(tǒng)的解決方案–回調(diào)函數(shù)和事件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2023-04-04
JavaScript中find()和?filter()方法的區(qū)別小結(jié)
js中find和filter方法大家在工作中會經(jīng)常遇到,那么他們有什么區(qū)別呢？這篇文章主要給大家介紹了關(guān)于JavaScript中find()和?filter()方法區(qū)別的相關(guān)資料,需要的朋友可以參考下
2021-12-12
javascript 處理事件綁定的一些兼容寫法
javascript 事件綁定的一些兼容寫法整理非常不錯，感謝
2009-12-12
使用layui的router來進行傳參的實現(xiàn)方法
今天小編就為大家分享一篇使用layui的router來進行傳參的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
使用UrlConnection實現(xiàn)后臺模擬http請求的簡單實例
這篇文章主要介紹了使用UrlConnection實現(xiàn)后臺模擬http請求的簡單實例的相關(guān)資料,需要的朋友可以參考下
2017-01-01
js實現(xiàn)頁面圖片消除效果
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)頁面圖片消除效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
javascript自定義的addClass()方法
這篇文章主要介紹了javascript自定義的addClass()方法，通過傳參就可以實現(xiàn)樣式的添加
2014-05-05