부트스트랩 중국어 매뉴얼 /Bootstrap 输入框组

Bootstrap 输入框组

本章将讲解 Bootstrap 支持的另一个特性,输入框组。输入框组扩展自表单控件。使用输入框组,您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素。例如,您可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素。

.form-control添加前缀或后缀元素的步骤如下:

  • 把前缀或后缀元素放在一个带有 class.input-group

    中。

  • 接着,在相同的

    内,在 class 为.input-group-addon 内放置额外的内容。

  • 把该 放置在 元素的前面或者后面。

为了保持跨浏览器的兼容性,请避免使用

.00

$ .00

运行实例 »

点击 "运行实例" 按钮查看在线实例

输入框组的大小

您可以通过向.input-group添加相对表单大小的 class(比如.input-group-lg、input-group-sm、input-group-xs)来改变输入框组的大小。输入框中的内容会自动调整大小。

下面的实例演示了这点:

实例

   Bootstrap 实例 - 输入框组的大小    
  
@

@

@

运行实例 »

点击 "运行实例" 按钮查看在线实例

复选框和单选插件

您可以把复选框和单选插件作为输入框组的前缀或者后缀元素,如下面的实例所示:

实例

   Bootstrap 实例 - 输入框组的复选框和单选插件    
  


运行实例 »

点击 "运行实例" 按钮查看在线实例

按钮插件

您也可以把按钮作为输入框组的前缀或者后缀元素,这个时候您就不是添加.input-group-addonclass,您需要使用 class.input-group-btn来包裹按钮。这是必需的,因为默认的浏览器样式不会被重写。下面的实例演示了这点:

实例

   Bootstrap 实例 - 输入框组的按钮插件    
  


运行实例 »

点击 "运行实例" 按钮查看在线实例

带有下拉菜单的按钮

在输入框组中添加带有下拉菜单的按钮,只需要简单地在一个.input-group-btnclass 中包裹按钮和下拉菜单即可,如下面的实例所示:

实例

   Bootstrap 实例 - 输入框组的下拉菜单按钮    
  

运行实例 »

点击 "运行实例" 按钮查看在线实例

分割的下拉菜单按钮

在输入框组中添加带有下拉菜单的分割按钮,使用与下拉菜单按钮大致相同的样式,但是对下拉菜单添加了主要的功能,如下面的实例所示:

实例

   Bootstrap 实例 - 输入框组中分割的下拉菜单按钮    
  


运行实例 »

点击 "运行实例" 按钮查看在线实例