Bootstrap - Forms

Bootstrap's Default Settings

Form tự động nhận một vài kiểu của bootstrap : các thẻ <input>, <textarea> và <select> với class .form-control có chiều rộng là 100%.

---

Bootstrap Form Layouts

Bootstrap có 3 loại layouts:

• Vertical form (mặc định)
• Horizontal form
• Inline form

Các luật chuẩn của 3 loại layouts trên :

• Luôn sử dụng <form role="form"> (giúp cải thiện khả năng xem cho người dùng)
• Bao bên ngoài <label>, <input>... bởi <div class="form-group"> (tối ưu khoảng cách)
• Thêm class .form-control tới các thẻ <input>, <textarea> và <select>

---

Bootstrap Vertical Form (default)

Ví dụ tạo một form với 2 trường nhập, 1 checkbox và 1 nút submit :

Email address:
    
  

Password:
    
  

 Remember me
  

Email address:

Password:

Remember me

---

Bootstrap Inline Form

Trong inline form, các thẻ là inline, canh trái và các nhãn nằm bên cạnh.
Lưu ý : chỉ áp dụng với màn hình từ 768px wide trở lên
Quy tắc bổ sung cho các hình thức inline : Thêm lớp .form-inline vào thẻ <form>.

Email address:
    
  

Password:
    
  

 Remember me
  

Email address:

Password:

Remember me

Nếu bạn không dùng các label cho thẻ <input>, bạn sẽ gặp rắc rối về hiển thị. Bạn có thể ẩn các label với tất cả các thiết bị, ngoại trừ khi xem màn hình bằng cách sử dụng class .sr-only.

Email address:
    
  

Password:
    
  

 Remember me
  

Email address:

Password:

Remember me

---

Bootstrap Horizontal Form

Để tạo một form ngang :

• .form-horizontal vào thẻ <form>
• .control-label vào tất cả các thẻ <label>

Sử dụng lưới để sắp xếp các label và các thẻ trong form trong bố cục ngang.

Email:
    



    


Password:
    



    




 Remember me
      





    

Email:

Password:

Remember me

Thật dể dàng để tùy biến một form nhập liệu, vừa có hiệu ứng đẹp, vừa có bố cục được sắp xếp thích nghi.

Share on Google Plus

Về tôi

Chào bạn ! Mình là Unknown, rất mê phim kiếm hiệp và vẫn FA. Bạn có thể tìm mình qua :