Bootstrap组件 - 按钮组

知识点

类 | 描述

  • | :-: | -:
    .btn-group | 形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
    .btn-toolbar | 该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中,一般获得更复杂的组件。
    .btn-group-lg, .btn-group-sm, .btn-group-xs | 对按钮的尺寸进行调整,可以用在.btn上,也可以用在.btn-group上,对一组按钮进行大小调整
    .btn-group-vertical | 让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式
    .btn-group-justified | 两端对齐,让一组按钮拉长为相同的尺寸,填满父元素的宽度。

基本按钮组

    <div class="btn-group">
        <input type="button" value="1" name="" class="btn btn-default"/>
        <button type="button" value="" class="btn">1</button>
    </div>

按钮工具栏 .btn-toolbar

    <div class="btn-toolbar">
        <div class="btn-group">
            <input type="button" value="1" name="" class="btn btn-lg"/>
            <input type="button" value="2" name="" class="btn btn-primary"/>
            <input type="button" value="3" name="" class="btn btn-default"/>
        </div>
        <div class="btn-group">
            <input type="button" value="4" name="" class="btn btn-default btn-lg"/>
            <input type="button" value="5" name="" class="btn btn-primary"/>
            <input type="button" value="6" name="" class="btn btn-default"/>
        </div>
    </div>

垂直排列

btn-group-vertical
    <div class="btn-group-vertical" role="group" aria-label="">
        <button type="button" value="" class="btn btn-default">1</button>
        <button type="button" value="" class="btn btn-default">2</button>
        <div class="btn-group-vertical"><!--这里使用btn-group,连接更贴合;使用btn-group-vertical,会产生圆角边框-->
            <button value="Dropdown" type="button" value="" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                3
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
            </ul>
        </div>
        <button type="button" value="" class="btn btn-default">4</button>
    </div>

两端对齐排列的按钮组
让一组按钮拉长为相同的尺寸,填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。

btn-group-justified
    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group">
            <button type="button" value="" class="btn btn-default">1</button>
        </div>
        <div class="btn-group">
            <button type="button" value="" class="btn btn-default">2</button>
        </div>
        <div class="btn-group">
            <button value="Dropdown" type="button" value="" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                3
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
            </ul>
        </div>
    </div>

由于对两端对齐的按钮组使用了特定的 HTML 和 CSS (即 display: table-cell),两个按钮之间的边框叠加在了一起。在普通的按钮组中,margin-left: -1px 用于将边框重叠,而没有删除任何一个按钮的边框。然而,margin 属性不支持 display: table-cell。因此,根据你对 Bootstrap 的定制,你可以删除或重新为按钮的边框设置颜色。
IE8 不支持在两端对齐的按钮组中绘制边框,无论是 <a><button> 元素。为了照顾 IE8,把每个按钮放入另一个 .btn-group 中即可。


实践

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="Resource-type" content="Document"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>组件-按钮组</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <style>
        <!--
        .line{border-top:1px solid #afd9ee;margin:20px 0;}
        -->
    </style>
</head>
<body>
<div class="container">
    <!--基础的按钮组合 btn-group-->
    <div class="btn-group">
        <input type="button" value="1" name="" class="btn btn-default"/>
        <button type="button" value="" class="btn">1</button>
        <input type="button" value="2" name="" class="btn btn-default"/>
        <input type="button" value="3" name="" class="btn btn-default"/>
    </div>
    <div class="line"></div>
    <!--按钮组合-->
    <div class="btn-toolbar">
        <div class="btn-group">
            <input type="button" value="1" name="" class="btn btn-lg"/>
            <input type="button" value="2" name="" class="btn btn-primary"/>
            <input type="button" value="3" name="" class="btn btn-default"/>
        </div>
        <div class="btn-group">
            <input type="button" value="4" name="" class="btn btn-default btn-lg"/>
            <input type="button" value="5" name="" class="btn btn-primary"/>
            <input type="button" value="6" name="" class="btn btn-default"/>
        </div>
    </div>
    <div class="line"></div>
    <!--按钮尺寸 btn-group-lg btn-group-sm btn-group-xs-->
    <div class="btn-group btn-group-lg">
        <input type="button" value="1" name="" class="btn btn-default"/>
        <input type="button" value="2" name="" class="btn btn-default"/>
        <input type="button" value="3" name="" class="btn btn-default"/>
    </div>
    <div class="line"></div>
    <!--嵌套-->
    <div class="btn-group" role="group" aria-label="">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>

        <div class="btn-group" role="group">
            <!--在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容-->
            <button value="Dropdown" type="button" value="" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
            </ul>
        </div>
    </div>
    <div class="line"></div>
    <!--垂直排列的按钮组-->
    <div class="btn-group-vertical" role="group" aria-label="">
        <button type="button" value="" class="btn btn-default">1</button>
        <button type="button" value="" class="btn btn-default">2</button>
        <div class="btn-group"><!--使用btn-group,连接更贴合;使用btn-group-vertical,会产生圆角边框-->
            <button value="Dropdown" type="button" value="" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                3
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
            </ul>
        </div>
        <button type="button" value="" class="btn btn-default">4</button>
    </div>
    <div class="line"></div>
    <!--两端对齐-->
    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group">
            <button type="button" value="" class="btn btn-default">1</button>
        </div>
        <div class="btn-group">
            <button type="button" value="" class="btn btn-default">2</button>
        </div>
        <div class="btn-group">
            <button value="Dropdown" type="button" value="" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                3
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
            </ul>
        </div>
    </div>


</div>

</body>
</html>

推荐阅读更多精彩内容

  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 2,866评论 0 67
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 9,444评论 1 88
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 7,933评论 3 183
  • CSS全局样式 概览 移动设备优先 布局容器 1、container类用于固定宽度并支持响应式布局的容器 2、co...
    VEN_64d6阅读 234评论 0 1
  • 最近更新了AndroidStudio,升到了2.1,但是也同时出现了一些问题,比如查看Android源码的时候出现...
    路过麦田阅读 1,135评论 0 0