HTML笔记（八）bootstrap之下拉菜单

下拉菜单共分两种

1.按钮下拉菜单

2.列表下拉菜单

---

1.1按钮下拉菜单

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

---

1.2分裂式按钮下拉菜单

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

---

1.3向上弹出式菜单

只需要在最外层的div上添加一个.dropup就可以实现向上弹出的菜单

<div class="btn-group dropup">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

---

2.列表式下拉菜单

<ul class="nav">
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <!--dropdown-toggle是按钮开关-->
            电影
            <span class="caret">
                <!--caret是一个三角形下拉样式的小icon-->
            </span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">战狼2</a></li>
            <li><a href="#">煎饼侠</a></li>
        </ul>
    </li>
</ul>