Bootstrap CSS组件之输入框组

Bootstrap CSS组件之输入框组

本文实例为大家分享了Bootstrap输入框组的具体代码，供大家参考，具体内容如下

了解table-cell的表格width设置为1%的原因。

http://tuicool.com/articles/VzUVfyi

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

input-group(input-group-xs,input-group-sm,input-group-lg)、input-group-addon、form-control

//源码

//各元素设置为等高显示，input-group输入框组display:table，input-group-addon和form-control设置display:table-cell

.input-group {

position: relative;

display: table;

border-collapse: separate;

}

//input-group如果同时应用了col样式，则取消浮动和左右padding

.input-group[class*="col-"] {

float: none;

padding-right: 0;

padding-left: 0;

}

.input-group .form-control {

position: relative;

z-index: 2;

float: left;

width: 100%;

margin-bottom: 0;

}

.input-group-addon,

.input-group-btn {

//设置最小值，以便表格模式进行近似等分

width: 1%;

white-space: nowrap;

vertical-align: middle;

}

.input-group-addon,

.input-group-btn,

.input-group .form-control {

display: table-cell;

}

1.基本用法

有时需要将文本输入框(input-group)和文字或者小icon组合在一起进行显示

2.复选框与单选框作为addon .input-group-addon(可以放置label，icon，checkbox，radio)

3.按钮作为addon

4.下拉菜单按钮作为addon

5.分段按钮作为addon

$

0.0

Go!

Go!

<div class="input-group-btn">

前端

按钮A

按钮B

按钮C

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。