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 相关文章推荐
JQuery 操作/获取table具体代码
Jun 13 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
微信小程序删除处理详解
Aug 16 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
koa-passport实现本地验证的方法示例
Feb 20 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
php实现快速排序法函数代码
2012/08/27 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
vue小白入门教程
2018/04/02 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
Python文件处理
2016/02/29 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
大学生素质拓展活动方案
2014/02/11 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
安全生产汇报材料
2014/02/17 职场文书
责任心演讲稿
2014/05/14 职场文书
诚信承诺书模板
2014/05/26 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
郭明义观后感
2015/06/08 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫