全面解析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 相关文章推荐
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
javascript针对DOM的应用分析(二)
Apr 15 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
JS实现瀑布流效果
Mar 07 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
精美漂亮的php分页类代码
2013/04/02 PHP
php中{}大括号是什么意思
2013/12/01 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
实现vuex原理的示例
2020/10/21 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
简单了解python的break、continue、pass
2019/07/08 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python求绝对值的三种方法小结
2019/12/04 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
经济学博士求职自荐信范文
2013/11/23 职场文书
《自然之道》教学反思
2014/02/11 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书