详解Bootstrap按钮组件（二） - 洛水三千-html教程-PHP中文网

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

php中文网

发布： 2016-05-20 16:50:40

原创

1475人浏览过

按钮下拉菜单

按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的。它们唯一的不同是外部容器div.dropdown换成了div.btn-group

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

登录后复制

bootstrap.css文件

<span style="color: #800000;">.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle </span>{<span style="color: #ff0000;">
  outline</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.btn-group > .btn + .dropdown-toggle </span>{<span style="color: #ff0000;">
  padding-right</span>:<span style="color: #0000ff;"> 8px</span>;<span style="color: #ff0000;">
  padding-left</span>:<span style="color: #0000ff;"> 8px</span>;
}<span style="color: #800000;">
.btn-group > .btn-lg + .dropdown-toggle </span>{<span style="color: #ff0000;">
  padding-right</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
  padding-left</span>:<span style="color: #0000ff;"> 12px</span>;
}<span style="color: #800000;">
.btn-group.open .dropdown-toggle </span>{<span style="color: #ff0000;">
  -webkit-box-shadow</span>:<span style="color: #0000ff;"> inset 0 3px 5px rgba(0, 0, 0, .125)</span>;<span style="color: #ff0000;">
          box-shadow</span>:<span style="color: #0000ff;"> inset 0 3px 5px rgba(0, 0, 0, .125)</span>;
}<span style="color: #800000;">
.btn-group.open .dropdown-toggle.btn-link </span>{<span style="color: #ff0000;">
  -webkit-box-shadow</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
          box-shadow</span>:<span style="color: #0000ff;"> none</span>;
}

登录后复制

按钮的向下向上三角形

盘古大模型

华为云推出的一系列高性能人工智能大模型

207

查看详情

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

<span style="color: #0000ff;"><</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-default dropdown-toggle"</span><span style="color: #ff0000;"> data-toggle</span><span style="color: #0000ff;">="dropdown"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        按钮下拉菜单
        </span><span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="caret"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>

登录后复制

这个三角形式通过css来实现的，下面是bootstrap.css源码：

<span style="color: #800000;">.caret </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  margin-left</span>:<span style="color: #0000ff;"> 2px</span>;<span style="color: #ff0000;">
  vertical-align</span>:<span style="color: #0000ff;"> middle</span>;<span style="color: #ff0000;">
  border-top</span>:<span style="color: #0000ff;"> 4px solid</span>;<span style="color: #ff0000;">
  border-right</span>:<span style="color: #0000ff;"> 4px solid transparent</span>;<span style="color: #ff0000;">
  border-left</span>:<span style="color: #0000ff;"> 4px solid transparent</span>;
}

登录后复制