Bootstrap 5 Nhóm đầu vào

Nhóm nhập

.input-group Loại là một thùng chứa, được增强 bằng cách thêm biểu tượng, văn bản hoặc nút vào trước hoặc sau trường nhập để tạo ra "văn bản trợ giúp".

Nếu bạn muốn thiết lập樣式 cho văn bản trợ giúp cụ thể, hãy sử dụng .input-group-text Loại:

Mô hình

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Tên người dùng">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Email của bạn">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Thử ngay

Kích thước nhóm đầu vào

Xin hãy đặt .input-group-sm Lớp dùng cho nhóm đầu vào nhỏ, sẽ .input-group-lg Dùng cho nhóm đầu vào lớn:

Mô hình

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">Nhỏ</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">Mặc định</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">Lớn</span>
  <input type="text" class="form-control">
</div>

Thử ngay

Nhiều đầu vào và trợ lý

Thêm nhiều điều khiển đầu vào hoặc plugin:

Mô hình

<!-- Nhiều điều khiển đầu vào -->
<div class="input-group mb-3">
  <span class="input-group-text">Tên người</span>
  <input type="text" class="form-control" placeholder="Họ">
  <input type="text" class="form-control" placeholder="Tên">
</div>
<!-- Nhiều plugin/văn bản trợ giúp -->
<div class="input-group mb-3">
  <span class="input-group-text">Một</span>
  <span class="input-group-text">Bài</span>
  <span class="input-group-text">Ba</span>
  <input type="text" class="form-control">
</div>

Thử ngay

Nhóm đầu vào với hộp kiểm và nút radio

Bạn có thể sử dụng hộp kiểm hoặc nút radio thay thế cho văn bản:

Mô hình

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="Một số văn bản">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="Một số văn bản">
</div>

Thử ngay

Nhóm nút đầu vào

Mô hình

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Nút cơ bản</button>
  <input type="text" class="form-control" placeholder="Một số văn bản">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Tìm kiếm">
  <button class="btn btn-success" type="submit">Đi</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Một số văn bản">
  <button class="btn btn-primary" type="button">Đồng ý</button>
  <button class="btn btn-danger" type="button">Hủy</button>
</div>

Thử ngay

Nhóm đầu vào với nút thả xuống

Thêm nút thả xuống vào nhóm đầu vào. Lưu ý rằng bạn không cần bao bọc容器 .dropdown như thông thường.

Mô hình

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Nút thả xuống
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Liên kết 1</a></li>
    <li><a class="dropdown-item" href="#">Liên kết 2</a></li>
    <li><a class="dropdown-item" href="#">Liên kết 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Tên người dùng">
</div>

Thử ngay