BS3 Button Group

簡介

按鈕群組 (button group) 有二個基礎樣式類別：.btn-group 及 .btn-group-vertical。基本作用在將數個按鈕以水平 (.btn-group) 或垂直 (.btn-group-vertical) 的方式組成群組，藉以將按鈕分門別類；或將相關的按鈕組成一群，形成類似選取按鈕 (radio button) 或檢核框 (check box) 的功能。若以 CSS 類別為 .btn-toolbar 的容器包覆，可形成工具列。當按鈕群組為垂直排列時，其寬度會以選項中最寬的項目寬度為準。使用 .btn-group 時可搭配 <a> 或 <button> 標記，但以搭配 <a> 標記時比較容易使用 .btn-group-justified 修飾類別。

修飾類別如下：

.btn-group-lg, .btn-grounp-md, btn-group-sm, .btn-group-xs: 用來改變按鈕的尺寸。和 .btn-group 一起使用，群組中的按鈕會具有相同的大小。
.btn-group-justified: 讓按鈕群組的寬度佔據容器 100% 的寬度，每個按鈕的寬度一致。此修飾類別只能和 .btn-group 一齊使用，和 .btn-group-vertical 有互斥性，使用 .btn-group-justified 時，按鈕無法垂直排列。另，在和<button> 搭配使用時，每一個按鈕都必須再用一個 .btn-group 的容器包覆。

按鈕群組並沒有底色的設定，而是借用按鈕的底色：.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning 及 .btn-danger，所以群組中的每個按鈕都要設定，每個按鈕的底色不見得要一致，就看需求為何了。

以下為 BS3 v3.3.6 的 bootstrap.css 樣式表中 .btn-group 及 .btn-group-vertical 相關的樣式定義：

.btn-group,
.btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
    position: relative;
    float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
    z-index: 2;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
    margin-left: -1px;
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}
.btn-group > .btn:first-child {
    margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group > .btn-group {
    float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
    border-radius: 0;
}
.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
    outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
    padding-right: 8px;
    padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
    padding-right: 12px;
    padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
    -webkit-box-shadow: none;
            box-shadow: none;
}
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
    float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
    margin-top: -1px;
    margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
    border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.btn-group-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
    display: table-cell;
    float: none;
    width: 1%;
}
.btn-group-justified > .btn-group .btn {
    width: 100%;
}
.btn-group-justified > .btn-group .dropdown-menu {
    left: auto;
}
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.btn-group-* 尺寸相關樣式的定義如下：

.btn-lg,
.btn-group-lg > .btn {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}
.btn-sm,
.btn-group-sm > .btn {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
.btn-xs,
.btn-group-xs > .btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.toolbar 的相關樣式定義如下：

.btn-toolbar {
    margin-left: -5px;
}
.btn-toolbar .btn,
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
    float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
    margin-left: 5px;

範例

範例中共展示四個按鈕群組，一個略為複雜的水平按鈕群組，一個簡單的垂直按鈕群組，二個佔據全版寬的水平按鈕群組，一個用 <a> 標記製作按鈕，一個用 <button> 製作按鈕，在套用 .btn-group-justified 時， HTML 程式碼的寫法有很大的不同，需要留意。

圖 1. 範例

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    max-width: 1000px;
    padding: 20px;
}
</style>

CSS 中沒有特別需要定義的樣式。

HTML

<body>
    
    
    
        
            HTML
            CSS
            Javascript
            
                About Us
                
                    
                    Toggle Dropdown
                
                
                    Our Story
                    Our Team
                    Contact Us
                
            
        
    
    
    
    
        
            HTML
            CSS
            Javascript
        
    
    
    
    
    
        
            HTML
            CSS
            Javascript
        
    
    
    
    
        
            
                
            
            
                
            
            
                
            
        
    
</body>

在 .btn-group 及 .btn-group-vertical 的容器中，第 4,25,35 行也可以加入 .text-left, .text-center 或 .text-right 樣式類別以調整按鈕群組在容器中的位置。
第 46~54 行中，每一個按鈕都入須另行用 .btn-group 容器包覆，這是使用 .btn-group-justified 和 <button> 標記搭配時不方便的地方。

熊伯的外接硬碟

2016年6月14日星期二

BS3 Button Group

BS3 Button Group

簡介

範例

CSS

HTML

沒有留言:

張貼留言

2016年6月14日 星期二

BS3 Button Group

CSS

HTML

沒有留言:

張貼留言

2016年6月14日星期二