Form trong Bootstrap 4

• 25-06-2020 10:54:56
• by: baobinhnet

Trong quá trình làm việc, chắc chắn các bạn sẽ phải làm việc liên tục với các loại form để nhập dữ liệu từ phía người dùng cuối. Chính vì thế, các class dùng để xây dựng form được cung cấp trong bootstrap 4 vô cùng quan trọng, giúp bạn có thể xây dựng các form dữ liệu vừa đẹp vừa đơn giản. Trong bài học này, chúng ta hãy cùng nhau đi nghiên cứu về chủ đề này nhé.

Bootstrap Form

Về mặt bố cục layout, Bootstrap có 3 cách để bố trí các phần tử form trên giao diện:

• Sử dụng lớp .form-group để bố trí các phần tử theo hướng thẳng đứng
• Sử dụng lớp .form-inline để bố trí các phần tử theo hướng nằm ngang.
• Đặt các phần tử Form trên 1 hệ thống lưới và khi đó các phần tử sẽ hiển thị theo quy tắc hệ thống lưới Grid System của Bootstrap.

.form-group

Để bố trí các phần tử nằm theo hướng thẳng đứng thì bạn cần bao boc chúng bởi khối thẻ <div> với class .form-group. Bây giờ chúng ta hãy cùng đi đến với 1 ví dụ cụ thể:
 


 

.form-inline

Để bố trí các phần tử hiển thị trên 1 hàng bạn có thể bao bọc chúng bởi thẻ <div class=”form-inline”>. Tuy nhiên chúng có thể nằm trên các dòng khác nhau nếu các phần tử con có chiều rộng lớn hơn phần tử cha của nó.

 

Form trong Hệ thống lưới Grid System

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 + .form-group

Ví dụ kết hợp Grid và lớp .form-group:

 

Form nâng cao

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, như sau:

Kết luận

Vậy là chúng ta đã học xong cách sử dụng các class form trong bootstrap 4 để tự xây dựng cho mình một form nhập dữ liệu. Với bài viết này, hi vọng các bạn có thể tự kết hợp các class form được cung cấp bởi bootrap và Grid để làm việc thực tế. Hẹn gặp lại các bạn trong bài viết sau.

---

• Posted by baobinhnet
• 2020-06-25 10:54:56