[Bootstrap入门][组件-下拉菜单]

Posted 2022-12-05 zy691357966

[Bootstrap入门][组件-下拉菜单]

标签（空格分隔）： 未分类

---

用于显示链接列表的可切换性，有上下文的菜单。下拉菜单的 javascript 插件让它具有了交互性。

实例

将下拉菜单触发按钮和下拉菜单都包裹在.dropdown里，或者声明另一个position:relative的元素。然后加入组成菜单的html代码。

• tapindex=-1 代表TAP无法选中它。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

对齐

默认情况下，下拉菜单自动沿着父元素的上沿和左测被定位 100%宽度。为.dorpdown-menu添加.dropdown-menu-right类可以让菜单右对齐。

• 要记得对.dropdown那一块使用float:left。才能让下拉右对齐按钮，而不是父元素。

<div class="dropdown" style="  margin:2cm 4cm 3cm 4cm; float:left; ">
    <button class="btn btn-default dropdown-toggle " type="button" id='dropdownMenu1' data-toggle="dropdown" >Dropdown 
    <span class='caret'></span>    
    </button>
    <ul class="dropdown-menu dropdown-menu-right"  aria-labelledby="dropdownMenu1">
        <li><a href="#" tabindex="-1">Action</a></li>
        <li><a href="#" tabindex="-1">Another</a></li>
        <li><a href="#" tabindex="-1">Something else here</a></li>
        <li><a href="#" tabindex="-1">Separated link</a></li>
    </ul>
</div>