정전기 제어
당신은 수평 형태에서 양식 레이블 옆에 일반 텍스트를 삽입해야하는 경우 사용 .form-control-static A의 클래스 <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내의 모든 컨트롤을 사용하지 않도록하는 FIELDSET에 속성을 - 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> »그것을 자신을 시도