Bootstrap - Nhóm đầu vào

Chương này giải thích về một tính năng nữa mà Bootstrap hỗ trợ, Nhóm đầu vào. Nhóm đầu vào là các Điều khiển biểu mẫu mở rộng . Sử dụng các nhóm đầu vào, bạn có thể dễ dàng thêm trước và nối văn bản hoặc các nút vào các đầu vào dựa trên văn bản.

Bằng cách thêm nội dung được thêm vào và nối thêm vào trường đầu vào, bạn có thể thêm các phần tử phổ biến vào đầu vào của người dùng. Ví dụ: bạn có thể thêm biểu tượng đô la, @ cho tên người dùng Twitter hoặc bất kỳ thứ gì khác có thể phổ biến cho giao diện ứng dụng của bạn.

Để thêm trước hoặc nối các phần tử vào .form-control-

Gói nó trong một <div> với lớp .input-group
Bước tiếp theo, trong cùng <div> đó, hãy đặt nội dung bổ sung của bạn bên trong <span> với lớp .input-group-addon.
Bây giờ, hãy đặt <span> này trước hoặc sau phần tử <input>.

Để tương thích với nhiều trình duyệt, hãy tránh sử dụng các phần tử <select> ở đây vì chúng không thể được tạo kiểu hoàn chỉnh trong trình duyệt WebKit. Cũng không áp dụng các lớp nhóm đầu vào trực tiếp để tạo thành nhóm. Nhóm đầu vào là một thành phần biệt lập.

Nhóm đầu vào cơ bản

Ví dụ sau minh họa nhóm đầu vào cơ bản:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "twitterhandle">
      </div>
		
      <br>

      <div class = "input-group">
         <input type = "text" class = "form-control">
         <span class = "input-group-addon">.00</span>
      </div>
		
      <br>
      
      <div class = "input-group">
         <span class = "input-group-addon">$</span>
         <input type = "text" class =" form-control">
         <span class = "input-group-addon">.00</span>
      </div>
   </form>
   
</div>

Nhập kích thước nhóm

Bạn có thể thay đổi kích thước của các nhóm đầu vào, bằng cách thêm các lớp định cỡ biểu mẫu tương đối như .input-group-lg, input-group-sm, input-group-xs đến .input-groupchinh no. Nội dung bên trong sẽ tự động thay đổi kích thước.

Các ví dụ sau đây chứng minh điều này -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group input-group-lg">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
		
      <br>

      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
		
      <br>

      <div class = "input-group input-group-sm">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
   </form>
   
</div>

Hộp kiểm và Trình bổ sung Radio

Bạn có thể đăng ký trước hoặc nối thêm các nút radio và hộp kiểm thay vì văn bản như được minh họa trong ví dụ sau:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <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 --><br>
         
         <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 -->
   </form>
   
</div>

Nút bổ trợ

Bạn thậm chí có thể chắp thêm hoặc nối thêm các nút trong các nhóm đầu vào. Thay vì.input-group-addon lớp học, bạn sẽ cần sử dụng lớp học .input-group-btnđể quấn các nút. Điều này là bắt buộc do không thể ghi đè các kiểu trình duyệt mặc định. Các ví dụ sau đây chứng minh điều này -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <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 --><br>
         
         <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 -->
   </form>
   
</div>

Các nút có thả xuống

Việc thêm các nút với menu thả xuống trong các nhóm đầu vào có thể được thực hiện bằng cách chỉ cần gói nút và menu thả xuống trong một .input-group-btn lớp như được minh họa trong ví dụ sau:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <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">
                     DropdownMenu 
                     <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 --><br>
         
         <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">
                     DropdownMenu 
                     <span class = "caret"></span>
                  </button>
                  
                  <ul class = "dropdown-menu pull-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 -->
   </form>
   
</div>

Các nút được phân đoạn

Để phân đoạn menu thả xuống của nút trong các nhóm đầu vào, hãy sử dụng cùng một kiểu chung như nút thả xuống, nhưng thêm một hành động chính cùng với menu thả xuống như có thể thấy trong ví dụ sau:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <div class = "input-group-btn">
                  <button type = "button" class = "btn btn-default" 
                     tabindex = "-1">Dropdown Menu</button>
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown" tabindex = "-1">
                     <span class = "caret"></span>
                     <span class = "sr-only">Toggle Dropdown</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 --><br>
         
         <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" tabindex = "-1">
                     Dropdown Menu
                  </button>
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown" tabindex = "-1">
                     
                     <span class = "caret"></span>
                     <span class = "sr-only">Toggle Dropdown</span>
                  </button>
                  
                  <ul class = "dropdown-menu pull-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 -->
   </form>
   
</div>