使用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 相关文章推荐
潜说js对象和数组
May 25 Javascript
js实现拖拽效果
Feb 12 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
JavaScript this使用方法图解
Feb 04 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 Javascript
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 生成WML页面方法详解
2009/08/09 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
8个必备的PHP功能开发
2015/10/02 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
JavaScript 私有成员分析
2009/01/13 Javascript
javascript function、指针及内置对象
2009/02/19 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
js function定义函数使用心得
2010/04/15 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
详解jQuery事件
2017/01/13 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
pymssql ntext字段调用问题解决方法
2008/12/17 Python
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
python 带时区的日期格式化操作
2020/10/23 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
2014应届本科生自我评价
2014/09/13 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
房产证明范本
2015/06/19 职场文书