Tham chiếu biểu mẫu CSS Bootstrap
Cài đặt mặc định của Bootstrap
Các điều khiển biểu mẫu riêng lẻ tự động nhận một số kiểu chung với Bootstrap.
Tất cả các phần tử văn bản <input>, <textareosystem và <select> với class = "form-control" được đặt thành width: 100%; theo mặc định.
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>
Ví dụ sau tạo một biểu mẫu Bootstrap đơn giản với hai trường nhập, một hộp kiểm và một nút gửi:
Ví dụ về biểu mẫu Bootstrap
<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>
Lớp biểu mẫu
| Class | Description | Example |
|---|---|---|
| .form-inline | Makes a <form> left-aligned with inline-block controls (This only applies to forms within viewports that are at least 768px wide) | |
| .form-horizontal | Aligns labels and groups of form controls in a horizontal layout | |
| .form-control | Used on input, textarea, and select elements to span the entire width of the page and make them responsive | |
| .form-control-feedback | Form validation class | |
| .form-control-static | Adds plain text next to a form label within a horizontal form | |
| .form-group | Container for form input and label |
Lớp đầu vào
| Class | Description | Example |
|---|---|---|
| .input-group | Container to enhance an input by adding an icon, text or a button in front or behind it as a "help text" | |
| .input-group-lg | Large input group | |
| .input-group-sm | Small input group | |
| .input-group-addon | Together with the .input-group class, this class makes it possible to add an icon or help text next to the input field | |
| .input-group-btn | Together with the .input-group class, this class attaches a button next to an input. Often used as a search bar | |
| .input-lg | Large input field | |
| .input-sm | Small input field |