bootstrap——组件（二、按钮组）

来源：互联网发布：未来城网络黄金编辑：程序博客网时间：2024/05/17 08:15

1、按钮组

.btn-group
把一些按钮放在一个btn-group里面

这里写图片描述

<div class="btn-group">    <button type="button" class="btn btn-default">Left</button>    <button type="button" class="btn btn-default">Middle</button>    <button type="button" class="btn btn-default">Right</button></div>

2、按钮工具栏

.btn-toolbar
.btn-group
把一些btn-group放在btn-toolbar里面，就可以组成一个按钮工具栏

<div class="btn-toolbar" role="toolbar">  <div class="btn-group">...</div>  <div class="btn-group">...</div>  <div class="btn-group">...</div></div>

这里写图片描述

<div class="btn-toolbar">    <div class="btn-group">        <button type="button" class="btn btn-default">1</button>        <button type="button" class="btn btn-default">2</button>        <button type="button" class="btn btn-default">3</button>        <button type="button" class="btn btn-default">4</button>    </div>    <div class="btn-group">        <button type="button" class="btn btn-default">5</button>        <button type="button" class="btn btn-default">6</button>        <button type="button" class="btn btn-default">7</button>    </div>    <div class="btn-group">        <button type="button" class="btn btn-default">8</button>    </div></div>

3、尺寸

.btn-group-lg
.btn-group
.btn-group-sm
.btn-group-xs

<div class="btn-group btn-group-lg">...</div><div class="btn-group">...</div><div class="btn-group btn-group-sm">...</div><div class="btn-group btn-group-xs">...</div>

4、垂直排列

.btn-group-vertical

<div class="btn-group-vertical">  ...</div>

5、两端对齐排列的按钮组

.btn-group-justified

<div class="btn-group btn-group-justified">  ...</div>

6、嵌套

想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。

这里写图片描述

<div class="btn-group">    <button type="button" class="btn btn-default">1</button>    <button type="button" class="btn btn-default">2</button>    <div class="btn-group">        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">            Dropdown            <span class="caret"></span>        </button>        <ul class="dropdown-menu" role="menu">            <li><a href="#">Dropdown link</a></li>            <li><a href="#">Dropdown link</a></li>        </ul>    </div></div>

0 0