Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần nhóm input Bootstrap.
Thành phần nhóm input Bootstrap là một thành phần rất linh hoạt và mạnh mẽ để tạo các điều khiển biểu mẫu tương tác và trang nhã, tuy nhiên, nó chỉ giới hạn ở text input, select và textarea.
Trong các phần sau, bạn sẽ thấy cách mở rộng các điều khiển biểu mẫu bằng cách thêm văn bản, biểu tượng và các nút vào trước, sau hoặc cả hai mặt của nó để làm cho biểu mẫu của bạn hấp dẫn hơn.
Nhóm input được tạo bằng cách sử dụng lớp .input-group
. Nó hoạt động như một vùng chứa cho các input và các phần bổ trợ.
Hơn nữa, bọc văn bản hoặc biểu tượng trong một phần tử <span>
cũng như áp dụng lớp .input-group-text
trên đó và đặt nó trước hoặc sau phần tử input. Hãy xem ví dụ sau:
<div class="row g-2">
<div class="col-6">
<div class="input-group">
<span class="input-group-text">
<span class="bi-person"></span>
</span>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
<div class="col-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Amount">
<span class="input-group-text">.00</span>
</div>
</div>
<div class="col-6">
<div class="input-group">
<span class="input-group-text">https://www.</span>
<input type="text" class="form-control" placeholder="Domain name">
</div>
</div>
<div class="col-6">
<div class="input-group">
<span class="input-group-text">$</span>
<input type="text" class="form-control" placeholder="US Dollar">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Kể từ Bootstrap 5, bạn cũng có thể thêm các phần bổ trợ trước hoặc sau cho hộp chọn thả xuống và các điều khiển biểu mẫu văn bản. Hãy thử ví dụ sau và xem nó hoạt động như thế nào về cơ bản:
<div class="row g-2">
<div class="col-12">
<div class="input-group">
<span class="input-group-text">Address</span>
<textarea class="form-control"></textarea>
</div>
</div>
<div class="col-6">
<div class="input-group">
<label class="input-group-text">Country</label>
<select class="form-select">
<option selected>Choose...</option>
<option>France</option>
<option>Germany</option>
<option>Hungary</option>
</select>
</div>
</div>
<div class="col-6">
<div class="input-group">
<select class="form-select">
<option selected>Choose...</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<button type="button" class="btn btn-secondary">Submit</button>
</div>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Tương tự, bạn có thể thêm các phần bổ trợ vào trước hoặc sau cho file input tùy chỉnh của Bootstrap, như sau:
<div class="input-group">
<input type="file" class="form-control">
<button type="button" class="btn btn-secondary">Upload</button>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Tương tự, bạn có thể đặt checkbox hoặc radio button vào nhóm input thay vì văn bản.
<div class="row">
<div class="col-6">
<div class="input-group">
<span class="input-group-text">
<input type="checkbox" class="form-check-input mt-0">
</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-6">
<div class="input-group">
<span class="input-group-text">
<input type="radio" class="form-check-input mt-0">
</span>
<input type="text" class="form-control">
</div>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn cũng có thể đặt nhiều input cạnh nhau trong một input group một cách dễ dàng, như sau:
<div class="input-group">
<span class="input-group-text">Your Name</span>
<input type="text" class="form-control" placeholder="First name">
<input type="text" class="form-control" placeholder="Last name">
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Tương tự, bạn cũng có thể đặt nhiều phần bổ trợ cạnh nhau trong một input group. Bạn cũng có thể kết hợp nó với checkbox hoặc radio button, như thể hiện trong ví dụ sau:
<div class="row">
<div class="col-6">
<div class="input-group">
<span class="input-group-text">
<input type="checkbox" class="form-check-input mt-0">
</span>
<span class="input-group-text">$</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-6">
<div class="input-group">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
<input type="text" class="form-control">
</div>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn cũng có thể thêm các nút vào trước hoặc sau các điều khiển biểu mẫu như văn bản. Đơn giản, hãy đặt bao nhiêu nút tùy thích trong .input-group
như ví dụ sau:
<div class="row">
<div class="col-5">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search...">
<button type="button" class="btn btn-secondary">
<i class="bi-search"></i>
</button>
</div>
</div>
<div class="col-7">
<div class="input-group">
<input type="text" class="form-control" placeholder="Type something...">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-danger">Reset</button>
</div>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn thậm chí có thể thêm các nút có trình đơn thả xuống vào điều khiển biểu mẫu nếu bạn muốn thực hiện nhiều hành động từ một nút. Ngoài ra, trong trường hợp input group, bạn không cần bọc quanh bằng phần tử .dropdown
, điều này thường được yêu cầu. Hãy xem một ví dụ:
<div class="row">
<div class="col-6">
<div class="input-group">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-6">
<div class="input-group">
<input type="text" class="form-control">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-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>
Kết quả của ví dụ trên sẽ giống như sau:
Tương tự, bạn có thể định nghĩa nhóm nút thả xuống được phân đoạn nơi nút thả xuống được đặt bên cạnh các nút khác, như thể hiện trong ví dụ sau:
<div class="row">
<div class="col-6">
<div class="input-group">
<button type="button" class="btn btn-outline-secondary">Action</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-6">
<div class="input-group">
<input type="text" class="form-control">
<button type="button" class="btn btn-outline-secondary">Action</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
<span class="visually-hidden">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>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn cũng có thể thêm các lớp định cỡ biểu mẫu tương đối chẳng hạn như .input-group-lg
hoặc .input-group-sm
vào chính phần tử .input-group
để làm cho nó lớn hơn hoặc nhỏ hơn về chiều cao.
Nội dung bên trong .input-group
sẽ tự động thay đổi kích thước - không cần lặp lại các lớp kích thước điều khiển biểu mẫu trên mỗi phần tử. Đây là một ví dụ:
<!-- Larger input group -->
<div class="input-group input-group-lg">
<span class="input-group-text">Large</span>
<input type="text" class="form-control">
</div>
<!-- Default input group -->
<div class="input-group mt-2">
<span class="input-group-text">Default</span>
<input type="text" class="form-control">
</div>
<!-- Smaller input group -->
<div class="input-group input-group-sm mt-2">
<span class="input-group-text">Small</span>
<input type="text" class="form-control">
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.
Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.
Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.
Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.