前端开发

 首页 > 前端开发 > Bootstrap > Bootstrap3.0学习第十一轮:输入框组

Bootstrap3.0学习第十一轮:输入框组

分享到:
【字体:
导读:
         [导读] 本文主要来讲解以下内容:1.基本案例;2.尺寸;3.复选框和单选框;4.附加按钮;5.带下拉菜单的按钮;6.分段按钮;7.总结。 基本案例 通过在基于文本的输入框前面,后面或是两边加上...

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

基本案例

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

跨浏览器兼容性

这里请避免使用 

不要和.form-group混用

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

1

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

尺寸

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

2

复选框和单选框

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

3

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

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

附加按钮

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

4

带下拉菜单的按钮

5

分段按钮

6

总结

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

分享到:
Bootstrap3.0学习第十轮:下拉菜单及按钮...
终于把前面关于Bootstrap CSS部分简单的学习了一遍,应该忽视了比较多的细节问题。不过大部分的内容我都过了一遍,并且用代码实现了一遍,而且看到了真是的效果。挺不错的。那么接下来的几篇文章主要来讲解Bootstrap的组件。 那么本文主要来讲解以下内容:1.下拉菜单;2.按钮组;3.按钮式下拉菜单;4.总结。 再来熟...
Bootstrap3.0学习第十二轮:导航、标签、...
本文主要来讲解以下内容:1.导航;2.标签;3.面包屑导航。 导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分。改变修饰类可以改变样式。 1、标签页 注意.nav-tabs类需要.nav基类。 在这里暂时只进行探讨简单的样式。 2、胶囊式标签页 用相同的 HTML 标记,...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……