全面解析Bootstrap表单使用方法(表单按钮)


Posted in Javascript onNovember 24, 2015

一、多标签支持

一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等。

同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名“.btn”。

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>

全面解析Bootstrap表单使用方法(表单按钮)

二、定制风格

在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现。

全面解析Bootstrap表单使用方法(表单按钮)

全面解析Bootstrap表单使用方法(表单按钮)

<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>

三、按钮大小

在Bootstrap框架中,对于按钮的大小,也是可以定制的。

在Bootstrap框架中提供了三个类名来控制按钮大小:

全面解析Bootstrap表单使用方法(表单按钮)

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>

全面解析Bootstrap表单使用方法(表单按钮)

四、块状按钮

Bootstrap框架中提供了一个类名“.btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。在实际当中,常把这种按钮称为块状按钮。

<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary btn-block" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>

全面解析Bootstrap表单使用方法(表单按钮) 

五、按钮禁用状态

在Bootstrap框架中,要禁用按钮有两种实现方式:

方法1:在标签中添加disabled属性

方法2:在元素标签中添加类名“disabled”

两者的主要区别是:

“.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等.

在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>

全面解析Bootstrap表单使用方法(表单按钮)

今天再为大家补充一点新知识:Bootstrap表单提示信息

平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部。

<form role="form">
 <div class="form-group has-success has-feedback">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 <span class="help-block">你输入的信息是正确的</span>
 <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
 <div class="form-group has-warning has-feedback">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 <span class="help-block">请输入正确信息</span>
 <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
 </div>
 <div class="form-group has-error has-feedback">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">

 <span class="glyphicon glyphicon-remove form-control-feedback"></span>
 </div>
</form>

全面解析Bootstrap表单使用方法(表单按钮)

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是针对Bootstrap表单按钮的详细介绍,之后还有更多内容会不断更新,希望大家继续关注。

Javascript 相关文章推荐
常用简易JavaScript函数
Apr 09 Javascript
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 #Javascript
jQuery解析Json实例详解
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 #Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 #Javascript
jquery彩色投票进度条简单实例演示
Jul 23 #Javascript
js生成随机数的过程解析
Nov 24 #Javascript
You might like
什么是短波收听SWL
2021/03/01 无线电
PHP新手上路(三)
2006/10/09 PHP
php一个找二层目录的小东东
2012/08/02 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
javascript编程起步(第五课)
2007/01/10 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
Python中的ctime()方法使用教程
2015/05/22 Python
Python中tell()方法的使用详解
2015/05/24 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
Python之re操作方法(详解)
2017/06/14 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
科室工作个人总结的自我评价
2013/10/29 职场文书
求职自荐信格式
2013/12/04 职场文书
幼儿园校车司机的岗位职责
2014/01/30 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
户外活动总结
2015/02/04 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
2019年大学推荐信
2019/06/24 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书