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 相关文章推荐
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
jquery remove方法应用详解
Nov 22 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
解析js如何获取css样式
Dec 11 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 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
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
js加解密 脚本解密
2008/02/22 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
十一酒店活动方案
2014/02/20 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
商务英语求职信范文
2015/03/19 职场文书
音乐课外活动总结
2015/05/09 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers