Home > Article > Web Front-end > 详解Bootstrap按钮组件（二） - 洛水三千

详解Bootstrap按钮组件（二） - 洛水三千

WBOYOriginal: 2016-05-20 16:50:401202browse

按钮下拉菜单

按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的。它们唯一的不同是外部容器div.dropdown换成了div.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="#">菜单列表1a>li>
            li>a href="#">菜单列表2a>li>
            li>a href="#">菜单列表3a>li>
            li>a href="#">菜单列表4a>li>
            li>a href="#">菜单列表5a>li>
        ul>
    div>

bootstrap.css文件

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

按钮的向下向上三角形

按钮的向下三角形，是通过在button标签中添加span标签元素，且类名为.caret

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

这个三角形式通过css来实现的，下面是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;
}

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：博客美化（一）：公告栏添加精致电子表 - 六月天空的芬芳Next article：前端学习一 - 喵小柒

See more

详解Bootstrap按钮组件（二） - 洛水三千

Related articles