防靜電產品
如果你需要插入旁邊的一個水平表單內的表單標籤純文本 ,使用.form-control-static
一個階級<p>
元素:
例
<form class="form-horizontal" role="form">
<div
class="form-group">
<label class="control-label
col-sm-2" for="email">Email:</label>
<div
class="col-sm-10">
<p
class="form-control-static">[email protected]</p>
</div>
</div>
</form>
試一試» Bootstrap表單控件States
- INPUT FOCUS -輸入的輪廓被刪除,箱陰影應用焦點
- DISABLED INPUTS -添加
disabled
屬性來禁用輸入字段 - DISABLED FIELDSETS -添加
disabled
屬性,一個字段來禁用內所有控件 - READONLY INPUTS -添加
readonly
屬性的輸入,以防止用戶輸入 - VALIDATION STATES - Bootstrap包括錯誤,警告和成功消息的驗證方式。 要使用,添加
.has-warning
,.has-error
,或.has-success
父元素 - ICONS -您可以使用添加了反饋圖標
.has-feedback
類和圖標 - HIDDEN LABELS -添加
.sr-only
在不可見的標籤類
下面的示例演示以上水平的形式某些形式的控制狀態:
例
<form class="form-horizontal" role="form">
<div
class="form-group">
<label class="col-sm-2
control-label">Focused</label>
<div
class="col-sm-10">
<input
class="form-control" id="focusedInput" type="text" value="Click to
focus">
</div>
</div>
<div
class="form-group">
<label for="inputPassword"
class="col-sm-2 control-label">Disabled</label>
<div class="col-sm-10">
<input
class="form-control" id="disabledInput" type="text"
disabled>
</div>
</div>
<fieldset disabled>
<div
class="form-group">
<label for="disabledTextInput"
class="col-sm-2 control-label">Fieldset disabled</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group
has-success has-feedback">
<label class="col-sm-2
control-label" for="inputSuccess">
Input with success and icon</label>
<div class="col-sm-10">
<input
type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
<div class="form-group has-warning
has-feedback">
<label class="col-sm-2
control-label" for="inputWarning">
Input with warning and icon</label>
<div class="col-sm-10">
<input
type="text" class="form-control" id="inputWarning">
<span class="glyphicon glyphicon-warning-sign
form-control-feedback"></span>
</div>
</div>
<div class="form-group has-error has-feedback">
<label class="col-sm-2 control-label" for="inputError">
Input with error
and icon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
</form>
試一試» 這裡是一些在內嵌形式表單控件狀態的實例:
例
<form class="form-inline" role="form">
<div
class="form-group">
<label for="focusedInput">Focused</label>
<input class="form-control" id="focusedInput" type="text">
</div>
<div class="form-group">
<label
for="inputPassword">Disabled</label>
<input
class="form-control" id="disabledInput" type="text" disabled>
</div>
<div class="form-group has-success has-feedback">
<label for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign
form-control-feedback"></span>
</div>
<div
class="form-group has-error has-feedback">
<label
for="inputError2">Input with error</label>
<input
type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
試一試»