Bootstrap 输入框组

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

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

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

• 把前缀或后缀元素放在一个带有 class .input-group 的
  中。
• 接着，在相同的
  内，在 class 为 .input-group-addon 的 内放置额外的内容。
• 把该 放置在 元素的前面或者后面。

为了保持跨浏览器的兼容性，请避免使用 元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class，输入框组是一个孤立的组件。

基本的输入框组

下面的实例演示了基本的输入框组：

实例

<
div

style
=
"
padding: 100px 100px 10px;
"
>

<
form

class
=
"
bs-example bs-example-form
"

role
=
"
form
"
>

<
div

class
=
"
input-group
"
>

<
span

class
=
"
input-group-addon
"
>
@
span
>

<
input

type
=
"
text
"

class
=
"
form-control
"

placeholder
=
"
twitterhandle
"
>

div
>

<
br
>

<
div

class
=
"
input-group
"
>

<
input

type
=
"
text
"

class
=
"
form-control
"
>

<
span

class
=
"
input-group-addon
"
>
.00
span
>

div
>

<
br
>

<
div

class
=
"
input-group
"
>

<
span

class
=
"
input-group-addon
"
>
$
span
>

<
input

type
=
"
text
"

class
=
"
form-control
"
>

<
span

class
=
"
input-group-addon
"
>
.00
span
>

div
>

form
>

div
>

尝试一下 »

结果如下所示：

输入框组的大小

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

下面的实例演示了这点：

实例

<
div

style
=
"
padding: 100px 100px 10px;
"
>

<
form

class
=
"
bs-example bs-example-form
"

role
=
"
form
"
>

<
div

class
=
"
input-group input-group-lg
"
>

<
span

class
=
"
input-group-addon
"
>
@
span
>

<
input

type
=
"
text
"

class
=
"
form-control
"

placeholder
=
"
Twitterhandle
"
>

div
>

<
br
>

<
div

class
=
"
input-group
"
>

<
span

class
=
"
input-group-addon
"
>
@
span
>

<
input

type
=
"
text
"

class
=
"
form-control
"

placeholder
=
"
Twitterhandle
"
>

div
>

<
br
>

<
div

class
=
"
input-group input-group-sm
"
>

<
span

class
=
"
input-group-addon
"
>
@
span
>

<
input

type
=
"
text
"

class
=
"
form-control
"

placeholder
=
"
Twitterhandle
"
>

div
>

form
>

div
>

尝试一下 »

结果如下所示：

复选框和单选插件

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

实例

<
div

style
=
"
padding: 100px 100px 10px;
"
>

<
form

class
=
"
bs-example bs-example-form
"

role
=
"
form
"
>

<
div

class
=
"
row
"
>

<
div

class
=
"
col-lg-6
"
>

<
div

class
=
"
input-group
"
>

<
span

class
=
"
input-group-addon
"
>

<
input

type
=
"
checkbox
"
>
span
>

<
input

type
=
"
text
"

class
=
"
form-control
"
>

div
>


div
>


<
br
>

<
div

class
=
"
col-lg-6
"
>

<
div

class
=
"
input-group
"
>

<
span

class
=
"
input-group-addon
"
>

<
input

type
=
"
radio
"
>
span
>

<
input

type
=
"
text
"

class
=
"
form-control
"
>

div
>


div
>


div
>


form
>

div
>

尝试一下 »

结果如下所示：

按钮插件

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

实例

<
div

style
=
"
padding: 100px 100px 10px;
"
>

<
form

class
=
"
bs-example bs-example-form
"

role
=
"
form
"
>

<
div

class
=
"
row
"
>

<
div

class
=
"
col-lg-6
"
>

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

div
>


div
>


<
br
>

<
div

class
=
"
col-lg-6
"
>

<
div

class
=
"
input-group
"
>

<
input

type
=
"
text
"

class
=
"
form-control
"
>

<
span

class
=
"
input-group-btn
"
>

<
button

class
=
"
btn btn-default
"

type
=
"
button
"
>
Go!
button
>

span
>

div
>


div
>


div
>


form
>

div
>

尝试一下 »

结果如下所示：

带有下拉菜单的按钮

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

实例

<
div

style
=
"
padding: 100px 100px 10px;
"
>

<
form

class
=
"
bs-example bs-example-form
"

role
=
"
form
"
>

<
div

class
=
"
row
"
>

<
div

class
=
"
col-lg-6
"
>

<
div

class
=
"
input-group
"
>

<
div

class
=
"
input-group-btn
"
>

<
button

type
=
"
button
"

class
=
"
btn btn-default dropdown-toggle
"

data-toggle
=
"
dropdown
"
>
下拉菜单
<
span

class
=
"
caret
"
>
span
>

button
>

<
ul

class
=
"
dropdown-menu
"
>

<
li
>

<
a

href
=
"
#
"
>
功能
a
>

li
>

<
li
>

<
a

href
=
"
#
"
>
另一个功能
a
>

li
>

<
li
>

<
a

href
=
"
#
"
>
其他
a
>

li
>

<
li

class
=
"
divider
"
>
li
>

<
li
>

<
a

href
=
"
#
"
>
分离的链接
a
>

li
>

ul
>

div
>


<
input

type
=
"
text
"

class
=
"
form-control
"
>

div
>


div
>


<
br
>

<
div

class
=
"
col-lg-6
"
>

<
div

class
=
"
input-group
"
>

<
input

type
=
"
text
"

class
=
"
form-control
"
>

<
div

class
=
"
input-group-btn
"
>

<
button

type
=
"
button
"

class
=
"
btn btn-default dropdown-toggle
"

data-toggle
=
"
dropdown
"
>
下拉菜单
<
span

class
=
"
caret
"
>
span
>

button
>

<
ul

class
=
"
dropdown-menu pull-right
"
>

<
li
>

<
a

href
=
"
#
"
>
功能
a
>

li
>

<
li
>

<
a

href
=
"
#
"
>
另一个功能
a
>

li
>

<
li
>

<
a

href
=
"
#
"
>
其他
a
>

li
>

<
li

class
=
"
divider
"
>
li
>

<
li
>

<
a

href
=
"
#
"
>
分离的链接
a
>

li
>

ul
>

div
>


div
>


div
>


div
>


form
>

div
>

尝试一下 »

结果如下所示：

分割的下拉菜单按钮

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

实例

<
div

style
=
"
padding: 100px 100px 10px;
"
>

<
form

class
=
"
bs-example bs-example-form
"

role
=
"
form
"
>

<
div

class
=
"
row
"
>

<
div

class
=
"
col-lg-6
"
>

<
div

class
=
"
input-group
"
>

<
div

class
=
"
input-group-btn
"
>

<
button

type
=
"
button
"

class
=
"
btn btn-default
"

tabindex
=
"
-1
"
>
下拉菜单
button
>

<
button

type
=
"
button
"

class
=
"
btn btn-default dropdown-toggle
"

data-toggle
=
"
dropdown
"

tabindex
=
"
-1
"
>

<
span

class
=
"
caret
"
>
span
>

<
span

class
=
"
sr-only
"
>
切换下拉菜单
span
>

button
>

<
ul

class
=
"
dropdown-menu
"
>

<
li
>

<
a

href
=
"
#
"
>
功能
a
>

li
>

<
li
>

<
a

href
=
"
#
"
>
另一个功能
a
>

li
>

<
li
>

<
a

href
=
"
#
"
>
其他
a
>

li
>

<
li

class
=
"
divider
"
>
li
>

<
li
>

<
a

href
=
"
#
"
>
分离的链接
a
>

li
>

ul
>

div
>


<
input

type
=
"
text
"

class
=
"
form-control
"
>

div
>


div
>


<
br
>

<
div

class
=
"
col-lg-6
"
>

<
div

class
=
"
input-group
"
>

<
input

type
=
"
text
"

class
=
"
form-control
"
>

<
div

class
=
"
input-group-btn
"
>

<
button

type
=
"
button
"

class
=
"
btn btn-default
"

tabindex
=
"
-1
"
>
下拉菜单
button
>

<
button

type
=
"
button
"

class
=
"
btn btn-default dropdown-toggle
"

data-toggle
=
"
dropdown
"

tabindex
=
"
-1
"
>

<
span

class
=
"
caret
"
>
span
>

<
span

class
=
"
sr-only
"
>
切换下拉菜单
span
>

button
>

<
ul

class
=
"
dropdown-menu pull-right
"
>

<
li
>

<
a

href
=
"
#
"
>
功能
a
>

li
>

<
li
>

<
a

href
=
"
#
"
>
另一个功能
a
>

li
>

<
li
>

<
a

href
=
"
#
"
>
其他
a
>

li
>

<
li

class
=
"
divider
"
>
li
>

<
li
>

<
a

href
=
"
#
"
>
分离的链接
a
>

li
>

ul
>

div
>


div
>


div
>


div
>


form
>

div
>

尝试一下 »

结果如下所示：

网站名称：创新互联Bootstrap教程：Bootstrap 输入框组
网页路径：http://www.shufengxianlan.com/qtweb/news31/452381.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

• 日本服务器什么好?（日本服务器什么好用)
• windows控制面板怎么输入命令？windows常用指令
• SQL Server 2008 数据挖掘的概念
• 阿里云服务器被攻击怎么办？服务器被攻击了怎么办
• 怎样创建一个自己的网站？(如何用ftp建虚拟网页)
• seo网站推广教程
• 盈高网络准入控制打造智能安全 助力山东8市30县大规模级联管理
• 美国服务器托管为什么会不稳定呢
• 哪些项目适合美国高防服务器（哪些项目适合美国高防服务器开发）

面包屑导航知识

• 北京主机托管要注意哪些事项
• 中国气象局加强数据管理，建设强大的气象数据库(中国气象局数据库)
• 抖音视频中的抖音水印怎么去掉？
• 创新互联Python教程：类型注解对象
• 如何实现爬取内网数据库？ (爬取内网的数据库)
• 虚拟主机如何配置iis环境
• 香港国际云服务器租用怎么搭建
• Hibernate一对一 主键关联映射
• 备份与恢复Mysql数据库 (mysql从备份恢复数据库数据库)
• VB.NET数组赋值怪异现象揭秘
• 使用Linux系统下LS命令操作指南（linux下ls命令）
• Linux插件：让系统更强大（linuxplugin）
• qt如何把query的数据拿出
• 国内租用境外服务器要多少钱一个月
• 如何做好网站运营?如何把这些流量变成我们的客户?

同城分类信息

• 雨棚定制
• 发电机维修
• 玻璃钢坐凳
• 橡塑保温
• 餐厅设计
• 水处理设备
• 水电改造
• 广告设计
• 主动防护网
• 不锈钢雕塑
• 花箱
• 办公空间设计
• 资质代办
• 卫生间隔断
• 航空箱
• 茶楼设计

教育培训网站建设方案　　 　广安搬家公司　　 　自适应网页设计　　 　h5页面制作　　 　成都集团网站建设　　 　西信中心　　 　雅安移动机房　　 　娃娃鱼鱼苗　　 　正泰动物　　 　成都模板网站　　 　成都品牌网站设计　　 　服务器机柜租用　　 　定制网站设计　　 　温江网站建设　　 　温江服务器租用　　 　成都光华机房服务器托管　　 　成都小程序开发　　 　成都网络营销　　 　微信小程序开发　　 　成都网站代运营