Bootstrap's 기본 설정
개별 폼 컨트롤이 자동으로 일부 글로벌 스타일받을 Bootstrap .
모든 텍스트 <input>, <textarea> , 그리고 <select> 와 요소 class="form-control" 폭 설정 : 100 %; 기본적으로.
표준 규칙 Bootstrap 형태 :
- 추가 role="form" 받는 <form> 요소는 (스크린 리더를 사용하는 사람들에 대한 접근성을 개선하는 데 도움이)
- A의 라벨과 폼 컨트롤을 감싸 <div> 와 요소 class="form-group" (최적의 간격 필요)
- 추가 class="form-control" 모든 텍스트에 <input>, <textarea> , 그리고 <select> 요소를
다음 예는 두 개의 입력 필드, 하나의 체크 박스와 간단한 부트 스트랩 양식을 작성하고 버튼을 제출
부트 스트랩 양식 예
<form role="form">
<div class="form-group">
<label for="email">Email address:</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">
Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> »그것을 자신을 시도 <form> 클래스
| 수업 | 기술 | 예 |
|---|---|---|
| .form-inline | 만든다 <form> 왼쪽 정렬 (이것은 단지 내에서 형태에 적용 인라인 블록 컨트롤 viewports 적어도 768px 넓은) | 시도 해봐 |
| .form-horizontal | 수평 레이아웃에 라벨과 폼 컨트롤의 그룹을 맞 춥니 다 | 시도 해봐 |