BS3 Input Group
簡介
BS3 中的 .input-group 容器類別可以裝飾文字輸入欄位，讓文字欄位的外觀有更多的變化，像是在輸入欄位的前端、後端或前後兩端加入副元件，副元件的內容可以是圖像或文字，可以產生相當有趣的輸入欄位外觀。要注意的是 .input-group 只能用在文字輸入欄位，如果所期望的不是文字型態的輸入值，在取得輸入值後，得配合做一些資料型態的轉換。.input-group 也可放在 .form-group 下使用，並使用 col-*-* 來設定寬度。
- .input-group-addon
- 搭配 <span> 使用，在輸入欄位的前端或後端加入副件元件，加在前端或後端則依 <span> 的所在位置而定。
- .input-group-sm, .input-group-lg
- 改變 .input-group 欄位的大小。很有趣的是，此時副件元件的大小也會跟著改變，但如果是使用 form-group-* 來改變欄位大小時，副元件會保持原來的大小。
以下為 BS3 V3.3.6 的 bootstrap.css 樣式表中和 .input-group 相關的部份樣式定義，其它的請參考 bootstrap.css 檔案的內容。
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
.input-group[class*="col-"] {
float: none;
padding-right: 0;
padding-left: 0;
}
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
.input-group .form-control:focus {
z-index: 3;
}
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
select.input-group-lg > .form-control,
select.input-group-lg > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn {
height: 46px;
line-height: 46px;
}
textarea.input-group-lg > .form-control,
textarea.input-group-lg > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn,
select[multiple].input-group-lg > .form-control,
select[multiple].input-group-lg > .input-group-addon,
select[multiple].input-group-lg > .input-group-btn > .btn {
height: auto;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-group-sm > .form-control,
select.input-group-sm > .input-group-addon,
select.input-group-sm > .input-group-btn > .btn {
height: 30px;
line-height: 30px;
}
textarea.input-group-sm > .form-control,
textarea.input-group-sm > .input-group-addon,
textarea.input-group-sm > .input-group-btn > .btn,
select[multiple].input-group-sm > .form-control,
select[multiple].input-group-sm > .input-group-addon,
select[multiple].input-group-sm > .input-group-btn > .btn {
height: auto;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
border-radius: 0;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
line-height: 1;
color: #555;
text-align: center;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 4px;
}
範例
範例用 form-horizontal 的表單格式，並將 .input-group 置於 .form-group 容器中展示了三個 .input-group 的例子。副元件有加在輸入欄位的前方，也有加在後端和兩端都加的。副元件的形態有圖像和文字。
CSS
<style>
html {
width: 100%;
height: auto;
}
body {
margin: 0 auto;
max-width: 1000px;
padding: 20px;
}
#demo {
width: 400px;
height: auto;
}
</style>
#demo 定義了父元件的寬度為 400px。沒有設定其它的樣式。
HTML
<body>
</body>
HTML 程式碼淺顯易懂，不多作解釋了。
沒有留言:
張貼留言