Bootstrap 按钮分组

原创

胜东 2021-06-04 17:10:32 ©著作权

文章标签 bootstrap教程 bootstrap 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者胜东的原创作品，请联系作者获取转载授权，否则将追究法律责任

Bootstrap 按钮分组

Bootstrap 按钮分组：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
</head>

<body style="margin:50px 0">
    <div class="container">
        <div class="btn-group">
            <button class="btn btn-default">01</button>
            <button class="btn btn-default">02</button>
            <button class="btn btn-default">03</button>
            <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">04<span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="">01</a>
                    </li>
                    <li><a href="">02</a>
                    </li>
                    <li><a href="">03</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="btn-toolbar">
            <div class="btn-group">
                <button class="btn btn-default" type="button">01</button>
                <button class="btn btn-default" type="button">02</button>
                <button class="btn btn-default" type="button">03</button>
            </div>
            <div class="btn-group">
                <button class="btn btn-default">04</button>
            </div>
            <div class="btn-group btn-group-lg">
                <button class="btn btn-default" type="button">01</button>
                <button class="btn btn-default" type="button">02</button>
                <button class="btn btn-default" type="button">03</button>
            </div>
            <div class="btn-group">
                <button class="btn btn-default" type="button">01</button>
                <button class="btn btn-default" type="button">02</button>
                <button class="btn btn-default" type="button">03</button>
            </div>
            <div class="btn-group btn-group-sm">
                <button class="btn btn-default" type="button">01</button>
                <button class="btn btn-default" type="button">02</button>
                <button class="btn btn-default" type="button">03</button>
            </div>
            <div class="btn-group btn-group-xs">
                <button class="btn btn-default" type="button">01</button>
                <button class="btn btn-default" type="button">02</button>
                <button class="btn btn-default" type="button">03</button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="dist/jQuery/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="dist/js/bootstrap.js"></script>
</body>

</html>