지원 양식 컨트롤
Bootstrap 다음과 같은 형식 컨트롤을 지원합니다 :
- input
- textarea
- checkbox
- radio
- select
Bootstrap 입력
Bootstrap : 모든 HTML5 입력 유형을 지원하는 text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel 및 color .
참고 : 입력 완전히 스타일되지 않음을 자신의 유형이 제대로 선언하지 않은 경우!
다음 예는 두 개의 입력 요소를 포함; 텍스트를 입력 중 하나를 입력 암호 중 하나를
예
<div class="form-group">
<label for="usr">Name:</label>
<input
type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input
type="password" class="form-control" id="pwd">
</div> »그것을 자신을 시도 Bootstrap Textarea
다음의 예는 포함 textarea :
예
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div> »그것을 자신을 시도 Bootstrap 체크 박스
체크 박스는 사용자가 미리 설정 옵션 목록에서 옵션의 번호를 선택하려면 사용된다.
다음의 예는 세 개의 체크 박스가 포함되어 있습니다. 마지막 옵션을 사용할 수 없습니다 :
예
<div class="checkbox">
<label><input type="checkbox"
value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div
class="checkbox disabled">
<label><input type="checkbox" value=""
disabled>Option 3</label>
</div> »그것을 자신을 시도 사용 .checkbox-inline 동일한 행에 표시 확인란을 원하는 경우 클래스를 :
예
<label class="checkbox-inline"><input type="checkbox"
value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label
class="checkbox-inline"><input type="checkbox" value="">Option 3</label> »그것을 자신을 시도 Bootstrap Radio 버튼
Radio 는 미리 설정된 옵션 목록에서 하나의 선택에 사용자를 제한하려면 버튼을 사용합니다.
다음의 예는 세 개의 라디오 버튼이 포함되어 있습니다. 마지막 옵션을 사용할 수 없습니다 :
예
<div class="radio">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<div class="radio">
<label><input
type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div> »그것을 자신을 시도 사용 .radio-inline 같은 줄에 표시 라디오 버튼을 원하는 경우 클래스를 :
예
<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
»그것을 자신을 시도 Bootstrap 선택 목록
당신은 사용자가 여러 옵션을 선택할 수 있도록하려면 선택 목록이 사용됩니다.
다음은 드롭 다운 목록 (선택 목록)를 포함합니다 :
예
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div> »그것을 자신을 시도