Bootstrap-button-dropdowns

ブートストラップ-ボタンのドロップダウン

この章では、Bootstrapクラスを使用してボタンにドロップダウンメニューを追加する方法について説明します。 ボタンにドロップダウンを追加するには、ボタンとドロップダウンメニューを .btn-group にラップするだけです。 <span class = "caret"> </span>を使用して、ボタンがドロップダウンであることを示すインジケーターとして機能させることもできます。

次の例は、基本的な単一ボタンのドロップダウンを示しています-

<div class = "btn-group">

   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      Default
      <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>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
      Primary
      <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>

分割ボタンのドロップダウン

分割ボタンのドロップダウンは、ドロップダウンボタンと同じ一般的なスタイルを使用しますが、ドロップダウンとともにプライマリアクションを追加します。 分割ボタンには、左側にプライマリアクションがあり、右側にドロップダウンを表示するトグルがあります。

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Default</button>

   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      <span class = "caret"></span>
      <span class = "sr-only">Toggle Dropdown</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>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary">Primary</button>

   <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
      <span class = "caret"></span>
      <span class = "sr-only">Toggle Dropdown</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>

ボタンのドロップダウンサイズ

• .btn-large、.btn-sm、、または *.btn-xs の任意のボタンサイズでドロップダウンを使用できます。

<div class = "btn-group">

   <button type = "button" class = "btn btn-default dropdown-toggle btn-lg" data-toggle = "dropdown">
      Default
      <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>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary dropdown-toggle btn-sm" data-toggle = "dropdown">
      Primary
      <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>

<div class = "btn-group">
   <button type = "button" class = "btn btn-success dropdown-toggle btn-xs" data-toggle = "dropdown">
      Success
      <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>

ドロップアップバリエーション

メニューは、下ではなく上にドロップするように構築することもできます。 これを実現するには、親 .btn-group コンテナに .dropup を追加するだけです。

<div class = "row" style = "margin-left:50px; margin-top:200px">

   <div class = "btn-group dropup">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Default
         <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>

   <div class = "btn-group dropup">
      <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
         Primary
         <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>

</div>