BootStrap按钮标签及基本样式


Posted in Javascript onNovember 23, 2016

按钮标签

在<a>,<button>或input元素上使用按钮class。但是为了避免跨浏览器的不一致性,建议使用<button>标签。

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta charset="utf-8">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--记录不同的标签使用bootstrap的btn类-->
<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

感觉link标签的不怎么明显,但是还是能够从边距上看出是一个button的,这里只是说明了怎样利用不同的标签来使用btnclass。

可以使用在以上标签的样式

基本样式

btn 为按钮添加基本的按钮样式,一般与下面的类联合只用,这样可以保证按钮大小和边距的统一。

颜色

btn-default默认的按钮样式,就是白底黑字灰框,要跟btn联合使用,下同
btn-primary 原始的按钮样式,蓝底白字
btn-success 成功的样式,绿底白字
btn-info表示点击后会弹出信息,淡蓝色底白字
btn-warning 表示需要谨慎操作的按钮,黄底白字
btn-danger表示危险的操作,红底白字
btn-link让按钮看起来像一个连接,仍然保持按钮的行为

大小

btn-lg 比普通的图标要大的大图标
btn-sm 小图标
btn-xs 超小图标
btn-block 块级按钮,拉伸至父元素100%的宽度

按钮这里并不能构成响应式分布,如果三个都写了,最后一个类会覆盖前面的样式。

状态

active 表示按钮被激活,按钮会比普通的按钮宽一些

disabled disabled属性和disabled类都能将按钮禁用,两者效果相同。对于link,用disabled属性会让link显示出和button相同的效果。鼠标移上去就变成禁止的样式

<!--应用了disabled类的只是禁用了连接--> 
<a class="btn btn-danger disabled" role="button" href="#">应用disabled类</a>
<!--使用了disabled属性则禁用了整个按钮-->
<a class="btn btn-danger" role="button" disabled="disabled" href="#">应用disabled标签</a>
<button class="btn btn-default btn-danger disabled" type="submit">按钮</button>

以上所述是小编给大家介绍的BootStrap按钮标签及基本样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
解密效果
Jun 23 Javascript
js下利用控制器载入对应脚本
Jul 17 Javascript
JS模板实现方法
Apr 03 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
JavaScript仿百度图片浏览效果
Nov 23 #Javascript
Asp.Net之JS生成分页条的方法
Nov 23 #Javascript
javascript判断firebug是否开启的方法
Nov 23 #Javascript
JavaScript表单验证开发
Nov 23 #Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 #Javascript
分类解析jQuery选择器
Nov 23 #Javascript
概述jQuery的元素筛选
Nov 23 #Javascript
You might like
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
关于vue面试题汇总
2018/03/20 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
python常用排序算法的实现代码
2019/11/08 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
介绍一下你对SOA的认识
2016/04/24 面试题
科技工作者先进事迹
2014/08/16 职场文书
法人授权委托书范本
2014/09/17 职场文书
党委领导班子整改方案
2014/09/30 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python