BS3 Buttons
簡介
「按鈕」(button) 是所有使用者介面中不可或缺的元件，可能具有各種不同的外觀，但基本的作業是一樣的；使用者可以點按一個按鈕，要求應用程式執行一個動作。BS3 中的按鈕有 7 種，都用 CSS 類別設定，具有不同的底色：
- .btn-default
- .btn-primary
- .btn-success
- .btn-info
- .btn-warning
- .btn-danger
- .btn-link （唯一不具外框的按鈕）
按鈕的大小則有 5 種，其中 .btn-block 的 width 屬性值為 100%，所以會佔據其容器的全寬。
- .btn-lg (large)
- .btn-md (medium, default size)
- .btn-sm (small)
- .btn-xs (extra small)
- .btn-block (width=100%)
在 BS3 v3.3.6 的 bootstrap.css 樣式表中，可以找到 .btn CSS 基礎類別及其相關的修飾類別如下：
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
color: #333;
text-decoration: none;
}
.btn:active,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-default:focus,
.btn-default.focus {
color: #333;
background-color: #e6e6e6;
border-color: #8c8c8c;
}
.btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
color: #333;
background-color: #d4d4d4;
border-color: #8c8c8c;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
background-image: none;
}
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
background-color: #fff;
border-color: #ccc;
}
.btn-default .badge {
color: #fff;
background-color: #333;
}
上面只列出了 .btn 及 .btn-default 的樣式定義，其它的 .btn-primary, .btn-success, .btn-info, .btn-warning 及 .btn-danger 等的樣式設定，除了使用的顏色外，其它的基本設定都和 .btn-default 相同，為了不佔篇幅，所以省略了。以下則為按鈕大小的 CSS 定義：
.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;
}
.btn-block {
display: block;
width: 100%;
}
.btn-block + .btn-block {
margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
width: 100%;
}
在 .btn{} 中並沒有定義 width 及 height 屬性，如果要客製按鈕的尺寸，直接重新定義 font-size, line-height 及 padding 值即可。
範例
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width: 1000px;
padding:20px;
}
</style>
CSS 中沒有特別的設定。
HTML
<body>
</body>
HTML 中建立了三個 <div> 以二條子平分隔線區隔。第一個 <div> 展示不同樣式的各種按鈕；第二個 <div> 展示各不同樣式的按妞，在失效 (disabled) 的狀態下的外觀；第三個 <div> 展示不同尺寸的按鈕。
沒有留言:
張貼留言