ㄧ.下拉式選單

<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