부트스트랩 양식 입력(더)
정적 제어
수평 양식 내에서 양식 레이블 옆에 일반 텍스트 를 삽입해야 하는 경우 요소 의 .form-control-static클래스를 사용하십시오.<p>
예시
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Email:</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
</form>
부트스트랩 입력 그룹
클래스 는 .input-group"도움말 텍스트"로 앞뒤에 아이콘, 텍스트 또는 버튼을 추가하여 입력을 향상시키는 컨테이너입니다.
클래스 는 .input-group-addon입력 필드 옆에 아이콘이나 도움말 텍스트를 첨부합니다.
텍스트
예시
<form>
<div class="input-group">
<span class="input-group-addon"><i
class="glyphicon glyphicon-user"></i></span>
<input id="email"
type="text" class="form-control" name="email" placeholder="Email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon
glyphicon-lock"></i></span>
<input id="password" type="password"
class="form-control" name="password" placeholder="Password">
</div>
<div class="input-group">
<span class="input-group-addon">Text</span>
<input id="msg" type="text" class="form-control" name="msg"
placeholder="Additional Info">
</div>
</form>
.input-group-btn입력 옆에 버튼을 첨부합니다 . 이것은 종종 검색 표시줄과 함께 사용됩니다.
예시
<form>
<div class="input-group">
<input
type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button
class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
부트스트랩 양식 제어 상태
- INPUT FOCUS - 입력의 윤곽이 제거되고 초점에 상자 그림자가 적용됩니다.
- DISABLED INPUTS -
disabled입력 필드를 비활성화하는 속성 추가 - DISABLED FIELDSETS - 필드 세트에
disabled속성을 추가하여 내부의 모든 컨트롤을 비활성화합니다. - READONLY INPUTS -
readonly사용자 입력을 방지하기 위해 입력에 속성 추가 - 검증 상태 - 부트스트랩에는 오류, 경고 및 성공 메시지에 대한 검증 스타일이 포함되어 있습니다. 사용하려면 상위 요소에
.has-warning,.has-error또는 를 추가하십시오 ..has-success - 아이콘
.has-feedback- 클래스 및 아이콘으로 피드백 아이콘을 추가할 수 있습니다 . - HIDDEN LABELS
.sr-only- 보이지 않는 레이블에 클래스 추가
다음 예는 가로 형식 에서 위의 몇 가지 양식 제어 상태를 보여줍니다 .
예시
<form class="form-horizontal">
<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="disabledInput" 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">
<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>