Bootstrap学习总结笔记（8）-- 基本组件之按钮组

来源：互联网发布：linux如何安装mysql 编辑：程序博客网时间：2024/05/16 05:15

按钮组允许多个按钮被堆叠在同一行上，实现起来非常简单。

0x01 基本用法

直接看下面的例子：

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link href="../../css/bootstrap.min.css" rel="stylesheet">    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>    <script src="../../js/bootstrap.min.js"></script>    <title>按钮组</title></head><body><div class="container">    <div class="col-lg-3">        <h3>水平排列</h3>        <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>    </div>    <div class="col-lg-3">        <h3>垂直排列</h3>        <div class="btn-group btn-group-vertical">            <button type="button" class="btn btn-default">Top</button>            <button type="button" class="btn btn-default">Middle</button>            <button type="button" class="btn btn-default">Bottom</button>        </div>    </div>    <div class="col-lg-3">        <h3>两端对齐</h3>        <div class="btn-group btn-group-justified">            <a href="#" class="btn btn-default">Left</a>            <a href="#" class="btn btn-default">Middle</a>            <a href="#" class="btn btn-default">Right</a>        </div>    </div></div></body></html>

效果如下：

需要注意的是，两端对齐的样式只对a标签有效，对button无效。

0x02 嵌套下拉菜单

下面是一个按钮组嵌套下拉菜单的例子：

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link href="../../css/bootstrap.min.css" rel="stylesheet">    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>    <script src="../../js/bootstrap.min.js"></script>    <title>按钮嵌套下拉菜单</title></head><body><div class="container">    <div class="page-header">        <h3>按钮嵌套下拉菜单</h3>    </div>    <div class="btn-group">        <button type="button" class="btn btn-default">按钮1</button>        <button type="button" class="btn btn-default">按钮2</button>        <a href="#" class="btn btn-default">超链接</a>        <div class="btn-group">            <div class="dropdown">                <button type="button" class="btn btn-primary" data-toggle="dropdown">                    下拉菜单                    <span class="caret"></span>                </button>                <ul class="dropdown-menu">                    <li class="active"><a href="#">菜单1</a></li>                    <li><a href="#">菜单2</a></li>                    <li class="divider"></li>                    <li><a href="#">菜单3</a></li>                    <li><a href="#">菜单4</a></li>                </ul>            </div>        </div>        <button type="button" class="btn btn-default">按钮3</button>    </div></div></body></html>

效果如下：

1 0