Bootstrap - Input Groups

Bootstrap输入组 - 从概述，环境设置，基本结构，全局样式，网格系统，流体网格系统，布局，响应式设计，排版，表格，按钮，图像，图标，下拉列表，按钮开始，从简单而简单的步骤学习Bootstrap组，导航元素，导航栏，面包屑，分页，标签，徽章，版式，缩略图，警报，进度栏，媒体对象，Javascript插件像过渡，模态，下拉列表，Scrollspy，选项卡，工具提示，弹出，警报，按钮，折叠， Carousel，Typeahead，Affix，Glyphicons，Jumbotron，Demos。

本章介绍了Bootstrap支持的另一个功能，即输入组.输入组已扩展为表单控件.使用输入组，您可以轻松地在文本输入中添加和附加文本或按钮.

通过在输入字段中添加前置和附加内容，可以向用户输入添加常用元素.例如，您可以添加美元符号，@用于Twitter用户名，或者您的应用程序界面可能常见的任何其他内容.

将元素前置或附加到 .form-control :

将其包装在< div>中与班级 .input-group
作为下一步，在同一< div>范围内，将您的额外内容放在< span>内类 .input-group-addon .
现在放置此< span>在< input>之前或之后元素.

为了实现跨浏览器兼容性，请避免使用< select>这里的元素因为它们无法在WebKit浏览器中完全设置样式.也不要直接将输入组类应用于表单组.输入组是一个独立的组件.

基本输入组

以下示例演示基本输入组 :

.00

Input Group Sizing

您可以通过将相对的表单大小调整类（如.input-group-lg，input-group-sm，input-group-xs）添加到.input-group本身来更改输入组的大小。其中的内容将自动调整大小。

下面的例子演示了这个:

                     @                     
               @                     
               @

Checkboxes and Radio Addons

您可以在前面添加或附加单选按钮和复选框，而不是文本，如以下示例中所示:

Button Addons

您甚至可以在输入组中预先添加或附加按钮。而不是.input-group-addon类，您需要使用类.input-group-btn来包装按钮。由于无法覆盖的默认浏览器样式，因此这是必需的。以下示例演示了这一点:

                                                                                                               Go!                                                                                    
                                                                                                                  Go!

Buttons with Dropdowns

在输入组中添加带下拉菜单的按钮可以通过简单地将按钮和下拉菜单包装在.input-group-btn类中来完成，如以下示例所示:

                                                                                                               DropdownMenu                                                                                                 Action
                     Another action
                     Something else here
                                                               Separated link
                                                                                    
                                                                                                                                    DropdownMenu                                                                                                 Action
                     Another action
                     Something else here
                                                               Separated link

分段按钮

要分割输入组中的按钮下拉菜单，请使用与下拉按钮相同的常规样式，但添加主要操作以及下拉列表可以在以下示例中看到 :

                                                                                          Dropdown Menu                                                                              Toggle Dropdown                                                                           Action
                     Another action
                     Something else here
                                                               Separated link
                                                                                                      
                                                                                                                     Dropdown Menu                                                                                                                     Toggle Dropdown                                                                           Action
                     Another action
                     Something else here
                                                               Separated link