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 相关文章推荐
JavaScript 的方法重载效果
Aug 07 Javascript
jQuery ajax cache缓存问题
Jul 01 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
如何编写高质量JS代码
Dec 28 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
js预加载图片方法汇总
Jun 15 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
Postman动态获取返回值过程详解
Jun 30 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
处理canvas绘制图片模糊问题
May 11 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 数组实例说明
2008/08/18 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
jQuery 选择器详解
2015/01/19 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
javascript中 try catch用法
2015/08/16 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
什么是python的列表推导式
2020/05/26 Python
python如何实现图片压缩
2020/09/11 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript