使用Bootstrap美化按钮实例代码(demo)


Posted in Javascript onFebruary 03, 2017

在HTML5中,按钮的常用属性主要为背景颜色和大小

demo代码演示

一. input标签:

<input type="button" value="按钮" class="btn"/>

二. button标签:(这里用button标签举例)

<button type="button" class="btn btn-defult">提交</button>

btn 表示基本样式

btn-defult 表示默认样式

使用Bootstrap美化按钮实例代码(demo)默认样式

btn-primary 表示背景色为蓝色

<button type="button" class="btn btn-defult">按钮</button>

使用Bootstrap美化按钮实例代码(demo)primary

btn-success表示背景色为绿色

<button type="button" class="btn btn-success">按钮</button>

使用Bootstrap美化按钮实例代码(demo)success

其他颜色属性

btn-waring 表示背景色为橙色

btn-danger 表示背景色为红色

btn-info 表示背景色为浅蓝色

btn-link 表示无背景色

<div class="row">
      <button type="button" class="btn btn-defult">按钮</button>
      <button type="button" class="btn btn-primary">按钮</button>
      <button type="button" class="btn btn-success">按钮</button>
      <button type="button" class="btn btn-waring">按钮</button>
      <button type="button" class="btn btn-info">按钮</button>
      <button type="button" class="btn btn-danger">按钮</button>
      <button type="button" class="btn btn-link">按钮</button>
</div>

使用Bootstrap美化按钮实例代码(demo)

效果展示

按钮尺寸:

btn-lg 较大

btn-md 中等

btn-sm 较小

btn-xs 更小

<div class="row" style="text-align: center">
      <button type="button" class="btn btn-defult btn-lg">按钮</button>
      <button type="button" class="btn btn-primary btn-md">按钮</button>
      <button type="button" class="btn btn-success btn-sm">按钮</button>
      <button type="button" class="btn btn-warning btn-xs">按钮</button>
      <button type="button" class="btn btn-info btn-sm">按钮</button>
      <button type="button" class="btn btn-danger btn-md">按钮</button>
      <button type="button" class="btn btn-link btn-lg">按钮</button>
</div>

使用Bootstrap美化按钮实例代码(demo)

效果展示

其他属性

btn-block 让按钮的宽度变为100%并且成了块级元素

active 表示按钮为激活状态

disabled 表示按钮为禁用状态不可点击

<button type="button" class="btn btn-danger btn-lg" disabled>按钮</button>

使用Bootstrap美化按钮实例代码(demo)

禁用变为灰色

三. 用a标签做一个按钮

<a herf="#" class="btn btn-danger active">按钮</a>

以上所述是小编给大家介绍的使用Bootstrap美化按钮实例代码(demo),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
jquery实现手风琴案例
May 04 jQuery
Node.js的特点详解
Feb 03 #Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 #Javascript
javascript判断回文数详解及实现代码
Feb 03 #Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 #Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 #Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 #Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 #Javascript
You might like
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
AngularJS 事件发布机制
2018/08/28 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python的高级Git库 Gittle
2014/09/22 Python
Python入门篇之字典
2014/10/17 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
顺丰快递Java软件工程师面试题
2015/07/31 面试题
红领巾广播站广播稿
2014/02/01 职场文书
酒鬼酒广告词
2014/03/21 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
javascript之Object.assign()的痛点分析
2022/03/03 Javascript