スタティック制御
あなたは、水平フォーム内の次のフォームのラベルにプレーンテキストを挿入する必要がある場合は、使用.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> »それを自分で試してみてください