使用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 相关文章推荐
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
微信小程序国际化探索实现(附源码地址)
May 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
长波知识介绍
2021/03/01 无线电
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
简单实现python进度条脚本
2017/12/18 Python
Python常见数据类型转换操作示例
2019/05/08 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
django如何实现视图重定向
2019/07/24 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Numpy的简单用法小结
2019/08/28 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
学习Python需要哪些工具
2020/09/04 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
阿拉伯书店:Jamalon
2019/07/24 全球购物
小学安全工作汇报材料
2014/08/19 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
python3.9之你应该知道的新特性详解
2021/04/29 Python
Nginx进程调度问题详解
2021/09/25 Servers
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏
Tomcat弱口令复现及利用
2022/05/06 Servers