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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
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
Terran兵种介绍
2020/03/14 星际争霸
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
生成二维码方法汇总
2014/12/26 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
Python3解释器知识点总结
2019/02/19 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Django框架视图函数设计示例
2019/07/29 Python
浅析python连接数据库的重要事项
2021/02/22 Python
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
销售人员中英文自荐信
2013/09/22 职场文书
前台接待的工作职责
2013/11/21 职场文书
应征英语教师求职信
2013/11/27 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
2015年司法局工作总结
2015/05/22 职场文书
交流会主持词
2015/07/02 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书