快捷導(dǎo)航

bootstrap實(shí)現(xiàn)二級(jí)下拉菜單效果

更新時(shí)間：2017年11月23日 10:14:37 作者：l_zhao1213

這篇文章主要為大家詳細(xì)介紹了bootstrap實(shí)現(xiàn)二級(jí)下拉菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了bootstrap實(shí)現(xiàn)二級(jí)下拉菜單展示的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap 實(shí)例 - 基本的按鈕下拉菜單</title> 
 <link href=http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css rel="stylesheet"> 
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
 <style type="text/css"> 
 .dropdown-submenu { 
  position: relative; 
 } 
 .dropdown-submenu > .dropdown-menu { 
  top: 0; 
  left: 100%; 
  margin-top: -6px; 
  margin-left: -1px; 
  -webkit-border-radius: 0 6px 6px 6px; 
  -moz-border-radius: 0 6px 6px; 
  border-radius: 0 6px 6px 6px; 
 } 
 .dropdown-submenu:hover > .dropdown-menu { 
  display: block; 
 } 
 .dropdown-submenu > a:after { 
  display: block; 
  content: " "; 
  float: right; 
  width: 0; 
  height: 0; 
  border-color: transparent; 
  border-style: solid; 
  border-width: 5px 0 5px 5px; 
  border-left-color: #ccc; 
  margin-top: 5px; 
  margin-right: -10px; 
 } 
 .dropdown-submenu:hover > a:after { 
  border-left-color: #fff; 
 } 
 .dropdown-submenu.pull-left { 
  float: none; 
 } 
 .dropdown-submenu.pull-left > .dropdown-menu { 
  left: -100%; 
  margin-left: 10px; 
  -webkit-border-radius: 6px 0 6px 6px; 
  -moz-border-radius: 6px 0 6px 6px; 
  border-radius: 6px 0 6px 6px; 
 } 
 </style> 
</head> 
<body> 
 
 
<div class="btn-group"> 
 <button type="button" class="btn btn-default">原始</button> 
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
 <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> 
 <li><a href="#">另一個(gè)功能</a></li> 
 <li><a href="#">其他</a></li> 
 <li class="divider"></li> 
 <li class="dropdown-submenu"> 
  <a href="#">More options </a> 
  <ul class="dropdown-menu"> 
  <li> 
   <a href="#">另一個(gè)功能1</a> 
  </li> 
  </ul> 
 </li> 
 </ul> 
</div> 
 
 
</body> 
</html>

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

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

Bootstrap實(shí)戰(zhàn)教程

Bootstrap Table使用教程

Bootstrap插件使用教程

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

您可能感興趣的文章:

相關(guān)文章

webpack使用及如何搭建cesium三維地球環(huán)境
這篇文章主要介紹了webpack快速上手之搭建cesium三維地球環(huán)境,本文使用的是webpack5，webpack5 升級(jí)后默認(rèn)是不支持polyfill的，編譯時(shí)會(huì)報(bào)錯(cuò)，本文主要介紹了Cesium以及Webpack的使用，如何將Cesium一步步地集成到Webpack中，需要的朋友可以參考下
2023-11-11
簡(jiǎn)單的漸變輪播插件
本文主要介紹了簡(jiǎn)單的漸變輪播插件，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
關(guān)于js中for in的缺陷淺析
這篇文章主要介紹了js中for in的缺陷，有需要的朋友可以參考一下
2013-12-12
js實(shí)現(xiàn)二代身份證號(hào)碼驗(yàn)證詳解
本文給大家分享一段超級(jí)全面的二代身份證號(hào)碼驗(yàn)證程序，由JS編寫而成，可以校驗(yàn)身份證的地址碼、出生日期碼、順序碼和數(shù)字校驗(yàn)碼。是身份證去偽存真的一大利器。
2014-11-11
JS動(dòng)畫效果打開(kāi)、關(guān)閉層的實(shí)現(xiàn)方法
這篇文章主要介紹了JS動(dòng)畫效果打開(kāi)、關(guān)閉層的實(shí)現(xiàn)方法,可實(shí)現(xiàn)js控制層從中心位置打開(kāi)與關(guān)閉的功能,涉及javascript操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
js手動(dòng)播放圖片實(shí)現(xiàn)圖片輪播效果
這篇文章主要為大家詳細(xì)介紹了js手動(dòng)播放圖片實(shí)現(xiàn)圖片輪播效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
uniapp組件uni-popup彈出層的使用
彈出層組件用于彈出一個(gè)覆蓋到頁(yè)面上的內(nèi)容，本文主要介紹了uniapp組件uni-popup彈出層的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-03-03
javascript 身份證號(hào)碼驗(yàn)證函數(shù)(可辨真?zhèn)危С?5或18位身份證號(hào))測(cè)試誤差為0
javascript 身份證號(hào)碼驗(yàn)證函數(shù)(可辨真?zhèn)?，支?5或18位身份證號(hào))測(cè)試誤差為0 ，非常不錯(cuò)，其實(shí)主要是特別熟悉身份證的算法。
2010-05-05
事件模型在各瀏覽器中存在差異
根據(jù) W3C DOM 2 Events 描述，EventTarget 接口被所有支持 DOM 事件模型的節(jié)點(diǎn)（Node）實(shí)現(xiàn)。該接口提供addEventListener 和removeEventListener方法，用來(lái)綁定或解綁一個(gè) EventListeners 接口到一個(gè) EventTarget。
2010-10-10
微信小程序頁(yè)面間值傳遞的兩種方法
這篇文章主要介紹了微信小程序-頁(yè)面間值傳遞的2種方法，每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-11-11