「Bootstrap4入門」ネスティングボタングループを表示するサンプル

2014年8月22日2020年12月29日

書式
class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
使用例

<div class="container">
  <h2>ネスティングボタングループ</h2>
  <p>ボタングループにドロップダウンメニューを設定</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Sony
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
      </div>
    </div>
  </div>
</div>