BS3 Forms

簡介

BS3 中針對輸入表單的部份只提供對表單中各元件外觀樣式的定義，及各元件定位的定義，並沒有提供其它的特殊功能。先介紹幾個重要的樣式類別：

.control-label

定義在 <label> 標記中，修飾輸入欄位名稱的外觀及其定位。

.form-control

定義在 <input> 標記中，修飾輸入欄位的外觀及其定位。

.form-group

此為容器類別。容器中包含至少一對或一對以上的 <label> 及 <input> 組合，此容器類別將容器中的輸入欄位及其名稱組成一個群組，根據輸入表單的格式決定輸入欄位及其名稱的排列方式。最重要的一點是樣式為 .form-group 的容器樣式會具有 margin-bottom: 15px; 的屬性值，藉以區隔不同的輸入群組。可以和 .form-group 同時使用的又有下列各修飾類別：

.form-group-lg, .form-group-sm: 改變輸入欄位及其名稱的字體大小。
.has-success, has-warning, has-error: 以上修飾類別在驗證欄位輸入值後，可以用來變更輸入欄位名稱及輸入欄位邊框的顏色，藉以表現欄位輸入值驗證後的結果。

BS3 中的輸入表單有三種不同的格式：

form-vertical: form-vertical 是預設的格式，因此並沒有 .form-vertical 的樣式類別需要設定。此樣式的輸入欄位名稱 (.control-label) 和輸入欄位 (.form-control) 各自佔據一列，輸入欄位名稱位於輸入欄位的上一列。
.form-horizontal: .form-horizontal 表單格式中，.form-group 容器中的所有元件都位於同一列，輸入欄位名稱位於輸入欄位的左側。必須使用 col-*-* 格線系統定位，輸入欄無名稱靠右對齊，輸入欄位則靠左對齊。在表格中使用 col-*-* 時，不需要有 .row 容器，.form-group 容器本身和 .row 容器相當。
.form-inline: .form-inline 的 .form-group 容器中的元件都位於同一列中，這種排列方式比較緊湊，可以節省螢幕上的空間，只是要注意每個輸入欄位的所需長度，也許得特別定義一下。

以下為 BS3 v3.3.6 的 bootstrap.css 樣式表中部份和 form 相關的樣式設定，因為所有 <form> 中的所有標記 BS3 都有特別的樣式設定，實在是太多了，為了節省篇幅，就沒有全部在下面列出來，有需要時，請去參考 bootstrap.css 檔案的內容。

<style>
.form-group {
    margin-bottom: 15px;
}
.form-group-sm .form-control-static {
    height: 30px;
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.5;
}
.form-group-lg .form-control {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}
.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control::-moz-placeholder {
    color: #999;
    opacity: 1;
}
.form-control:-ms-input-placeholder {
    color: #999;
}
.form-control::-webkit-input-placeholder {
    color: #999;
}
.form-control::-ms-expand {
    background-color: transparent;
    border: 0;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: #eee;
    opacity: 1;
}
.form-control[disabled],
fieldset[disabled] .form-control {
    cursor: not-allowed;
}
</style>

範例 form-vertical (default)

此範例為 form-vertical。

圖 1. form-vertical (Default)

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    max-width: 1000px;
    padding: 20px;
}
#login {
    margin: 50px auto;
    width: 400px;
    height:auto;
    border: 1px solid gray;
}
form .title {
    padding:10px;
    font-size: 1.5em;
    text-align: center;
    background-color: #99CCFF;
}
form .inputArea {
    padding:20px;
    background-color: #eeeeee;
}
form .action {
    padding:10px;
    text-align: center;
    background-color: #99CCFF;
}
</style>

#login{} 設定了輸入視窗的外觀及大小寬度有 400px。
form .title{}, form .inputArea{}, form .action{} 各設定了輸入視窗中三個區域的底色及外觀。

HTML

只有二個輸入欄位，各自用一個 .form-group 的容器裝載，因此兩個欄位間的間距會比較大，有 15px。

範例 form-horizonal

此範例為 form-horizontal。

圖 2. form-horizontal

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    max-width: 1000px;
    padding: 20px;
}
#login {
    margin: 50px auto;
    width: 400px;
    height:auto;
    border: 1px solid gray;
}
form .title {
    padding:10px;
    font-size: 1.5em;
    text-align: center;
    background-color: #99CCFF;
}
form .inputArea {
    padding:20px;
    background-color: #eeeeee;
}
form .action {
    padding:10px;
    text-align: center;
    background-color: #99CCFF;
}
</style>

#login{} 設定了輸入視窗的外觀及大小，寛度有 400px。
form .title{}, form .inputArea{}, form .action{} 各設定了輸入視窗中三個區域的底色及外觀。

HTML

第 2 行將輸入表單設為 .form-horizontal 的格式。
第6, 7 行各用 col-*-* 類別設定 <label> 及 <input> 的寬度。在裝置螢幕的尺寸為 xs 時，其外觀等同於 form-vertical 的外觀。

範例 form-inline

此範例為 form-inline。

圖 3. form-inline

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    max-width: 1000px;
    padding: 20px;
}
#login {
    margin: 50px auto;
    width: 800px;
    height:auto;
    border: 1px solid gray;
}
form .title {
    padding:10px;
    font-size: 1.5em;
    text-align: center;
    background-color: #99CCFF;
}
form .inputArea {
    padding:20px;
    background-color: #eeeeee;
}
form .action {
    padding:10px;
    text-align: center;
    background-color: #99CCFF;
}
.form-inline .control-label {
    margin-left: 15px;
    margin-right: 5px;
}
</style>

#login{} 設定了輸入視窗的外觀及大小，為了讓兩個欄位有足夠的空間在同一列，寛度設為 800px。
form .title{}, form .inputArea{}, form .action{} 各設定了輸入視窗中三個區域的底色及外觀。
.form-inline .control-label{} 設定左、右邊界各為 15px 及 5px，這樣在視覺比較美觀，預設的情況下，輸入欄位的名稱和輸入欄位會靠得很近。

HTML

第 2 行將輸入表單設為 .form-inline 的格式。
兩個輸入欄位及其名稱都包含在同一個 .form-group 的容器中。

熊伯的外接硬碟

2016年7月25日星期一

BS3 Forms

BS3 Forms

簡介

範例 form-vertical (default)

CSS

HTML

範例 form-horizonal

CSS

HTML

範例 form-inline

CSS

HTML

沒有留言:

張貼留言

2016年7月25日 星期一

BS3 Forms

CSS

HTML

CSS

HTML

CSS

HTML

沒有留言:

張貼留言

2016年7月25日星期一