Bootstrap input box group and bootstrap input box

Bootstrap input box group and bootstrap input box
Previous

Sometimes, we need to combine an input group with a file or a small icon for display. We call it addon. In the text input box<input>Add text or buttons to the front, back, or sides to extend the Form Control. This topic describes the Bootstrap input box group in detail.

 

Basic usage

Add additional elements or buttons to any side of the input box. You can also add additional elements on both sides of the input box.

<div class="input-group">  <span class="input-group-addon" id="basic-addon1">@</span>  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group">  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">  <span class="input-group-addon" id="basic-addon2">@example.com</span></div><div class="input-group">  <span class="input-group-addon">$</span>  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">  <span class="input-group-addon">.00</span></div><div class="input-group">  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"></div>

[Note]

1. Avoid using<select>Because the WebKit browser cannot completely draw its style

2. Avoid using<textarea>Elements, because of theirrowsProperties are not supported in some cases

3. Do not mix the form group or column class with the input box group directly. Instead, the input box group is nested inside the form group or grid-related elements.

<H3> error example 

4. You can add multiple (.input-group-addonOr.input-group-btn)
<div class="input-group">  <span class="input-group-addon" id="basic-addon1">@</span>  <span class="input-group-addon" id="basic-addon1">@</span>      <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">  <span class="input-group-addon" id="basic-addon1">@</span></div>

5. You cannot add multiple form controls to a single input box group.
<div class="input-group">  <span class="input-group-addon" id="basic-addon1">@</span>  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div>

 
Dimensions
Is.input-groupWhen you add a dimension class, its internal elements are automatically adjusted. You do not need to repeatedly Add a class with a size control for each element in the input box group. The. input-group-lg and. input-group-sm are provided, and the ultra-small style is not provided. The author may think it is unnecessary.
<div class="input-group input-group-lg">  <span class="input-group-addon" id="basic-addon1">@</span>  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group input-group-sm">  <span class="input-group-addon" id="basic-addon1">@</span>  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group">  <span class="input-group-addon" id="basic-addon1">@</span>  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div>

 
Additional elements
[Multiple selection box or single answer]
You can add multiple-choice boxes or single-choice boxes as additional elements to the input box group.
<div class="input-group">  <span class="input-group-addon">    <input type="checkbox" aria-label="...">  </span>  <input type="text" class="form-control" aria-label="..."></div><div class="input-group">  <span class="input-group-addon">    <input type="radio" aria-label="...">  </span>  <input type="text" class="form-control" aria-label="..."></div>

Button]
Adding buttons to the input box group requires an additional layer of nesting, not.input-group-addon, But add.input-group-btnTo wrap button elements. Because the. btn button style defines a variety of styles, it is not like the checkbox, radio, label and so on directly put in the. input-group-addon style. Therefore, in order to avoid conflicts, the author separately sets a. btn style for the. btn style. The input-group-btn style is used to replace. input-group-addon as the new addon container.
<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" placeholder="Search for..."></div>

[Button-based drop-down menu]
Naturally, buttons are supported, which also supports the drop-down menu of the click-on type. No additional style support is required. apply a data-toggle = "dropdown" attribute to the btn button.
<div class="input-group"> <div class="input-group-btn">    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">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 role="separator" class="divider"></li>      <li><a href="#">Separated link</a></li>    </ul>  </div>  <input type="text" class="form-control" aria-label="..."></div>

[Split button drop-down menu]
<div class="input-group"> <div class="input-group-btn">     <button class="btn btn-default" type="button">Action</button>    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><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 role="separator" class="divider"></li>      <li><a href="#">Separated link</a></li>    </ul>  </div>  <input type="text" class="form-control" aria-label="..."></div>