Sử dụng Input Group trong Bootstrap

Trong bài học Bootstrap trước bạn đọc đã cùng Taimienphi.vn tìm hiểu cách tạo form (biểu mẫu) tùy chỉnh trong Bootstrap. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn cách sử dụng Input Group trong Bootstrap.

Để tìm hiểu cách sử dụng Input Group trong Bootstrap, bạn đọc cùng tham khảo bài viết dưới đây của Taimienphi.vn. Ngoài ra bạn đọc có thể tham khảo một số bài viết khác đã có trên Taimienphi.vn để tìm hiểu thêm List Group trong Bootstrap.

su dung input group trong bootstrap hoc bootstrap

Sử dụng Input Group trong Bootstrap

Mục Lục bài viết:
1. Input Group trong Bootstrap
2. Tạo Prepend và Append Input
3. Hộp checkbox và nút radio
4. Thêm nhiều input hoặc add-on trong Input Group
5. Nút add-on cho Text Input
6. Thêm nút thả xuống cho Text Input
7. Thêm nút thả xuống được phân đoạn
8. Chiều cao của Input Group

 

1. Input Group trong Bootstrap

Thành phần Input Group trong Bootstrap khá linh hoạt và mạnh mẽ, được sử dụng để tạo các form control tương tác, tuy nhiên thành phần này chỉ giới hạn với text đầu vào.

 

2. Tạo Prepend và Append Input

Input Group trong Bootstrap được tạo bằng cách sử dụng lớp .input-group. Lớp này hoạt động như một phần tử chứa cho input (đầu vào) và add-on.

Lớp .input-group-prepend được sử dụng để đặt các add-on trước input (đầu vào), lớp .input-group-append được sử dụng để đặt các add-on sau input.

Ngoài ra đừng quên bọc văn bản (text) hoặc biểu tượng (icon) trong phần tử span và áp dụng lớp .input-group-text trên đó để hiển thị và tạo style phù hợp như trong ví dụ dưới đây:

su dung input group trong bootstrap

Kết quả trả về có dạng như dưới đây:

su dung input group trong bootstrap 2

Lưu ý: Tính năng prepend và append trong Bootstrap chỉ khả dụng cho các đầu vào dựa trên văn bản và không hỗ trợ các phần tử selecttextarea.

 

3. Hộp checkbox và nút radio

Tương tự, chúng ta có thể đặt hộp checkbox và nút radio trong mỗi add-on của input group thay vì văn bản.

Ví dụ: ví dụ dưới đây minh họa cách đặt hộp checkbox và nút radio trong mỗi add-on của input group:

su dung input group trong bootstrap 3

Kết quả trả về có dạng như dưới đây:

su dung input group trong bootstrap 4

 

4. Thêm nhiều input hoặc add-on trong Input Group

Ngoài ra chúng ta cũng có thể dễ dàng đặt nhiều input cạnh nhau trong một input group, chẳng hạn như trong ví dụ dưới đây:

su dung input group trong bootstrap 5

Kết quả trả về có dạng như dưới đây:

su dung input group trong bootstrap 6

Tương tự, nếu muốn chúng ta cũng có thể đặt nhiều add-on cạnh nhau trong một input group, thậm chí là có thể kết hợp với hộp checkbox và nút radio như trong ví dụ dưới đây:

su dung input group trong bootstrap 7

Kết quả đầu ra trả về có dạng như dưới đây:

su dung input group trong bootstrap 8

 

5. Nút add-on cho Text Input

Trong một số trường hợp, chúng ta có thể sử dụng các nút prepend hoặc append thay vì sử dụng text (văn bản) bằng cách đặt số lượng nút tùy ý trong các lớp .input-group-prepend hoặc .input-group-append như trong ví dụ dưới đây:

su dung input group trong bootstrap 9

Kết quả đầu ra trả về có dạng như dưới đây:

su dung input group trong bootstrap 10

 

6. Thêm nút thả xuống cho Text Input

Để tạo và thêm nhiều nội dung từ một nút, chúng ta có thể thêm các nút thả xuống cho text input. Trong trường hợp này chúng ta không cần sử dụng phần tử .dropdown cho input group.

Tham khảo ví dụ dưới đây:

su dung input group trong bootstrap 11

Kết quả đầu ra trả về có dạng như dưới đây:

su dung input group trong bootstrap 12

 

7. Thêm nút thả xuống được phân đoạn

Tương tự chúng ta có thể xác định nhóm nút thả xuống được phân đoạn, trong đó nút thả xuống được đặt cạnh các nút khác như trong ví dụ dưới đây:

su dung input group trong bootstrap 13

Kết quả đầu ra trả về có dạng như dưới đây:

su dung input group trong bootstrap 14

 

8. Chiều cao của Input Group

Cuối cùng chúng ta có thể thêm các lớp chỉ định kích thước form (biểu mẫu), chẳng hạn như .input-group-lg hoặc .input-group-sm cho phần tử .input-group để chỉ định kích thước chiều cao lớn hơn hoặc nhỏ hơn.

Các nội dung trong .input-group sẽ tự động thay đổi kích thước. Ngoài ra chúng ta cũng không cần lặp lại các lớp kích thước form control trên mỗi phần tử.

Tham khảo ví dụ dưới đây:

su dung input group trong bootstrap 15

Kết quả đầu ra trả về có dạng như dưới đây:

su dung input group trong bootstrap 16

https://thuthuat.taimienphi.vn/su-dung-input-group-trong-bootstrap-51112n.aspx
Như vậy bài học trên đây Taimienphi.vn vừa hướng dẫn bạn cách sử dụng Input Group trong Bootstrap. Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp như cách tạo form tùy chỉnh trong Bootstrap như thế nào?, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết nhé.

Tác giả: Lê Thị Thuỷ     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Grid System trong Bootstrap
Cách tạo giao diện Responsive cho website với Bootstrap
Tạo Fixed Layout (bố cục cố định) với Bootstrap
Tạo Fluid Layout với Bootstrap
Cách tạo và sử dụng Button Group trong Bootstrap
Từ khoá liên quan:

Sử dụng Input Group trong Bootstrap

, Input Group trong Bootstrap, Bootstrap,

SOFT LIÊN QUAN
  • Bootstrap File Input

    Đổi miền nhập file thành giao diện chọn file

    Bootstrap File Input là tiện ích jQuery chuyển đổi miền nhập file cổ điển thành giao diện chọn file chuyên nghiệp. Thay vì chọn và tải lần lượt từng file hay sử dụng nhiều miền tải file giống nhau, các nhà phát triển đã ...

Tin Mới