11th rounds of Bootstrap3.0 Learning (input box Group)

Before reading, you can also go to the Bootstrap3.0 getting started learning series navigation to view the http://www.cnblogs.com/aehyok/p/3404867.html

This article mainly describes the following content:

You can add text or buttons to the front or back of a text-based input box to extend the Form Control. You can use. input-group with. input-group-addon to append an element to the front or back of. form-control.

Cross-browser compatibility

Avoid using<select>Because the WebKit browser cannot fully support its style.

 

Do not match .form-groupMix

Do not directly.input-groupAnd.form-groupBecause.input-groupIs an independent component.

 

<div =>  <span =>@</span>  <input type= = placeholder=></div><div =>  <input type= =>  <span =>.</span></div><div =>  <span =>$</span>  <input type= =>  <span =>.</span></div>

You can see through the effect that you can add at the front, you can add at the back, you can also add at the front and back, It is very convenient to use.

To.input-groupAdd a class with the specified size. The class and its content are automatically adjusted. You do not need to add the dimension class to each element.

<div =>  <span =>@</span>  <input type= = placeholder=></div><div =>  <span =>@</span>  <input type= = placeholder=></div><div =>  <span =>@</span>  <input type= = placeholder=></div>

You can place a check box or a single sequence in the input group rather than before the text.

    <div =>      <div =>        <div =>          <span =>            <input type=>          </span>          <input type= =>        </div>      </div>      <div =>        <div =>          <span =>            <input type=>          </span>          <input type= =>        </div>      </div>    </div>

In this simple case, the grid system is first used through the combination of. row style class and. col-lg-* style class.

First, we can see that when the screen width is large enough, the two composite controls are arranged in the same row. Next, we will shrink the browser width. You can see the following results:

The input group has different elements. You want to use.input-group-btnWrap button instead.input-group-addon. This is because the default browser style cannot be overwritten.

<div =>  <div =>    <div =>      <span =>        <button = type=>Go!</button>      </span>      <input type= =>    </div><!-- /input-group -->  </div><!-- /.col-lg- -->  <div =>    <div =>      <input type= =>      <span =>        <button = type=>Go!</button>      </span>    </div><!-- /input-group -->  </div><!-- /.col-lg- --></div>

<div =>  <div =>    <div =>      <div =>        <button type= = data-toggle=>Action <span =></span></button>        <ul =>          <li><a href=>Action</a></li>          <li><a href=>Another action</a></li>          <li><a href=>Something  here</a></li>          <li =></li>          <li><a href=>Separated link</a></li>        </ul>      </div><!-- /btn-group -->      <input type= =>    </div><!-- /input-group -->  </div><!-- /.col-lg- -->  <div =>    <div =>      <input type= =>      <div =>        <button type= = data-toggle=>Action <span =></span></button>        <ul =>          <li><a href=>Action</a></li>          <li><a href=>Another action</a></li>          <li><a href=>Something  here</a></li>          <li =></li>          <li><a href=>Separated link</a></li>        </ul>      </div><!-- /btn-group -->    </div><!-- /input-group -->  </div><!-- /.col-lg- --></div><!-- /.row -->

 

 

     <div =>      <div =>        <div =>          <div =>            <button type= = data-toggle=>Action</button>            <button type= = data-toggle=><span =></span></button>            <ul =>              <li><a href=>Action</a></li>              <li><a href=>Another action</a></li>              <li><a href=>Something  here</a></li>              <li =></li>              <li><a href=>Separated link</a></li>            </ul>          </div><!-- /btn-group -->          <input type= =>        </div><!-- /input-group -->      </div><!-- /.col-lg- -->    </div>

The combination styles between various controls are changeable. Many patterns can be designed based on different requirements.

This article has been updated to the Bootstrap3.0 entry series navigation http://www.cnblogs.com/aehyok/p/3404867.html