31.Bootstrap(中文教程)元件：Dropdown:下拉式选单

ㄧ.下拉式选单

<div class="component" id="demo">  <div class="dropdown">    <button class="btn btn-outline-warning dropdown-toggle" data-toggle="dropdown">Dropdown</button>    <a href="#" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown">Dropdown</a>    <div class="dropdown-menu">      <div class="dropdown-header">Web language</div>      <a href="#" class="dropdown-item">HTML</a>      <a href="#" class="dropdown-item">CSS</a>      <a href="#" class="dropdown-item">JavaScript</a>      <div class="dropdown-divider"></div>      <a href="#" class="dropdown-item">More</a>    </div>  </div></div>.demo.component{  padding: 50px;}

重点：

1.父元素的结构为.dropdown
2.第二个外层为.dropdown-menu
3. .dropdown-item为每一个选项的连结并且为.dropdown-menu的子元素
4.另外第二个外层另外添加button.dropdown-toggle里面还要加入data-toggle="dropdown"，这样下拉式选单功能就完成

codepen
参考：bootstrap4