Bootstrap button component (2)-luowi three thousand

Source: Internet
Author: User
Bootstrap button component (2)-luowi three thousand Button drop-down menu

The button drop-down menu is basically the same in appearance as the drop-down menu. The only difference between them is that the external container p. dropdown is changed to p. btn-group.

Button drop-down menu

  • Menu list 1
  • Menu list 2
  • Menu list 3
  • Menu list 4
  • Menu list 5

Bootstrap.css File

.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle {  outline: 0;}.btn-group > .btn + .dropdown-toggle {  padding-right: 8px;  padding-left: 8px;}.btn-group > .btn-lg + .dropdown-toggle {  padding-right: 12px;  padding-left: 12px;}.btn-group.open .dropdown-toggle {  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);}.btn-group.open .dropdown-toggle.btn-link {  -webkit-box-shadow: none;          box-shadow: none;}

Downward upward triangle of the button

The downward triangle of the button is to add the span tag element to the button tag and the class name is. caret.

Button drop-down menu

The following figure shows the source code of bootstrap.css:

.caret {  display: inline-block;  width: 0;  height: 0;  margin-left: 2px;  vertical-align: middle;  border-top: 4px solid;  border-right: 4px solid transparent;  border-left: 4px solid transparent;}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.