Bootstrap 4 - Bootstrap Input Groups
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.
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.
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:
<div class="row">
<div class="col-sm-4">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-user"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Amount">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" placeholder="US Dollar">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
</div>
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:
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<input type="checkbox">
</span>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<input type="radio">
</span>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
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:
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Your Name</span>
</div>
<input type="text" class="form-control" placeholder="First name">
<input type="text" class="form-control" placeholder="Last name">
</div>
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:
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<input type="checkbox">
</span>
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
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:
<div class="row">
<div class="col-sm-5">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search...">
<div class="input-group-append">
<button type="button" class="btn btn-secondary">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<div class="col-sm-7">
<div class="input-group">
<input type="text" class="form-control" placeholder="Type something...">
<div class="input-group-append">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-danger">Reset</button>
</div>
</div>
</div>
</div>
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:
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
</div>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
</div>
</div>
</div>
</div>
</div>
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:
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary">Action</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
</div>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary">Action</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
</div>
</div>
</div>
</div>
</div>
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:
<!-- Larger input group -->
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">Large</span>
</div>
<input type="text" class="form-control">
</div>
<!-- Default input group -->
<div class="input-group mt-2">
<div class="input-group-prepend">
<span class="input-group-text">Default</span>
</div>
<input type="text" class="form-control">
</div>
<!-- Smaller input group -->
<div class="input-group input-group-sm mt-2">
<div class="input-group-prepend">
<span class="input-group-text">Small</span>
</div>
<input type="text" class="form-control">
</div>