Bootstrap component-based drop-down menu summary and bootstrap Summary

Bootstrap component-based drop-down menu summary and bootstrap Summary

1. single button drop-down menu

The outermost layer of the basic drop-down menu is the. dropdown div.

Now, you only need to change to the. btnd-group div to implement the single-button drop-down menu.

<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>

2. Split button drop-down menu

Split button drop-down menu, that is, split button and chart

<div class="btn-group">  <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>

3. Dimensions

Adding. btn-lg.btn-sm.btn-xs on a button can control button size

<div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">  Large button <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu">  ... </ul></div>

4. pop-up menu

You only need to add a. dropup on the outermost div to bring up the pop-up menu.

<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>

The above is a customized drop-down menu for bootstrap components introduced by xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!