Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
1- Tổng quan Bootstrap Form
Về mặt Layout [bố trí], Bootstrap có 3 cách để bố trí các phần tử trên giao diện.
- Sử dụng lớp .form-group để bố trí các phần tử theo phương thẳng đứng.
- Sử dụng lớp .form-inline để bố trí các phần tử theo phương nằm ngang.
- Đặt các phần tử trên một Grid [Lưới], và khi đó các phần tử sẽ hiển thị theo quy tắc của hệ thống lưới [Grid System] của Bootstrap.
.form-group
.form-inline
Grid
2- Form thẳng đứng [.form-group]
Để bố trí các phần tử nằm theo phương thẳng đứng bạn cần bao bọc [wrap] chúng bởi một thẻ Vertical Form [.form-group] Xem ví dụ đầy đủ: form-group-example.html Để bố trí các phần tử hiển thị trên 1 hàng bạn có thể bao bọc [warp] chúng bởi thẻ Horizontal Form [.form-inline] Hệ thống lưới [Grid System] là một hệ thống mạnh mẽ để bố trí các phần tử trên giao diện, và bạn hoàn toàn có thể sử dụng nó để áp dụng cho Form. Grid Dưới đây là một ví dụ sử dụng hệ thống lưới
để bố trí các phần tử trên giao diện. Chú ý: Lớp .row và .form-row làm việc giống nhau, nhưng lời khuyên là bạn nên sử dụng .form-row để phù hợp với ngữ cảnh. Grid example Grid + .form-group Ví dụ kết hợp Grid và lớp .form-group: Grid + .form-group example Kết hợp các lớp .form-group, .form-row, .form-inline,.. để có được một Form với bố trí phức tạp.
complex-form-example.html Phần tử là một trong các thành phần tham gia vào một Form, trước
HTML5 có 9 loại là button, checkbox, file, hidden, image, password, radio, reset, submit, text. Tháng 10 năm 2014, HTML5 ra đời, nó giới thiệu thêm 12 kiểu khác của là color, date, datetime-local, email, month, number, range, search, tel, time, url, week. Tất cả các loại này đều được Bootstrap hỗ trợ, và được tạo sẵn các lớp để áp
dụng: button, reset, submit Các phần tử thực tế là một button, Bootstrap sử dụng lớp .btn để áp dụng cho chúng. Bạn có thể xem chi tiết trong bài học về Bootstrap Button. text, password, email, search, url, tel, number Phần tử với các kiểu ở trên là một trường [field] để người dùng nhập vào dữ liệu
dạng văn bản [textual]. Bootstrap sử dụng lớp .form-control để áp dụng cho các phần tử này. text, password, email, search, url, tel, number color Bootstrap sử dụng lớp .form-control để áp dụng cho . Nhưng có vẻ nó hoạt
động không được tốt như mong đợi [Ít nhất là cho đến phiên bản 4.1]. Ví dụ dưới đây là 2 phần tử , một phần tử không được áp dụng lớp .form-control, và một phần tử được áp dụng lớp .form-control: Dưới đây là một ví dụ đưa ra một giải pháp khắc phục vấn đề nói trên: input-color-example.html checkbox, radio Với Bootstrap một thành phần checkbox [Hoặc radio] đầy đủ bao gồm 2 phần tử và được bao bọc [wrap] bởi Chú ý: phải được đặt ngay phía sau của . checkbox/radio Sử dụng thuộc tính disabled áp dụng cho phần tử để vô hiệu hóa nó, người dùng sẽ không thể tương tác với phần tử này, đồng thời nó cũng vô hiệu hóa các phần tử trong cùng một .form-check với nói trên. disabled checkbox/radio
Form Example
.form-group [Vertical]
3- Form nằm ngang [.form-inline] **
4- Form Grid
5- Ví dụ Form phức tạp
Form Example
Complex Form
6- HTML Input Types
input[type=color].form-control {
height: 40px;
}
Form Example
input[type=color].form-control {
height: 40px;
}
Input type="color"
Chủ Đề