全面解析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 相关文章推荐
基于jQuery的获取标签名的代码
Jul 16 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 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实现图象锐化代码
2007/06/14 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
Python Flask框架扩展操作示例
2019/05/03 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
解决python3输入的坑——input()
2020/12/05 Python
工艺工程师工作职责
2013/11/23 职场文书
个人生活学习自我评价范文
2013/11/26 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
网管求职信
2014/03/03 职场文书
优秀大学生自荐信
2014/06/09 职场文书
欢迎横幅标语
2014/06/17 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
使用 Apache 反向代理的设置技巧
2022/01/18 Servers