Bootstrap Input Group

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.

Mở rộng điều khiển biểu mẫu với 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.

Thêm các phần bổ trợ vào trước hoặc sau input trong nhóm input group

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:

Thêm checkbox hoặc radio button vào nhóm input group

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:

Nhiều input hoặc thành phần bổ trợ trong một input group

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:

Nút bổ trợ cho điều khiển biểu mẫu

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:

Thêm nút thả xuống

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:

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

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:

Chiều cao của các input group

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:

Bootstrap • Bootstrap Cơ Bản