Bootstrap's Default Settings (부트스트랩 기본 세팅)
.form-inline (768px 이상 너비에서 폼 가로 왼쪽 정렬 배열)
.form-horizontal (이름표와 폼 통제 그룹 수평 정렬 레이아웃)
.form-control (입력창, 테스트영역, 선택 요소 블럭화 및 반응화)
.form-control-feedback
.form-control-static
.form-group (폼 입력창과 리벨을 감싸는 컨테이너) = 하단 마진 (margin-bottom:15px)
.input-group (입력 그룹)
.input-group-lg (큰 입력 그룹)
.input-group-sm (작은 입력 그룹)
.input-group-addon (입력창에 아이콘이나 텍스트 추가)
.input-group-btn (입력창 옆에 버튼 추가)
.input-lg (큰 입력창, 큰 선택창)
.input-sm (작은 입력창, 작은 선택창)
BS3 기본 세팅
1.
.form-control 가로 너비 100% 차지.
<input>, <textarea>, <select>
2.
BS 폼 레이아웃 3가지
① Vertical form (수직폼) -기본값
② Horizontal form (수평폼)
③ Inline form (인라인폼)
3.
3가지 레이아웃에 적용되는 공통 설정 2가지.
① 라벨이나 폼제어요소를 <div class="form-group"> 요소로 감싸기.
② <input>, <textarea>, <select> 요소에 .form-control 클래스 추가.
Vertical Form (수직폼 ) - 폼요소 세로 나열 (= 한줄전체차지)
<form action="/action_page.php">
<div class="form-group ">
<label for="email">Email 주소:</label>
<input type="email" class="form-control " id="email">
</div>
<div class="form-group ">
<label for="pwd">Password:</label>
<input type="password" class="form-control " id="pwd">
</div>
<div class="checkbox ">
<label><input type="checkbox"> 자동</label>
</div>
<button type="submit" class="btn btn-default ">Submit</button>
</form>
[참고]
요소간 상하 간격을 위해 .form_group 가진 <div> 요소로 각 요소를 감쌈.
.form-group { margin-bottom: 1rem;}
Inline Form (인라인폼 ) - 모두 가로 나열
<form class="form-inline " action="/action_page.php">
<div class="form-group ">
<label for="email">Email 주소:</label>
<input type="email" class="form-control " id="email">
</div>
<div class="form-group ">
<label for="pwd">Password:</label>
<input type="password" class="form-control " id="pwd">
</div>
<div class="checkbox ">
<label><input type="checkbox"> 자동</label>
</div>
<button type="submit" class="btn btn-default ">Submit</button>
</form>
팁 :
모든 입력에 label 포함 않으면 화면 판독기에서 Form에 문제 발생 가능.
.sr-only 클래스 사용해 스크린 리더 제외한 모든 장치의 레이블 숨기기.
<form class="form-inline " action="/action_page.php">
<div class="form-group ">
<label class="sr-only " for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group ">
<label class="sr-only " for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox ">
<label><input type="checkbox"> 자동</label>
</div>
<button type="submit" class="btn btn-default ">Submit</button>
</form>
인라인폼 매뉴얼
1.
인라인폼 경우, 모든 요소는 왼쪽 정렬되고 가로로 나란히 배치됨.
2.
너비 768 픽셀 이상인 Viewport 내의 Form에서만 적용.
3.
인라임폼 경우, <form> 요소에 .form-inline 클래스 추가 필요.
Horizontal Form (수평폼 ) - 폼요소 가로 나열
<form class="form-horizontal " action="/action_page.php">
<div class="form-group ">
<label class="control-label col-sm-2
<div class="col-sm-10 ">
<input type="email" class="form-control " id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-2
<div class="col-sm-10 ">
<input type="password" class="form-control " id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group ">
<div class="col-sm-offset-2 col-sm-10 ">
<div class="checkbox ">
<label><input type="checkbox"> 자동</label>
</div>
</div>
</div>
<div class="form-group ">
<div class="col-sm-offset-2 col-sm-10 ">
<button type="submit" class="btn btn-default ">Submit</button>
</div>
</div>
</form>
[수평폼 매뉴얼]
1.
수평폼은 대형 및 중형 기기 화면에서 레이블이 입력요소와 나란히 배치됨.
소형기기 (767px 이하)에서는 세로 정렬. (레이블은 각 입력요소 위에 배치).
2.
수평폼 경우, 아래 2가지 규칙 추가 필요.
<form> 요소에 .form-horizontal 클래스 추가.
모든 <label> 요소에 .control-label 클래스 추가.
3.
BS그리드 클래스 사용해 레이블 및 양식 컨트롤 그룹을 가로 레이아웃으로 정렬.
