Các biểu mẫu Bootstrap
Cài đặt mặc định của Bootstrap
Các điều khiển biểu mẫu tự động nhận một số kiểu chung với Bootstrap:
Tất cả các phần tử dạng text <input>và <textarea>có
<select>class .form-controlđều có độ rộng là 100%.
Bố cục biểu mẫu Bootstrap
Bootstrap cung cấp ba loại bố cục biểu mẫu:
- Dạng dọc (đây là mặc định)
- Dạng ngang
- Mẫu nội tuyến
Quy tắc tiêu chuẩn cho cả ba bố cục biểu mẫu:
- Gói các nhãn và điều khiển biểu mẫu vào
<div class="form-group">(cần thiết để có khoảng cách tối ưu) - Thêm lớp vào tất cả các phần tử và
.form-controlvăn<input>bản<textarea><select>
Bootstrap Vertical Form (mặc định)
Ví dụ sau tạo một biểu mẫu dọc với hai trường đầu vào, một hộp kiểm và một nút gửi:
Thí dụ
<form action="/action_page.php">
<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 Inline Form
Ở dạng nội dòng, tất cả các phần tử đều nằm trong dòng, căn trái và các nhãn nằm dọc theo.
Lưu ý: Điều này chỉ áp dụng cho các biểu mẫu trong cửa sổ xem có chiều rộng ít nhất là 768px!
Quy tắc bổ sung cho biểu mẫu nội tuyến:
- Thêm lớp
.form-inlinevào<form>phần tử
Ví dụ sau tạo một biểu mẫu nội tuyến với hai trường nhập, một hộp kiểm và một nút gửi:
Thí dụ
<form class="form-inline" action="/action_page.php">
<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>
Mẹo: Nếu bạn không bao gồm nhãn cho mọi đầu vào, trình đọc màn hình sẽ gặp khó khăn với biểu mẫu của bạn. Bạn có thể ẩn nhãn cho tất cả các thiết bị, ngoại trừ trình đọc màn hình, bằng cách sử dụng
.sr-onlylớp:
Thí dụ
<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"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Bootstrap Dạng ngang
Dạng ngang có nghĩa là các nhãn được căn chỉnh bên cạnh trường nhập (ngang) trên màn hình lớn và vừa. Trên màn hình nhỏ (767px trở xuống), nó sẽ chuyển sang dạng dọc (nhãn được đặt trên đầu mỗi đầu vào).
Các quy tắc bổ sung cho biểu mẫu ngang:
- Thêm lớp
.form-horizontalvào<form>phần tử - Thêm lớp
.control-labelvào tất cả<label>các phần tử
Mẹo: Sử dụng các lớp lưới được xác định trước của Bootstrap để căn chỉnh các nhãn và nhóm điều khiển biểu mẫu trong một bố cục ngang.
Ví dụ sau tạo một biểu mẫu nằm ngang với hai trường nhập, một hộp kiểm và một nút gửi.
Thí dụ
<form class="form-horizontal" action="/action_page.php">
<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>