부트스트랩 4 양식 입력
지원되는 양식 컨트롤
부트스트랩은 다음 양식 컨트롤을 지원합니다.
- 입력
- 텍스트 영역
- 체크박스
- 라디오
- 선택하다
부트스트랩 입력
부트스트랩은 모든 HTML5 입력 유형(텍스트, 비밀번호, datetime, datetime-local, 날짜, 월, 시간, 주, 숫자, 이메일, URL, 검색, 전화 및 색상)을 지원합니다.
참고: 유형이 제대로 선언되지 않으면 입력의 스타일이 완전히 지정되지 않습니다!
다음 예제에는 두 개의 입력 요소가 포함되어 있습니다. 중 하나 type="text"와 중 하나
type="password". Forms 장에서 언급했듯이 .form-control클래스를 사용하여 전체 너비 및 적절한 패딩 등으로 입력 스타일을 지정합니다.
예시
<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="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
설명된 예
class="form-check"레이블 및 체크박스에 적절한 여백을 보장 하려면 래퍼 요소를 사용하십시오 .
.form-check-label레이블 요소에 클래스를 추가하고 컨테이너 .form-check-input내부에서 적절하게 체크박스의 스타일을 지정합니다 ..form-check
인라인 체크박스
.form-check-inline체크박스를 같은 줄에 표시하려면 클래스를 사용하세요 .
예시
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
부트스트랩 라디오 버튼
라디오 버튼은 사용자가 사전 설정 옵션 목록에서 하나만 선택하도록 제한하려는 경우에 사용됩니다.
다음 예제에는 세 개의 라디오 버튼이 있습니다. 마지막 옵션이 비활성화되었습니다.
예시
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
확인란과 마찬가지로 .form-check-inline라디오 버튼을 같은 줄에 표시하려면 클래스를 사용하세요.
예시
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
부트스트랩 선택 목록
사용자가 여러 옵션 중에서 선택할 수 있도록 하려면 선택 목록이 사용됩니다.
다음 예에는 드롭다운 목록(목록 선택)이 포함되어 있습니다.
예시
<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>
양식 컨트롤 크기 조정
.form-control-sm또는 .form-control-lg다음 을 사용하여 양식 컨트롤의 크기를 변경합니다 .
예시
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
일반 텍스트를 사용한 양식 제어
.form-control-plaintext입력 필드의 스타일을 일반 텍스트로 지정 하려면 다음을 사용하십시오 .
예시
<input type="text" class="form-control-plaintext">
양식 제어 파일 및 범위
전체 너비로 범위 컨트롤 또는 파일 필드의 스타일 을 지정하려면 에 또는 에 .form-control-range클래스를 추가합니다 .input type"range".form-control-fileinput type"file"
예시
<input type="range" class="form-control-range">
<input type="file"
class="form-control-file border">