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 vvorld 在线加密破解方法
Nov 13 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
详解JavaScript对象类型
Jun 16 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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 分页类实现代码
2009/12/03 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
Python通过文本和图片生成词云图
2020/05/21 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
阿里旅行:飞猪
2017/01/05 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
应届毕业生的自我鉴定
2013/11/13 职场文书
毕业生护理专业个人求职信范文
2014/01/04 职场文书
作文评语大全
2014/04/23 职场文书
三严三实对照检查材料
2014/08/25 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
基于python实现银行管理系统
2021/04/20 Python
html5表单的required属性使用
2021/07/07 HTML / CSS
vue elementUI批量上传文件
2022/04/26 Vue.js