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

Source: Internet
Author: User
Tags rounds

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.