부트스트랩 양식 입력
지원되는 양식 컨트롤
부트스트랩은 다음 양식 컨트롤을 지원합니다.
- 입력
- 텍스트 영역
- 체크박스
- 라디오
- 선택하다
부트스트랩 입력
부트스트랩은 모든 HTML5 입력 유형(텍스트, 비밀번호, datetime, datetime-local, 날짜, 월, 시간, 주, 숫자, 이메일, URL, 검색, 전화 및 색상)을 지원합니다.
참고: 유형이 제대로 선언되지 않으면 입력의 스타일이 완전히 지정되지 않습니다!
다음 예제에는 두 개의 입력 요소가 포함되어 있습니다. 텍스트 유형 중 하나와 비밀번호 유형 중 하나:
예시
<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>
부트스트랩 텍스트 영역
다음 예제에는 텍스트 영역이 포함되어 있습니다.
예시
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
부트스트랩 체크박스
사용자가 사전 설정 옵션 목록에서 원하는 수만큼 옵션을 선택하도록 하려면 확인란이 사용됩니다.
다음 예에는 세 개의 확인란이 있습니다. 마지막 옵션이 비활성화되었습니다.
예시
<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>
부트스트랩 라디오 버튼
라디오 버튼은 사용자가 사전 설정 옵션 목록에서 하나만 선택하도록 제한하려는 경우에 사용됩니다.
다음 예제에는 세 개의 라디오 버튼이 있습니다. 첫 번째 옵션은 기본적으로 선택되어 있고 마지막 옵션은 비활성화되어 있습니다.
예시
<div class="radio">
<label><input type="radio" name="optradio"
checked>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"
checked>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>
부트스트랩 선택 목록
사용자가 여러 옵션 중에서 선택할 수 있도록 하려면 선택 목록이 사용됩니다.
다음 예에는 드롭다운 목록(목록 선택)이 포함되어 있습니다.
예시
<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>