Bootstrap learning button component (2)

In the previous article, we have introduced the button component in Bootstrap. This article will introduce the Bootstrap button component to you. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related recommendations: "bootstrap tutorial"

Button drop-down menu

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

<div class="btn-group">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            按钮下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">菜单列表1</a></li>
            <li><a href="#">菜单列表2</a></li>
            <li><a href="#">菜单列表3</a></li>
            <li><a href="#">菜单列表4</a></li>
            <li><a href="#">菜单列表5</a></li>
        </ul>
    </div>

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

The downward-upward triangle of the button

The downward triangle of the button is achieved by adding a span tag element to the button tag, and the class name is .caret

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        按钮下拉菜单
        <span class="caret"></span>
</button>

This triangle form is implemented through css, as follows It is bootstrap.css source code:

.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;
}

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Bootstrap learning button component (2). For more information, please follow other related articles on the PHP Chinese website!