Bootstrap: Nhóm input (Input groups)
Giải phóng thời gian, khai phóng năng lực
Bạn có thể mở rộng các form-control bằng cách thêm text hoặc các nút vào phía trước, phía sau hoặc cả hai phía của bất kỳ input dạng này nào. Hãy sử dụng .input-group cùng với .input-group-addon để gắn thêm các phần tử vào phía trước hoặc phía sau của.form-control.
Tính tương thích với các trình duyệt
Hãy tránh sử dụng phần tử <select> trong nhóm input vì chúng có thể không được style một cách đầy đủ trên các trình duyệt WebKit.
Chú thích & popover trong nhóm input yêu cầu thiết lập đặc biệt
Khi sử dụng chú thích và popovers trên các phần tử nằm bên trong .input-group, bạn sẽ phải chỉ rõ tùy chọn container: 'body' để tránh các hiệu ứng không mong muốn (side effect) (ví dụ như phần tử trở nên lớn hơn hoặc bị mất góc bo tròn khi tooltip hoặc popover được kích hoạt).
Đừng sử dụng cùng các thành phần khác
Không nên sử dụng form-group hoặc các class của lưới với nhóm input một cách trực tiếp. Thay vì thế, hãy đặt nhóm input vào bên trong một form-group hoặc một phần tử dạng lưới.
Ví dụ cơ bản
Bạn có thể đặt một add-on hoặc một nút vào phía trước, phía sau hoặc cả hai phía của input.
Chúng tôi không hỗ trợ việc thêm nhiều add-on vào cùng một phía của một input.
Chúng tôi cũng không hỗ trợ việc sử dụng nhiều form-control trong một nhóm input đơn lẻ
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
Kích thước
Hãy thêm các class kích thước của form vào cùng với .input-group và nội dung bên trong sẽ tự động thay đổi—không nhất thiết phải lặp đi lặp lại việc thêm các class kích thươc của form cho từng phần tử trong nhóm.
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
Các addon dạng checkbox và radio
Bạn có thể đặt checkbox hoặc radio vào bên trong một addon của nhóm input thay vì text
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Các addon dạng nút
Các nút nằm trong nhóm input có một chút khác biệt và yêu cầu thêm một cấp lồng nhau. Thay vì .input-group-addon, bạn sẽ phải sử dụng .input-group-btn để bọc các nút.Việc này là cần thiết do các style của trình duyệt mặc định không thể bị ghi đè.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Các nút cùng với menu sổ xuống
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Các nút phân đoạn
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control">
</div>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
Giải phóng thời gian, khai phóng năng lực