首页>>导航菜单>>一个菜单上可以显示不同的下拉菜单,本案例仅用于演示效果(2016-06-19)

一个菜单上可以显示不同的下拉菜单,本案例仅用于演示效果

一个菜单上可以显示不同的下拉菜单,本案例仅用于演示效果

 

XML/HTML Code
  1. <div class="container">  
  2. <button data-dropdown="#basic" class="btn btn-danger">Basic</button>  
  3. <div class="dropdown-menu dropdown-anchor-top-left dropdown-has-anchor" id="basic">  
  4.     <ul>  
  5.         <li><a href="#">Item 1</a></li>  
  6.         <li><a href="#">Item 2</a></li>  
  7.         <li class="divider"></li>  
  8.         <li><a href="#">Item 3</a></li>  
  9.     </ul>  
  10. </div>  
  11. <button data-dropdown="#dark" class="btn btn-danger">Dark Theme</button>  
  12. <div class="dropdown-menu dropdown-anchor-top-left dropdown-has-anchor dark" id="dark">  
  13.     <ul>  
  14.         <li><a href="#">Item 1</a></li>  
  15.         <li><a href="#">Item 2</a></li>  
  16.         <li class="divider"></li>  
  17.         <li><a href="#">Item 3</a></li>  
  18.     </ul>  
  19. </div>  
  20. <button data-dropdown="#right" class="btn btn-danger">Right Dropdown</button>  
  21. <div class="dropdown-menu dropdown-anchor-left-center dropdown-has-anchor dark" id="right">  
  22.     <ul>  
  23.         <li><a href="#">Item 1</a></li>  
  24.         <li><a href="#">Item 2</a></li>  
  25.         <li class="divider"></li>  
  26.         <li><a href="#">Item 3</a></li>  
  27.     </ul>  
  28. </div>  
  29. <button data-dropdown="#noanchor" class="btn btn-danger">Without Anchor</button>  
  30. <div class="dropdown-menu dropdown-anchor-top-left" id="noanchor">  
  31.     <p>Any content here</p>  
  32. </div>  
  33. </div>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_565.html