表單中常見元素主要是:文本輸入框、下拉選擇框、單選按鈕、複選按鈕、文本域和按鈕。
1、基礎表單(僅對錶單內的 fieldset、legend、label標籤進行定製):
源碼:
fieldset {min-width: 0;padding: 0;margin: 0;border: 0;}
legend {display: block;width: 100%;padding: 0;margin-bottom: 20px;font-size: 21px;line-height: inherit;
color: #333;border: 0;border-bottom: 1px solid #e5e5e5;}
label {display: inline-block;margin-bottom: 5px;font-weight: bold;}
說明:主要將這幾個元素的margin、padding、border值進行設置; 還對input、select、textarea通過使用類名“form-control”進行設置 (寬度變成了100%;設置了一個淺灰色的邊框;具有4px的圓角;設置了placeholder的顏色爲#999;設置了陰影效果,而且在元素得到焦點之前,陰影和邊框效果會有所變化)。
用法:
<form role="form">
<div class="form-group">
<lable for="exampleInputEmail1">郵箱:</lable>
<input type="email" placeholder="請輸入您的郵箱地址" class=" form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<lable for="exampleInputPassword1">密碼:</lable>
<input type="password" placeholder="請輸入您的密碼" class="form-control" id="exampleInputPassword1" />
</div>
<div class="checkbox">
<lable>
<input type="checkbox">記住密碼
</lable>
</div>
<button type="submit" class="btn btn-default">進入郵箱</button>
</form>
2、水平表單(bootstrap默認的表單爲垂直顯示,使用類名".form-horizontal"使其水平顯示)
條件:在<form>元素使用類名"form-horizontal";配合bootstrap框架的網格系統。
“form-horizontal”的作用:設置表單控件padding和margin值;改變“form-group”的表現形式,類似網格系統中的“row”。
源碼:
.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {padding-top: 7px;margin-top: 0;margin-bottom: 0;}
.form-horizontal .radio,
.form-horizontal .checkbox {min-height: 27px;}
.form-horizontal .form-group {margin-right: -15px;margin-left: -15px;}
.form-horizontal .form-control-static {padding-top: 7px;}
@media (min-width: 768px) {
.form-horizontal .control-label {text-align: right;}
}
.form-horizontal .has-feedback .form-control-feedback {top: 0;right: 15px;}
用法:
<form class="form-horizontal" >
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-10">
<input type="email" placeholder="請輸入你的密碼" id="inputEmail" class="form-control" />
</div>
</div>
</form>
注:必須配合bootstrap框架的網格系統。
3、內聯表單(讓表單控件在一行顯示,在form元素中添加類名“form-inline”)
源碼:將其設置成內聯塊元素即可;
用法:
法一, 需要將換行顯示的內容放在<div class="form-group">中:
<form class="form-inline">
<div class="form-group">
<label for="email">郵箱</label>
</div>
<div class="form-group">
<input type="email" id="emali" class="form-control" placeholder="enter email" />
</div>
</form>
法二,label不需要放置在<div class="form-group">中,但是需要設置類名“sr-only”,將標籤隱藏。
“sr-only”設置樣式源碼:(將其隱藏是爲了讓屏幕閱讀器進行閱讀)
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}
用法: <form class="form-inline">
<div class="form-group">
<label for="email" class="sr-only">郵箱</label>
<input type="email" id="emali" class="form-control" placeholder="enter email" />
</div>
</form>