Tận dụng Input Group trong Bootstrap

Để hiểu rõ cách sử dụng Input Group trong Bootstrap, mời bạn đọc tham khảo nội dung dưới đây từ Mytour. Ngoài ra, còn nhiều bài viết hữu ích khác trên Mytour về List Group trong Bootstrap.

Tận dụng Input Group trong Bootstrap

1. Sử Dụng Input Group trong Bootstrap

Thành phần Input Group trong Bootstrap đa dạng và mạnh mẽ, được sử dụng để tạo các điều khiển biểu mẫu tương tác. Tuy nhiên, nó chỉ hạn chế trong việc xử lý văn bản đầu vào.

2. Tạo Phần Đầu và Phần Cuối cho Input

Input Group trong Bootstrap được tạo ra bằng cách sử dụng class .input-group. Class này hoạt động như một container cho input (đầu vào) và các phụ kiện.

Để đặt các phụ kiện trước input (đầu vào), sử dụng class .input-group-prepend. Còn để đặt các phụ kiện sau input, hãy sử dụng class .input-group-append

Đừng quên bọc văn bản (text) hoặc biểu tượng (icon) trong phần tử span và thêm class .input-group-text để hiển thị và tạo kiểu dáng như ví dụ dưới đây:

Kết quả trả về sẽ có dạng như sau:

Lưu ý: Chức năng prepend và append trong Bootstrap chỉ áp 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ử select và textarea.

3. Hộp kiểm (checkbox) và nút radio

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

Ví dụ: Ví dụ dưới đây là minh họa cách đặt hộp kiểm và nút radio trong mỗi phụ kiện của input group:

Kết quả sẽ xuất hiện như sau:

4. Thêm nhiều đầu vào hoặc phụ kiện trong Input Group

Hơn nữa, chúng ta có thể dễ dàng đặt nhiều đầu vào cùng một lúc trong một input group, ví dụ như trong minh họa dưới đây:

Kết quả trả về sẽ có dạng như sau:

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

Kết quả trả về sẽ hiển thị như sau:

5. Nút add-on cho ô nhập văn bản

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 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:

Kết quả trả về sẽ xuất hiện như sau:

6. Thêm nút thả xuống cho ô nhập văn bản

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

Tham khảo ví dụ sau đây:

Kết quả trả về sẽ hiển thị như sau:

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

Tương tự, 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ụ sau đây:

Kết quả trả về sẽ hiển thị như sau:

8. Điều Chỉnh Chiều Cao của Input Group

Cuối cùng, có thể thêm các class chỉ định kích thước của biểu mẫu, như .input-group-lg hoặc .input-group-sm cho phần tử .input-group, để xác định chiều cao lớn hơn hoặc nhỏ hơn.

Nội dung bên trong .input-group sẽ tự động điều chỉnh kích thước. Đồng thời, không cần phải lặp lại class kích thước của form control trên từng phần tử.

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

Kết quả trả về sẽ có dạng như bên dưới:

Trong bài học này, Mytour đã hướng dẫn chi tiết về cách sử dụng Input Group trong Bootstrap. Nếu bạn có thắc mắc hoặc câu hỏi nào, hãy để lại ý kiến của bạn trong phần bình luận dưới bài viết.