Tham khảo 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ẻ sẽ 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ó 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 nhãn và điều khiển biểu mẫu trong
<div class="form-group">(cần thiết để có khoảng cách tối ưu) - Thêm lớp
.form-controlvào tất cả các phần tử văn bản<input>,<textarea>và<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à 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> Hãy tự mình thử »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) | Try it |
| .form-horizontal | Aligns labels and groups of form controls in a horizontal layout | Try it |
| .form-control | Used on input, textarea, and select elements to span the entire width of the page and make them responsive | Try it |
| .form-control-feedback | Form validation class | Try it |
| .form-control-static | Adds plain text next to a form label within a horizontal form | Try it |
| .form-group | Container for form input and label | Try it |
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" | Try it |
| .input-group-lg | Large input group | Try it |
| .input-group-sm | Small input group | Try it |
| .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 | Try it |
| .input-group-btn | Together with the .input-group class, this class attaches a button next to an input. Often used as a search bar | Try it |
| .input-lg | Large input field | Try it |
| .input-sm | Small input field | Try it |
