Trong bài trước chúng ta đã làm quen với các điều khiển đầu vào của Form trong Bootstrap 4 rồi phải không nào. Bài hôm nay chúng ta sẽ tiếp tục tìm hiểu các thành phần bổ trợ cho các điều khiển đầu vào của Form các bạn nhé. Các thành phần bổ trợ này chúng ta gọi chung là Input Groups trong Bootstrap 4. Không mất thời gian nữa chúng ta đi vào bài học ngay nhé các bạn!
Input Groups trong Bootstrap 4
Lớp .input-group là vùng chứa để làm nổi bật đầu vào bằng cách thêm biểu tượng, văn bản hoặc nút vào phía trước trường nhập liệu hoặc phía sau trường nhập dưới dạng "văn bản trợ giúp".
Trong Bootstrap 4 chúng ta sử dụng .input-group-append để thêm văn bản trợ giúp vào phía trước đầu vào và .input-group-append để thêm văn bản trợ giúp phía sau đầu vào.
Cuối cùng, hãy thêm lớp .input-group-text để tạo kiểu cho văn bản trợ giúp được chỉ định.
Ví dụ :
<form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Username"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Your Email"> <div class="input-group-append"> <span class="input-group-text">@example.com</span> </div> </div> </form>
Kích thước nhóm đầu vào:
Sử dụng lớp .input-group-sm cho Input Group nhỏ và .input-group-lg cho Input Group lớn:
Ví dụ:
<form> <div class="input-group mb-3 input-group-sm"> <div class="input-group-prepend"> <span class="input-group-text">Small</span> </div> <input type="text" class="form-control"> </div> </form> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Default</span> </div> <input type="text" class="form-control"> </div> </form> <form> <div class="input-group mb-3 input-group-lg"> <div class="input-group-prepend"> <span class="input-group-text">Large</span> </div> <input type="text" class="form-control"> </div> </form>
Multiple Inputs and Helpers
Chúng ta có thể thêm nhiều dữ liệu đầu vào hoặc phần bổ trợ.
Ví dụ:
<!-- Multiple inputs --> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Person</span> </div> <input type="text" class="form-control" placeholder="First Name"> <input type="text" class="form-control" placeholder="Last Name"> </div> </form> <!-- Multiple addons / help text --> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">One</span> <span class="input-group-text">Two</span> <span class="input-group-text">Three</span> </div> <input type="text" class="form-control"> </div> </form>
Input Group với Checkboxes và Radios
Bạn cũng có thể sử dụng hộp kiểm hoặc nút radio thay vì văn bản:
<div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox"> </div> </div> <input type="text" class="form-control" placeholder="Some text"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio"> </div> </div> <input type="text" class="form-control" placeholder="Some text"> </div>
Input Group Buttons
<div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-primary" type="button">Basic Button</button> </div> <input type="text" class="form-control" placeholder="Some text"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button> </div> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Something clever.."> <div class="input-group-append"> <button class="btn btn-primary" type="button">OK</button> <button class="btn btn-danger" type="button">Cancel</button> </div> </div>
Input Group với Dropdown Button
Dưới đây là ví dụ thêm nút thả xuống trong Input Group Lưu ý rằng bạn không cần trình bao bọc .dropdown như bình thường.
<div class="input-group mt-3 mb-3"> <div class="input-group-prepend"> <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div> <input type="text" class="form-control" placeholder="Username"> </div>
Input Group Labels
Đặt nhãn bên ngoài Input Group và nhớ rằng giá trị của thuộc tính for phải khớp với id của đầu vào.
Nhấp vào nhãn và nó sẽ tập trung vào input:
Ví dụ:
<label for="demo">Write your email here:</label> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Email" id="demo" name="email"> <div class="input-group-append"> <span class="input-group-text">@example.com</span> </div> </div>
