Bootstrap 输入框组

Bootstrap 输入框组

本章将讲解 Bootstrap 支持的另一个特性,输入框组。输入框组扩展自

结果如下所示:

基本的输入框组

输入框组的大小

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

下面的实例演示了这点:

实例

@

 

@

 

@

 

结果如下所示:

输入框组的大小

复选框和单选插件

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

实例

 

 

 

结果如下所示:

输入框组的复选框和单选插件

按钮插件

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

实例





 

结果如下所示:

输入框组的按钮插件

带有下拉菜单的按钮

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

实例

 

结果如下所示:

输入框组的下拉菜单按钮

分割的下拉菜单按钮

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

实例



 

结果如下所示:

输入框组中分割的下拉菜单按钮

相关推荐

Arduino + USB Host Sheild 制作USB鼠标转PS/2接口

Arduino + USB Host Sheild 制作USB鼠标转PS/2接口

在这里插入图片描述

python笔记(第二课)【导入包】【数据类型】【string类型与byte类型的转换】

在这里插入图片描述

初步了解DataBinding(数据绑定)

在这里插入图片描述

SpringBoot专题学习Part28:SpringBoot整合Elasticsearch(使用Jest和Spring Data Elasticsearch进行操作)