Bootstrap's 기본 설정
폼 컨트롤이 자동으로 일부 글로벌 스타일받을 Bootstrap :
모든 텍스트 <input> , <textarea> , 그리고 <select> 클래스와 요소 .form-control 100 %의 폭을 가지고있다.
Bootstrap 양식 레이아웃
Bootstrap 형 레이아웃의 세 가지 유형을 제공한다 :
- 수직 형태 (이것은 기본값입니다)
- 가로 형태
- 인라인 형태
세 가지 형태의 레이아웃에 대한 표준 규칙 :
- 항상 사용하는
<form role="form">(스크린 리더를 사용하는 사람들에 대한 접근성을 개선하는 데 도움이) - 에 라벨과 폼 컨트롤을 감싸
<div class="form-group">(최적의 간격 필요) - 클래스 추가
.form-control모든 텍스트에<input>,<textarea>, 그리고<select>요소를
Bootstrap 수직 양식 (기본)
다음 예는 두 개의 입력 필드, 하나의 체크 박스와 수직 양식을 작성하고 버튼을 제출
예
<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> »그것을 자신을 시도 Bootstrap 인라인 양식
인라인 형태로 모든 요소는 인라인이다 왼쪽 정렬과 함께 라벨이다.
참고 :이 단지 내에서 형태에 적용 viewports 적어도 768px 넓은!
인라인 형태에 대한 추가 규칙 :
- 클래스 추가
.form-inline받는<form>요소
다음 예는 두 개의 입력 필드, 하나의 체크 박스와 인라인 양식을 생성하고, 하나의 버튼을 제출
예
<form class="form-inline" 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> »그것을 자신을 시도 팁 : 모든 입력에 대한 레이블을 포함하지 않는 경우, 스크린 리더가 양식에 문제가있을 것이다. 당신은 스크린 리더를 제외하고는 사용하여 모든 장치에 대한 레이블을 숨길 수 있습니다 .sr-only 클래스를 :
예
<form class="form-inline" role="form">
<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">
Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> »그것을 자신을 시도 Bootstrap 수평 양식
가로 형태가 다른 형태로 둘 태그의 양 및 형태의 표현으로 간격을 나타낸다.
가로 형태의 추가 규칙 :
- 클래스 추가
.form-horizontal받는<form>요소 - 클래스 추가
.control-label모두<label>요소
팁 : Bootstrap's 사전 정의 된 그리드 클래스가 수평 레이아웃의 라벨과 폼 컨트롤의 그룹을 정렬합니다.
다음 예는 두 개의 입력 필드, 하나의 체크 박스와 수평 형태를 생성하고, 하나의 버튼을 제출
예
<form class="form-horizontal" role="form">
<div
class="form-group">
<label class="control-label
col-sm-2" for="email">Email:</label>
<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" for="pwd">Password:</label>
<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"> Remember me</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> »그것을 자신을 시도