Bootstrap 按钮组

Bootstrap按钮组将一系列按钮组合在一行中。

要创建按钮组,在一个<div>元素中封装一系列按钮,并在其上应用.btn-group类。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="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>
</body>
</html>

垂直按钮组

要创建垂直按钮组,请使用 .btn-group-vertical类。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-primary">Top</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Bottom</button>
    </div>
</div>
</body>
</html>

按钮工具栏

我们可以将按钮组合在一起来创建按钮工具栏。
要创建按钮工具栏,要在<div>元素中封装按钮组,并在其上应用.btn-toolbar类。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-toolbar">
        <div class="btn-group">
            <button type="button" class="btn btn-primary">1</button>
            <button type="button" class="btn btn-primary">2</button>
            <button type="button" class="btn btn-primary">3</button>
            <button type="button" class="btn btn-primary">4</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">5</button>
            <button type="button" class="btn btn-primary">6</button>
            <button type="button" class="btn btn-primary">7</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">8</button>
        </div>
    </div>
</div>
</body>
</html>

按钮组的高度

我们可以在按钮组上应用相关大小的类,如.btn-group-lg,.btn-group-sm或.btn-group-xs来创建更大或更小的按钮组。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-toolbar">
        <div class="btn-group btn-group-lg">
            <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>
    <br>
    <div class="btn-toolbar">
        <div class="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>
    <br>
    <div class="btn-toolbar">
        <div class="btn-group btn-group-sm">
            <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>
    <br>
    <div class="btn-toolbar">
        <div class="btn-group btn-group-xs">
            <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>
</div>
</body>
</html>

在组中对齐按钮

我们可以通过应用一个额外的类.btn-group-justified到.btn-group基类,来使一组按钮伸展到相同的大小以跨越其父类的整个宽度。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary">Left</a>
        <a href="#" class="btn btn-primary">Middle</a>
        <a href="#" class="btn btn-primary">Right</a>
    </div>
</div>
</body>
</html>

对齐按钮组

要使用<button>元素调整按钮组,请将每个按钮单独封装在.btn-group类中。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group btn-group-justified">
        <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">Right</button>
        </div>
    </div>
</div>
</body>
</html>
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部