Nhóm đầu vào Bootstrap 4
Nhóm đầu vào Bootstrap 4
Lớp .input-group
là một thùng chứa để nâng cao đầu vào bằng cách thêm biểu tượng, văn bản hoặc nút ở phía trước hoặc phía sau trường nhập dưới dạng "văn bản trợ giúp".
Sử dụng .input-group-prepend
để 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 vào phía sau đầu vào.
Cuối cùng, thêm lớp .input-group-text
để tạo kiểu cho văn bản trợ giúp đã 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>
Hãy tự mình thử » Mẹo: Chúng tôi sử dụng lớp tiện ích .mb-3
để đảm bảo rằng nhóm đầu vào có lề dưới phù hợp. Đọc thêm về các lớp tiện ích trong Chương Tiện ích BS4 của chúng tôi.
Định cỡ nhóm đầu vào
Sử dụng lớp .input-group-sm
cho các nhóm đầu vào nhỏ và .input-group-lg
cho các nhóm đầu vào 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>
Hãy tự mình thử » Nhiều đầu vào và người trợ giúp
Thêm nhiều đầu vào hoặc tiện ích bổ sung:
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>
Hãy tự mình thử »Nhóm đầu vào có hộp kiểm và radio
Bạn cũng có thể sử dụng hộp kiểm hoặc nút radio thay vì văn bản:
Ví dụ
<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>
Hãy tự mình thử »Nút nhóm đầu vào
Ví dụ
<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>
Hãy tự mình thử »Nhóm đầu vào với nút thả xuống
Thêm nút thả xuống trong nhóm đầu vào. Lưu ý rằng bạn không cần trình bao bọc .dropdown như bình thường.
Ví dụ
<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>
Hãy tự mình thử »Nhãn nhóm đầu vào
Đặt nhãn bên ngoài nhóm đầu vào 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 đầu vào:
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>
Hãy tự mình thử »