Bootstrap CSS佈局之表單

NO IMAGE

1. 表單

表單是html網頁互動很重要的部分,同時也是BootSTrap框架中的核心內容,表單提供了豐富的樣式(基礎、內聯、橫向)

表單的元素
input textarea select checkbox radio(checkbox和radio是input的特殊型別)
其他標籤
form fieldset legend

1.1.基礎表單


<!--基礎表單:
1.向父 <form> 元素新增 role="form"。
2.把標籤label和控制元件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。因為form-group提供了margin
3.向所有的文字元素 <input>、<textarea> 和 <select> 新增 class .form-control。-->
<form role="form">
<fieldset>
<legend>使用者登入</legend>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" placeholder="請輸入名稱">
</div>
<div class="form-group">
<label for="psd">密碼</label>
<input type="text" class="form-control" id="psd" placeholder="請輸入密碼">
</div>
<div class="checkbox">
<label><input type="checkbox">記住密碼</label>
</div>
<button type="submit" class="btn btn-default">登入</button>
</fieldset>
</form>

1.2.內聯表單


<!-- 內聯表單:
如果需要建立一個表單,它的所有元素是內聯的,向左對齊的,標籤是並排的,請向 <form> 標籤新增 class .form-inline -->
<form role="form" class="form-inline">
<fieldset>
<legend>使用者登入</legend>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" placeholder="請輸入名稱">
</div>
<div class="form-group">
<label for="psd">密碼</label>
<input type="text" class="form-control" id="psd" placeholder="請輸入密碼">
</div>
<div class="checkbox">
<label><input type="checkbox">記住密碼</label>
</div>
<button type="submit" class="btn btn-default">登入</button>
</fieldset>
</form>

1.3.橫向表單


<!-- 橫向表單:
1.向父 <form> 元素新增 class .form-horizontal。
2.把標籤和控制元件放在一個帶有 class .form-group 的 <div> 中。
3.向標籤新增 class .control-label。
4.要實現橫向表單,還要用柵格類-->
<form role="form" class="form-horizontal">
<fieldset>
<legend>使用者登入</legend>
<div class="form-group">
<label class="control-label col-lg-1" for="name">姓名</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="name" placeholder="請輸入名稱">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-1" for="psd">密碼</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="psd" placeholder="請輸入密碼">
</div>
</div>
</fieldset>
</form>

1.4.表單控制元件

input元素:
使用input元素的時候,必須宣告type型別,否則可能引起問題。

select元素:
多行選擇設定multiple=”multiple”

textarea元素:
textarea元素定義了rows數字即可定義大文字框的高度,cols寬度。但是textarea應用了form-control央視,則cols無效。

checkbox和radio(是兩個特殊的type)
注意使用的時候,每個input外部用label包住,並且在最外層用容器元素寶珠,並應用相應的.checkbox和.radio樣式。


//使用
<div class="checkbox">
<label><input type="checkbox">學習前端</label>
</div>
<div class="radio">
<label><input type="radio" name="optionsRadios" value="male">男生</label>
</div>
<div class="radio">
<label><input type="radio" name="optionsRadios" value="female">女生</label>
</div>

//原始碼
//讓單選框和核取方塊都能左右和上下居中
.radio,
.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
//內部有label的話,內聯顯示
.radio label,
.checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}

同時可以內聯顯示,在labelshang新增checkbox-inline或者radio-inline

1.5.空間狀態

焦點狀態、禁用狀態、驗證提示狀態

焦點狀態:
當輸入框 input 接收到 :focus 時,輸入框的輪廓會被移除,同時應用 box-shadow。

禁用狀態:
對 新增 disabled 屬性來禁用 內的所有控制元件。

驗證提示狀態:
Bootstrap 包含了錯誤、警告和成功訊息的驗證樣式。只需要對父元素簡單地新增適當的 class(.has-warning、 .has-error 或 .has-success)即可使用驗證狀態。
–對文字、邊框和陰影設定的顏色不同


<div class="form-group has-warning">
<label for="inputWarning" class="control-label">輸入長度不夠!</label>
<input type="text" class="form-control">
</div>
<div class="form-group has-error">
<label for="inputError" class="control-label">輸入不符合要求!</label>
<input type="text" class="form-control">
</div>
<div class="form-group has-success has-feedback">
<label for="inputSuccess" class="control-label">輸入文字符合要求!</label>
<input type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

//相對定位,用於設定input元素的父容器的定位方式
.has-feedback {
position: relative;
}
//右內邊距的設定,以便可以顯示小圖示
.has-feedback .form-control {
padding-right: 42.5px;
}
//設定小圖示的顯示方式
.form-control-feedback {
position: absolute;//絕對定位
top: 0;
right: 0;//右對齊
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
pointer-events: none;
}
.input-lg   .form-control-feedback,
.input-group-lg   .form-control-feedback,
.form-group-lg .form-control   .form-control-feedback {
width: 46px;
height: 46px;
line-height: 46px;
}
.input-sm   .form-control-feedback,
.input-group-sm   .form-control-feedback,
.form-group-sm .form-control   .form-control-feedback {
width: 30px;
height: 30px;
line-height: 30px;
}
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
color: #3c763d;
}
.has-success .form-control {
border-color: #3c763d;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-success .form-control:focus {
border-color: #2b542c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
}
.has-success .input-group-addon {
color: #3c763d;
background-color: #dff0d8;
border-color: #3c763d;
}
.has-success .form-control-feedback {
color: #3c763d;
}

1.6.空間大小

input-lg/input-sm

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。

您可能感興趣的文章:

基於Bootstrap jQuery.validate實現Form表單驗證JS元件Form表單驗證神器BootstrapValidator全面解析Bootstrap表單使用方法(表單按鈕)Bootstrap實現登入校驗表單(帶驗證碼)全面解析Bootstrap表單使用方法(表單樣式)實用又漂亮的BootstrapValidator表單驗證外掛基於bootstrap外掛實現autocomplete自動完成表單Bootstrap每天必學之表單基於jQuery.validate及Bootstrap的tooltip開發氣泡樣式的表單校驗元件思路詳解Bootstrap導航欄各元素操作方法(表單、按鈕、文字)