全面解析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 相关文章推荐
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
浅析JavaScript中的变量提升
Jun 01 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文件操作实现代码分享
2011/09/01 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
php连接mysql数据库
2017/03/21 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
Javascript的this用法
2017/01/16 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
js实现网页随机验证码
2020/10/19 Javascript
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Python IDLE入门简介
2017/12/08 Python
python实现推箱子游戏
2020/03/25 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
pandas的排序和排名的具体使用
2019/07/31 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
森林防火工作方案
2014/02/14 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
伊索寓言教学反思
2014/05/01 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
诚信承诺书
2015/01/19 职场文书
文体活动总结
2015/02/04 职场文书
教师辞职信范文
2015/02/28 职场文书
交通事故起诉书
2015/05/19 职场文书