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重要知识更新
Jul 08 Javascript
给Javascript数组插入一条记录的代码
Aug 30 Javascript
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 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
我的论坛源代码(二)
2006/10/09 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
jquery选择器简述
2015/08/31 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
用python制作个视频下载器
2021/02/01 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
销售工作人员的自我评价分享
2013/11/10 职场文书
财务分析个人的自荐书范文
2013/11/24 职场文书
新学期家长寄语
2014/01/19 职场文书
运动会解说词200字
2014/02/06 职场文书
促销活动方案模板
2014/02/24 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
新学期感想
2015/08/10 职场文书
用python画城市轮播地图
2021/05/28 Python