Bootstrap組件 - 按鈕組

知識點(diǎn)

類 | 描述

  • | :-: | -:
    .btn-group | 形成基本的按鈕組。在 .btn-group 中放置一系列帶有 class .btn 的按鈕。
    .btn-toolbar | 該 class 有助于把幾組 <div class="btn-group"> 結(jié)合到一個 <div class="btn-toolbar"> 中，一般獲得更復(fù)雜的組件。
    .btn-group-lg, .btn-group-sm, .btn-group-xs | 對按鈕的尺寸進(jìn)行調(diào)整，可以用在.btn上，也可以用在.btn-group上，對一組按鈕進(jìn)行大小調(diào)整
    .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，會產(chǎn)生圓角邊框-->
            <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。因此，根據(jù)你對 Bootstrap 的定制，你可以刪除或重新為按鈕的邊框設(shè)置顏色。
IE8 不支持在兩端對齊的按鈕組中繪制邊框，無論是 <a> 或 <button> 元素。為了照顧 IE8，把每個按鈕放入另一個 .btn-group 中即可。

實(shí)踐

<!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">
    <!--基礎(chǔ)的按鈕組合 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 屬性的內(nèi)容-->
            <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，會產(chǎn)生圓角邊框-->
            <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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 第5章 菜單、按鈕及導(dǎo)航 一、下拉菜單 小伙伴們注意，在Bootstrap框架中的下拉菜單組件是一個獨(dú)立的組件，根...
    凜0_0閱讀 5,056評論 0贊 66
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,805評論 1贊 92
  • Bootstrap是什么？ 一套易用、優(yōu)雅、靈活、可擴(kuò)展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 10,925評論 3贊 184
  • CSS全局樣式 概覽 移動設(shè)備優(yōu)先 布局容器 1、container類用于固定寬度并支持響應(yīng)式布局的容器 2、co...
    VEN_64d6閱讀 1,444評論 0贊 1
  • 最近更新了AndroidStudio，升到了2.1，但是也同時出現(xiàn)了一些問題，比如查看Android源碼的時候出現(xiàn)...
    路過麥田閱讀 1,606評論 0贊 0