Home  >  Article  >  Web Front-end  >  Bootstrap button drop-down menu example tutorial

Bootstrap button drop-down menu example tutorial

零下一度
零下一度Original
2017-07-03 11:57:201469browse

Previous words

The button-type drop-down menu looks basically the same as the drop-down menu in appearance. The difference is that ordinary drop-down menus are block elements, while button drop-down menus are inline-block elements. This article will introduce the Bootstrap button drop-down menu in detail

Overview

The button drop-down menu is actually an ordinary drop-down menu. The only difference is the external container "div.dropdown" Changed to "div.btn-group", the display changed from block to inline-block

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">按钮式下拉菜单 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li>
  </ul></div><div class="dropdown">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">普通下拉菜单 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li>
  </ul></div>


Pop up

Some menus need to pop up. For example, the menu is at the bottom of the page, and this menu happens to have a drop-down menu. In order to give users a better experience, the drop-down menu has to pop up. In the Bootstrap framework, a class name "dropup" is specially proposed for this effect. You only need to add this class name to "btn-group"

[Triangle]

 Button The default downward triangle is created by adding a "" tag element to the

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:How to use tag in loopNext article:How to use tag in loop