Introducing a feature of Bootstrap input box group

This chapter will explain another feature supported by Bootstrap, input box group. The input box group extends from the form control. Using input box groups, you can easily add text or buttons as prefixes and suffixes to text-based input boxes.

You can add common elements to user input by adding prefix and suffix content to the input field. For example, you could add a dollar sign, or @ before your Twitter username, or other common elements required by the application interface.

The steps to add prefix or suffix elements to .form-control are as follows:

Place the prefix or suffix elements in a

with class .input-group.

Next, within the same

, place additional content within the of class .input-group-addon.

Place the before or after the <input> element.

To maintain cross-browser compatibility, avoid using elements as they do not render fully in WebKit browsers. Do not apply the class of the input box group directly to the form group. The input box group is an isolated component.

Previous words

Sometimes, we need to combine a text input box (input group) with a file or small icon for display, which we call addon. That is, by adding text or buttons in front, behind or on both sides of the text input box <input>, the form control can be extended. This article will introduce in detail the Bootstrap input box group

Basic usage

Add additional elements or buttons on either side of the input box. You can also add additional elements on both sides of the input box at the same time

<div>
  <span>@</span>
  <input>
</div><div>
  <input>
  <span>@example.com</span>
</div><div>
  <span>$</span>
  <input>
  <span>.00</span>
</div><div>
  <span></span>
  <input>
</div>

【Notes】

　1. Avoid using <select></select> elements because WebKit browsers cannot fully draw its styles

2. Avoid using <textarea></textarea> elements because of their rows Attributes are not supported in some cases

3. Do not mix form groups or grid column (column) classes directly with input box groups. Instead, the input box group is nested inside the form group or grid-related element

<h3 id="错误示范">错误示范</h3><div>
  <span>@</span>
  <input>
</div><div>
  <span>@</span>
  <input>
</div><h3 id="正确示范">正确示范</h3><div><div>  <span>@</span>  <input>
</div></div><div><div>  <span>@</span>  <input>
</div></div>

　4. You can add multiple ( .input-group-addon or .input-group-btn)

<div>
  <span>@</span>
  <span>@</span>    
  <input>
  <span>@</span>
</div>

5. Does not support adding multiple form controls to a single input box group

<div>
  <span>@</span>
  <input>
  <input>
</div>

Size

Add the corresponding size class to .input-group, and the elements contained within it will automatically adjust their size. There is no need to repeatedly add sizing classes for each element in the input box group. .input-group-lg and .input-group-sm are provided, but the ultra-small style is not provided. Maybe the author thinks it is not needed

<div>
  <span>@</span>
  <input>
</div><div>
  <span>@</span>
  <input>
</div><div>
  <span>@</span>
  <input>
</div>

Extra Elements

[Multi-select box or radio button]

You can add a multi-select box or radio button as an additional element to the input box group

<div>
  <span><input>
  </span>
  <input>
</div><div>
  <span><input>
  </span>
  <input>
</div>

【Button】

To add a button to the input box group, you need to add an extra layer of nesting, not .input-group -addon, instead add .input-group-btn to wrap the button element. Since the .btn button style defines various styles, it is not like checkbox, radio, label, etc. that can be directly placed in the .input-group-addon style. Therefore, in order to avoid conflicts, the author set up a separate .input-group-btn style for the .btn style to replace .input-group-addon as the new addon container

<div>
  <span><button>Go!</button>
  </span>
  <input>
</div>

[Button drop-down menu]

It’s natural that if you can support buttons, you can also support button drop-down menus. No additional style support is needed, just in the ordinary Just apply a data-toggle="dropdown" attribute to the .btn button

<div>
 <div>
<button>Action <span></span></button><ul>  <li><a>Action</a></li>  <li><a>Another action</a></li>  <li><a>Something else here</a></li>  <li>  <li><a>Separated link</a></li>
</ul>
  </div>
  <input>
</div>

[Split button drop-down menu]

<div>
 <div> <button>Action</button><button><span></span></button><ul>  <li><a>Action</a></li>  <li><a>Another action</a></li>  <li><a>Something else here</a></li>  <li>  <li><a>Separated link</a></li>
</ul>
  </div>
  <input>
</div>

The above is the detailed content of Introducing a feature of Bootstrap input box group. For more information, please follow other related articles on the PHP Chinese website!