Bootstrap每天必学之按钮(一)


Posted in Javascript onNovember 24, 2015

本文主要讲解的是按钮的样式。
1.选项
2.尺寸
3.活动状态
4.禁用状态
5.可做按钮使用的Html标签

选项 

Bootstrap每天必学之按钮(一)

使用上面列出的class可以快速创建一个带有样式的按钮。

<button type="button" class="btn btn-default">Default</button>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-success">Success</button>
 <button type="button" class="btn btn-info">Info</button>
 <button type="button" class="btn btn-warning">Warning</button>
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-link">链接</button>

Bootstrap每天必学之按钮(一)

尺寸
 需要让按钮具有不同尺寸吗?使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮。

<p>
 <button type="button" class="btn btn-primary btn-lg">Large button</button>
 <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
 <button type="button" class="btn btn-primary">Default button</button>
 <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">Small button</button>
 <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
 <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Bootstrap每天必学之按钮(一)

通过给按钮添加.btn-block可以使其充满父节点100%的宽度,而且按钮也变为了块级(block)元素。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Bootstrap每天必学之按钮(一) 

活动状态
当按钮处于活动状态时,其表现为被按压下(底色更深,边框夜色更深,内置阴影)。对于B<button>元素,是通过:active实现的。对于<a>元素,是通过.active实现的。然而,你还可以联合使用.active <button>并通过编程的方式使其处于活动状态。
按钮元素
由于:active是伪状态,因此 无需添加,但是在需要表现出同样外观的时候可以添加.active。

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Bootstrap每天必学之按钮(一)

链接元素
可以为<a>添加.active class。

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

可以和上面的button进行一下对比。

Bootstrap每天必学之按钮(一)

禁用状态
 通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。
按钮元素
为<button>添加disabled属性。

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Bootstrap每天必学之按钮(一)

可以把鼠标放在按钮上点击查看效果。
跨浏览器的兼容性

如果为<button>添加disabled属性,Internet Explorer 9及更低版本的浏览器将会把按钮中的文本绘制为灰色,并带有恶心的阴影,目前还没有办法解决。
链接元素
为<a>添加.disabled class。

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Bootstrap每天必学之按钮(一)

这是和上面的按钮做一个对比。
我们把.disabled作为工具class使用,就像.active class一样,因此不需要增加前缀。
 链接功能不受影响

上面提到的class只是改变<a>的外观,不影响功能。在此文档中,我们通过JavaScript代码禁用了链接的默认功能。

可做按钮使用的Html标签
 可以为<a>、<button>或<input>元素添加按钮class。

<a class="btn btn-default" href="#" role="button">Link</a>
 <button class="btn btn-default" type="submit">Button</button>
 <input class="btn btn-default" type="button" value="Input">
 <input class="btn btn-default" type="submit" value="Submit">

Bootstrap每天必学之按钮(一)

跨浏览器表现

作为最佳实践,我们强烈建议尽可能使用<button>元素以确保跨浏览器的一致性样式。

出去其它原因,这个Firefox的bug让我们无法为基于<input>标签的按钮设置line-height,这导致在Firefox上,他们与其它按钮的高度不一致。
 本节主要讲解的内容是button按钮的样式,大家可以灵活的运行这几个样式进行控制就可以了,希望对大家的学习有所帮助。

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

Javascript 相关文章推荐
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
JavaScript DOM 学习总结(五)
Nov 24 #Javascript
jQuery解析json数据实例分析
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 #Javascript
jQuery解析Json实例详解
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 #Javascript
You might like
做个自己站内搜索引擎
2006/10/09 PHP
jquery中.add()的使用分析
2013/04/26 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
js原生map实现的方法总结
2020/01/19 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
haskell实现多线程服务器实例代码
2013/11/26 Python
python 网络爬虫初级实现代码
2016/02/27 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
python制作mysql数据迁移脚本
2019/01/01 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
python实现批量文件重命名
2019/10/31 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
python opencv进行图像拼接
2020/03/27 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
Linux文件操作命令都有哪些
2016/07/23 面试题
大学生求职推荐信
2013/11/27 职场文书
大学生入党思想汇报
2014/01/01 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
承诺书的格式范文
2014/03/28 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
第一军规观后感
2015/06/12 职场文书
学校远程教育工作总结
2015/08/11 职场文书