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>

Xem ví dụ

Lưu ý: Tính năng prepend và append trong Bootstrap chỉ khả dụng cho các đầu vào dựa trên văn bản và không hỗ trợ các phần tử select và textarea.


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>

Xem ví dụ


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>

Xem ví dụ

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>

Xem ví dụ


 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>

Xem ví dụ


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>

Xem ví dụ

 


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>

Xem ví dụ


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>

Xem ví dụ