当前位置:编程学习 > 网站相关 >>

Bootstrap 组件 - 下拉菜单(Dropdowns)

标记(Markup)
需要使用.dropdown或者其它声明了 position: relative; 的元素来包容下拉触发器和下拉菜单。
[html] 
<div class="dropdown">  
  <!-- Link or button to toggle dropdown -->  
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">  
    <li><a tabindex="-1" href="#">Action</a></li>  
    <li><a tabindex="-1" href="#">Another action</a></li>  
    <li><a tabindex="-1" href="#">Something else here</a></li>  
    <li class="divider"></li>  
    <li><a tabindex="-1" href="#">Separated link</a></li>  
  </ul>  
</div>  
 
选择项(Options)
 
调整菜单位置
可以向.dropdown-menu添加.pull-right或.pull-left控制菜单位置。
[html]  
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">  
  ...  
</ul>  
 
子菜单
[html] 
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">  
  ...  
  <li class="dropdown-submenu">  
    <a tabindex="-1" href="#">More options</a>  
    <ul class="dropdown-menu">  
      ...  
    </ul>  
  </li>  
</ul>  
 
上拉菜单(Dropup)
用.dropup替换.dropdown即可。
[html]  
<div class="dropup">  
  <!-- Link or button to toggle dropdown -->  
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">  
    <li><a tabindex="-1" href="#">Action</a></li>  
    <li><a tabindex="-1" href="#">Another action</a></li>  
    <li><a tabindex="-1" href="#">Something else here</a></li>  
    <li class="divider"></li>  www.zzzyk.com
    <li><a tabindex="-1" href="#">Separated link</a></li>  
  </ul>  
</div>  
 
完整例子
[html]  
<div class="dropdown">  
  <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>  
  <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">  
    <li><a tabindex="-1" href="#">Action</a></li>  
    <li><a tabindex="-1" href="#">Another action</a></li>  
    <li><a tabindex="-1" href="#">Something else here</a></li>  
    <li class="divider"></li>  
    <li><a tabindex="-1" href="#">Separated link</a></li>  
  </ul>  
</div>  
 
补充:Web开发 , 其他 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,