Biểu mẫu Bootstrap 4
Cài đặt mặc định của Bootstrap 4
Điều khiển biểu mẫu tự động nhận được một số kiểu dáng chung với Bootstrap:
Tất cả các phần tử văn bản <input> , <textarea> và <select> có lớp .form-control có chiều rộng 100%.
Bố cục biểu mẫu Bootstrap 4
Bootstrap cung cấp hai loại bố cục biểu mẫu:
- Biểu mẫu xếp chồng (toàn chiều rộng)
- Biểu mẫu nội tuyến
Biểu mẫu xếp chồng Bootstrap 4
Ví dụ sau tạo biểu mẫu xếp chồng với hai trường nhập, một hộp kiểm và nút gửi.
Thêm phần tử trình bao bọc với .form-group , xung quanh mỗi điều khiển biểu mẫu, để đảm bảo lề phù hợp:
Ví dụ
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form> Hãy tự mình thử »Biểu mẫu nội tuyến Bootstrap
Ở dạng nội tuyến, tất cả các phần tử đều nằm trong dòng và được căn trái.
Lưu ý: Điều này chỉ áp dụng cho các biểu mẫu trong khung nhìn rộng tối thiểu 576px. Trên màn hình nhỏ hơn 576px, nó sẽ xếp chồng lên nhau theo chiều ngang.
Quy tắc bổ sung cho biểu mẫu nội tuyến:
- Thêm lớp
.form-inlinevào phần tử<form>
Ví dụ sau tạo 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:
Ví dụ
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
<div class="form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form> Hãy tự mình thử »Biểu mẫu nội tuyến với các tiện ích
Biểu mẫu nội tuyến ở trên có cảm giác bị "nén" và trông sẽ đẹp hơn nhiều với các tiện ích giãn cách của Bootstrap. Ví dụ sau thêm lề phải ( .mr-sm-2 ) cho mỗi đầu vào trên tất cả các thiết bị (nhỏ trở lên). Và lớp đáy lề ( .mb-2 ) được sử dụng để tạo kiểu cho trường đầu vào khi nó bị hỏng (chuyển từ ngang sang dọc do không đủ khoảng trống/chiều rộng):
Ví dụ
<form class="form-inline" action="/action_page.php">
<label for="email"
class="mr-sm-2">Email address:</label>
<input type="email" class="form-control
mb-2 mr-sm-2" placeholder="Enter email" id="email">
<label for="pwd"
class="mr-sm-2">Password:</label>
<input type="password" class="form-control
mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary
mb-2">Submit</button>
</form> Hãy tự mình thử »Bạn sẽ tìm hiểu thêm về khoảng cách và các lớp "trợ giúp" khác trong Chương Tiện ích Bootstrap 4 của chúng tôi.
Hàng/Lưới biểu mẫu
Bạn cũng có thể sử dụng các cột ( .col ) để kiểm soát độ rộng và căn chỉnh của đầu vào biểu mẫu mà không cần sử dụng các tiện ích giãn cách. Chỉ cần nhớ đặt chúng bên trong thùng chứa .row .
Trong ví dụ bên dưới, chúng tôi sử dụng hai cột sẽ xuất hiện cạnh nhau. Bạn sẽ tìm hiểu nhiều hơn về các cột và hàng trong Chương Bootstrap Grids .
Ví dụ
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form> Hãy tự mình thử » Nếu bạn muốn có ít lề lưới hơn (ghi đè các máng xối cột mặc định), hãy sử dụng .form-row thay vì .row :
Ví dụ
<form>
<div class="form-row" >
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form> Hãy tự mình thử »