Bootstrap组件之按钮组

最新推荐文章于 2024-07-20 14:15:00 发布

bboyjoe

最新推荐文章于 2024-07-20 14:15:00 发布

阅读量3.5k

点赞数 2

分类专栏： bootstrap 文章标签：前端 bootstrap 响应式

本文链接：https://blog.csdn.net/bboyjoe/article/details/47112979

版权

bootstrap 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

.btn-group——设置div为按钮组；

.btn-group-toolbar——设置div为按钮工具栏（须包裹按钮组）；

.btn-group-lg、.btn-group-sm、.btn-group-xs——改变按钮组的尺寸；

.btn-group-vertivcal——设置按钮组垂直堆叠排列；

.btn-group-justified——设置div包裹的按钮组充满父元素；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>组件_按钮组</title>
    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="jquery-1.11.1.min.js"></script>
    <script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <p>
        <div class="btn-group" role="group" aria-label="btn-group">
            <button type="button" class="btn btn-primary">Left</button>
            <button type="button" class="btn btn-primary">Middle</button>
            <button type="button" class="btn btn-primary">Right</button>
        </div>
    </p>
    <p>
        <div class="btn-toolbar" role="toolbar" aria-label="btn-toolbar">
            <div class="btn-group" role="group" aria-label="btn-group">
                <button type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-align-left"></span>
                </button>
                <button type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-align-center"></span>
                </button>
                <button type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-align-right"></span>
                </button>
            </div>
            <div class="btn-group" role="group" aria-label="btn-group">
                <button type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-text-size"></span>
                </button>
                <button type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-text-color"></span>
                </button>
                <button type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-text-background"></span>
                </button>
            </div>
        </div>
    </p>
    <p>
        <div class="btn-group btn-group-lg" role="group" aria-label="btn-group">
            <button type="button" class="btn btn-primary">Left</button>
            <button type="button" class="btn btn-primary">Middle</button>
            <button type="button" class="btn btn-primary">Right</button>
        </div>
        <div class="btn-group" role="group" aria-label="btn-group">
            <button type="button" class="btn btn-primary">Left</button>
            <button type="button" class="btn btn-primary">Middle</button>
            <button type="button" class="btn btn-primary">Right</button>
        </div>
        <div class="btn-group btn-group-sm" role="group" aria-label="btn-group">
            <button type="button" class="btn btn-primary">Left</button>
            <button type="button" class="btn btn-primary">Middle</button>
            <button type="button" class="btn btn-primary">Right</button>
        </div>
        <div class="btn-group btn-group-xs" role="group" aria-label="btn-group">
            <button type="button" class="btn btn-primary">Left</button>
            <button type="button" class="btn btn-primary">Middle</button>
            <button type="button" class="btn btn-primary">Right</button>
        </div>
    </p>
    <p>
        <div class="btn-group" role="group" aria-label="btn-group">
            <button type="button" class="btn btn-primary">首页</button>
            <button type="button" class="btn btn-primary">关于我们</button>
            <div class="btn-group" role="group" aria-label="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    新闻资讯
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                    <li><a href="#" role="menuitem">国际新闻</a></li>
                    <li><a href="#" role="menuitem">社会民生</a></li>
                    <li role="presentation" class="divider"></li>
                    <li><a href="#" role="menuitem">行业动态</a></li>
                    <li><a href="#" role="menuitem">集团要闻</a></li>
                </ul>
            </div>
        </div>
    </p>
    <p>
    <div class="btn-group-vertical" role="group" aria-label="btn-group">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
    </div>
    </p>
    <div class="btn-group btn-group-justified" role="group" aria-label="btn-group">
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Left</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Middle</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Middle</button>
        </div>

    </div>
</div>

</body>
</html>

bboyjoe

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap组件之按钮组

.btn-group——设置div为按钮组；.btn-group-toolbar——设置div为按钮工具栏（须包裹按钮组）；.btn-group-lg、.btn-group-sm、.btn-group-xs——改变按钮组的尺寸；.btn-group-vertivcal——设置按钮组垂直堆叠排列；.btn-group-justified——设置div包裹的按钮组充满父元素；
复制链接

扫一扫

专栏目录