1. 기본형
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <form >
<div class = "form-group" >
<label>邮箱:</label>
<input type= "email" class = "form-control" placeholder= "请输入您的邮箱地址" >
</div>
<div class = "form-group" >
<label >密码</label>
<input type= "password" class = "form-control" placeholder= "请输入您的邮箱密码" >
</div>
<div class = "checkbox" >
<label>
<input type= "checkbox" > 记住密码
</label>
</div>
<button type= "submit" class = "btn btn-default" >进入邮箱</button>
</form>
|
로그인 후 복사
이러한 요소 외에도 양식에는 입력, 선택, 텍스트 영역 및 기타 요소가 있습니다. 부트스트랩 프레임워크에서는 'form-control' 클래스 이름이 사용자 정의됩니다. "양식 제어"는 일부 디자인 사용자 정의 효과를 달성합니다.
1. 너비가 100%가 됩니다
2. 연한 회색(#ccc) 테두리를 설정합니다
3. 4px의 둥근 모서리
4. 그림자 효과를 설정하고 요소에 초점이 맞춰지면 그림자와 테두리 효과가 변경됩니다
5. 자리표시자 색상을 #999로 설정합니다
2. 가로 형태
Bootstrap 프레임워크의 기본 형식은 수직 표시 스타일이지만 수평 양식 스타일(왼쪽의 레이블, 오른쪽의 양식 컨트롤)이 필요한 경우가 많습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <form class = "form-horizontal" role= "form" >
<div class = "form-group" >
<label for = "inputEmail3" class = "col-sm-2 control-label" >邮箱:</label>
<div class = "col-sm-4" >
<input type= "email" class = "form-control" id= "inputEmail3" placeholder= "请输入您的邮箱地址" >
</div>
</div>
<div class = "form-group" >
<label for = "inputPassword3" class = "col-sm-2 control-label" >密码:</label>
<div class = "col-sm-4" >
<input type= "password" class = "form-control" id= "inputPassword3" placeholder= "请输入您的邮箱密码" >
</div>
</div>
</form>
|
로그인 후 복사
Bootstrap 프레임워크에서 수평 형태 효과를 얻으려면 다음 두 가지 조건을 충족해야 합니다.
1.