Introducing a feature of Bootstrap input box group-HTML Tutorial-php.cn

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 <select> 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 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&#39;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"></span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"></div>

Copy after login

【Notes】

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

2. Avoid using <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>错误示范</h3><div class="input-group col-xs-4">
  <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 col-xs-8">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><h3>正确示范</h3><div class="col-xs-4"><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><div class="col-xs-8"><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>

Copy after login

　4. You can add multiple ( .input-group-addon or .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>

Copy after login

5. Does not support adding 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>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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!

Related labels：

bootstrap enter

source：php.cn

Previous article：Anchor setting for jump within the page Next article：Introduction to the latest browser market share

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn