1.
BS 지원 form 구성요소
input
textarea
checkbox
radio
select
※ 아래 예제 코드들을 <form> 태그 안에 넣어서 사용.
1-1.
BS - Input
1.
BS는 모든 HTML5 INPUT 타입 지원.
(예: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, color.) 지원.
2.
입력 유형이 올바르게 선언되지 않으면 입력 스타일이 완전히 지정되지 않음.
<div class="form-group">
<label for="usr">이름:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">비밀번호:</label>
<input type="password" class="form-control" id="pwd">
</div>
예제보기
1-2.
BS - Textarea
<div class="form-group">
<label for="comment">코멘트:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
예제보기
1-3.
BS - Checkbox
[Checkbox 수직정렬]
<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 수평정렬]
<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>
예제보기
1-4.
BS - Radio Button
[Radio 수직정렬]
<div class="radio">
<label><input type="radio" name="hz" checked>Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="hz">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="hz" disabled>Option 3</label>
</div>
예제보기
[Radio 수평정렬]
<label class="radio-inline"><input type="radio" name="hz" checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="hz">Option 2</label>
<label class="radio-inline"><input type="radio" name="hz">Option 3</label>
예제보기
1-5.
BS - Select
[Option 하나만 선택]
<div class="container">
<form>
<div class="form-group">
<label for="sel1">하나만 선택</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</form>
</div>
예제보기
[Option 여러 개 선택]
<div class="container">
<form>
<div class="form-group">
<label for="sel2">여러 개 선택 (Shift키 누른 상태서 선택 가능)</label>
<select multiple class="form-control" id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
</div>
예제보기
input 포커스 시 윤곽선 제거
.form-control:focus {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}