全面解析Bootstrap表单使用方法(表单按钮)
2017-08-20 11:00
274 查看
这篇文章全面解析了Bootstrap表单的使用方法,本文重点介绍Bootstrap表单按钮,感兴趣的小伙伴们可以参考一下
一、多标签支持
一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等。
同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名“.btn”。
?
二、定制风格
在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现。
?
在Bootstrap框架中,对于按钮的大小,也是可以定制的。
在Bootstrap框架中提供了三个类名来控制按钮大小:
?
四、块状按钮
Bootstrap框架中提供了一个类名“.btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。在实际当中,常把这种按钮称为块状按钮。
?
五、按钮禁用状态
在Bootstrap框架中,要禁用按钮有两种实现方式:
方法1:在标签中添加disabled属性
方法2:在元素标签中添加类名“disabled”
两者的主要区别是:
“.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等.
在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。
?
今天再为大家补充一点新知识:Bootstrap表单提示信息
平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部。
?
如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程
以上就是针对Bootstrap表单按钮的详细介绍,之后还有更多内容会不断更新,希望大家继续关注
相关文章推荐
- 全面解析Bootstrap表单使用方法(表单按钮)
- 全面解析Bootstrap表单使用方法(表单按钮)
- 全面解析Bootstrap表单使用方法(表单样式)
- 全面解析Bootstrap表单使用方法(表单样式)
- 全面解析Bootstrap表单使用方法(表单控件)
- 全面解析Bootstrap表单使用方法(表单控件状态)
- 全面解析Bootstrap表单使用方法(表单控件状态)
- 全面解析Bootstrap排版使用方法(文字样式)
- 全面解析Bootstrap中transition、affix的使用方法
- 全面解析Bootstrap表单样式的使用
- 全面解析Bootstrap排版使用方法(标题)
- bootstrap按钮插件(Button)使用方法解析
- 全面解析Bootstrap中tab(选项卡)的使用方法
- 全面解析Bootstrap排版使用方法(文字样式)
- 全面解析Bootstrap中tooltip、popover的使用方法
- 全面解析Bootstrap排版使用方法(标题)
- 全面解析Bootstrap中nav、collapse的使用方法
- 全面解析Bootstrap中scrollspy(滚动监听)的使用方法
- 全面解析Bootstrap中form、navbar的使用方法