Nhóm đầu vào giúp bạn mở rộng điều khiển đầu vào bằng cách thêm một hoặc nhiều phần tử Văn bản, Nút hoặc Nhóm nút. Vậy input group là gì?
Input Group là gì?
Nhóm đầu vào thành phần ở trong bootstrap khá linh hoạt và biến, nó được sử dụng nhiều trong quá trình tạo điều khiển biểu mẫu tương tác, nhưng nó lại chỉ giới hạn với văn bản đầu vào
Nói một cách dễ hiểu, thì nhóm đầu vào chính là cách giúp bạn có thể mở rộng một điều khiển đầu vào bằng cách thêm vào phụ cận của nó những phần tử khác như văn bản, nút, nhóm nút… và các phần tử khi được thêm vào bên cạnh đầu vào
Bạn cũng có thể đặt nhiều điều khiển đầu vào hoặc nhiều Addons trong một nhóm đầu vào
Code html ví dụ
Người
Một
Hai
Ba
Kết quả hình ảnh
Lưu ý. với các thuộc tính như. aria-label, aria-descriptedbly có thể sử dụng được nếu bạn muốn ứng dụng của bạn hỗ trợ tốt cho các thiết bị như Trình đọc màn hình [ở đây chính là thiết bị đọc màn hình dành cho người tiêu dùng]
mã html
@
Nhóm đầu vào với Hộp kiểm, Radio
Code html ví dụ input group with addon is checkbox or radio
Giới tính.
Nam
Nữ
Kết quả hình ảnh
Nhóm đầu vào với nút
Bạn có thể thêm một hoặc nhiều nút vào nhóm đầu vào như sau
Code html ví dụ
Nút cơ bản
Đi
OK
Hủy
Kết quả hình ảnh
Nhóm đầu vào với danh sách thả xuống
Bạn có thể thêm Dropdown vào 1 hoặc nhiều nút Input Group như sau
Code html ví dụ
Kết quả hình ảnh
Nhóm đầu vào với Chọn
Khi mà bạn sử dụng 1 input group với phần từ là , phần tử nên sử dụng với lớp “, khi đó sẽ giúp nó lấp đầy không gian còn lại theo phương nằm ngang và có kiểu dáng [style] theo đúng phong cách của bootstrap.
Code html ví dụ với Input Group với Custom Select
Tùy chọn
Chọn…
Một
Hai
Ba
Chọn…
Một
Hai
Ba
Nút
Kết quả hình ảnh
Nhóm đầu vào với tệp tùy chỉnh
Code html ví dụ Input Group với phần tử tuỳ biến là
Tải lên
Chọn tệp
Chọn tệp
Tải lên
Nút
Chọn tệp
Chọn tệp
Nút
Kết quả hình ảnh
Size of Input Group
Bạn có thể thêm “kích thước” [Sizing] vào phần từ. input-group và nó sẽ có tác dụng với mọi phần tử con. Bạn cũng không cần phải thiết lập kích thước cho tất cả nữa
Danh sách các lớp sử dụng để thiết lập “kích thước” cho Nhóm đầu vào
- đầu vào-nhóm-sm
- đầu vào-nhóm-lg
Code html ví dụ
Nhỏ
Mặc định
Lớn
Kết quả hình ảnh
Hi vọng với những chia sẻ ở trên của Blog Getbootstrap về Input Group trong bootstrap 3 sẽ giúp bạn có thêm kiến thức bootstrap nhé. Nếu như bạn là người mới mà đột nhiên đọc tới bài này thì có thể quay lại bài Bootstrap là gì? . Chúc các bạn thành công