bootstrap输入框组

关于作者：

• 郑云飞, 程序员Java（web前端，web后端，oracle数据库or mysql数据库）
• 艺名：天放
• weibo：@tianFang
• blog: zhengyunfei.iteye.com
• email: zhengyunfei8@gmail.com

• 本文主要来讲解以下内容：1.基本案例；2.尺寸；3.复选框和单选框；4.附加按钮；5.带下拉菜单的按钮；6.分段按钮；7.总结。

  基本案例

  通过在基于文本的输入框前面，后面或是两边加上文字或按钮，可以扩展对表单的控制。用带有.input-group-addon的.input-group，可以给.form-control前面或后面追加元素。

  跨浏览器兼容性

  这里请避免使用  元素，因为 WebKit 浏览器不能完全支持它的样式。

  不要和.form-group混用

  不要直接将.input-group和.form-group混合使用，因为.input-group是一个独立的组件。

  

  

  通过效果就可以看到，可在前面加，可以在后面加，也可以在前后同时加，使用起来很方便。

  尺寸

  给.input-group添加标明尺寸的class，它自己和其中的内容都会自动调整尺寸。没必要给每个元素都重复添加尺寸class。

  

  

  复选框和单选框

  可以把复选框或单选框放在输入组里而不是文本前。

  

  这个简单的案例，首先使用了栅格系统，通过.row样式类和.col-lg-*样式类的组合。

  

  首先看到的这个是在屏幕宽度足够大的情况下，两个组合控件在同一行进行排列。接下来我们通过收缩浏览器的宽度。可以看到如下效果

  

  附加按钮

  输入组里的按钮有点不同，它需要多加一层元素。 你要用 .input-group-btn 包住按钮而不是 .input-group-addon。这是因为默认的浏览器样式不能被覆盖。

  

  

  带下拉菜单的按钮

  

  

  分段按钮

  

  

  总结

  各个控件之间的组合样式多变，根据需求的不同，可以设计出很多的花样出来。