使用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全部源代码
May 04 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
vue引入静态js文件的方法
Jun 20 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 curl请求信息和返回信息设置代码实例
2015/04/27 PHP
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
Python中字符串对齐方法介绍
2015/05/21 Python
python实现中文转换url编码的方法
2016/06/14 Python
理论讲解python多进程并发编程
2018/02/09 Python
python实现k-means聚类算法
2018/02/23 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
python数据类型强制转换实例详解
2020/06/22 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
详解Anaconda 的安装教程
2020/09/23 Python
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
小学开学寄语
2014/01/19 职场文书
政协常委会议主持词
2015/07/03 职场文书