Bootstrap 4 Nhóm đầu vào
Bootstrap 4 Nhóm đầu vào
Lớp .input-grouplà một vù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 vào 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-appendthêm văn bản trợ giúp phía sau đầu vào.
Cuối cùng, hãy thêm .input-group-textlớp để tạo kiểu cho văn bản trợ giúp được chỉ định.
Thí 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>
Mẹo: Chúng tôi sử dụng .mb-3lớp tiện ích để đảm bảo rằng nhóm đầu vào có được mức đáy thích 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ập kích thước nhóm
Sử dụng .input-group-smlớp cho các nhóm đầu vào nhỏ và .input-group-lgcho các nhóm đầu vào lớn:
Thí 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>
Nhiều đầu vào và người trợ giúp
Thêm nhiều đầu vào hoặc phần bổ trợ:
Thí 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>
Nhóm đầu vào với hộp kiểm và rađiô
Bạn cũng có thể sử dụng hộp kiểm hoặc nút radio thay vì văn bản:
Thí 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>
Các nút nhóm đầu vào
Thí 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>
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.
Thí 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>
Nhập nhãn nhóm
Đặ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:
Thí 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>