Bootstrap input box component usage details, bootstrap input box

Bootstrap input box component usage details, bootstrap input box

The examples in this article share with you how to use the bootstrap input box group for your reference. The specific content is as follows:

1. Basic usage

We sometimes need to add additional elements to one or both sides of the input box.
In this case, you only need to wrap all the elements in a. input-group div.
However, each input box group can have only one input

<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>

2. Dimensions

Add. input-group-lg.input-group-sm.input-group-xs to. input-group on the outermost layer
You can change the size of the input box group.

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

3. Single sequence as an additional element

You only need to replace the text in the span with the corresponding radio.

<div class="input-group"> <span class="input-group-addon">  <input type="radio"/>  </span> <input type="text" class="form-control"/></div>

4. Select multiple boxes as additional elements

You only need to replace the text in the span with the corresponding checkbox.

<div class="input-group"> <span class="input-group-addon">  <input type="checkbox"> </span> <input type="text" class="form-control"></div>

5. Buttons as additional elements

The span class is no longer. input-group-addon and is changed to. input-group-btn.
Replace the text in span with a button.

<div class="input-group"> <span class="input-group-btn">  <button type="button" class="btn btn-default">Go</button> </span> <input type="text" class="form-control" /></div>

6. drop-down menus as additional elements

Replace the corresponding span with the drop-down menu, and modify the class at the outermost layer of the drop-down menu.
Not. dropdown or. btn-group, but. input-group-btn

<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" role="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> <input type="text" class="form-control"></div>

<div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default">Action</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">  <span class="caret"></span> </button> <ul class="dropdown-menu" role="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> <input type="text" class="form-control"></div>

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.