详解Bootstrap各式各样的按钮(推荐)


Posted in Javascript onDecember 13, 2016

Bootstrap为我们提供了各式各样漂亮的按钮,我们无需自己给按钮写样式,直接使用它给我们提供的类样式,使用在我们的按钮上,非常的简单方便。

为尊重原创这里贴一下参考的教程:http://www.runoob.com/bootstrap/bootstrap-buttons.html。在我的很多笔记中,您可能会看到我贴的www.runoob.com相关的网址,在这里先声明这不是广告,我只是觉得每个人的劳动成果都应该被尊重。这个网站收集了很多的信息,供我学习,我非常的感激,借鉴于这些很好的教程,我做出自己的总结,归纳知识点,方便自己记忆。假如您在做项目或者学习中,正好需要这方面的知识,然后这篇文章刚好可以帮到您,那我将会非常开心。

活学活用,自己利用bootstrap的样式来做一个表格,里边放一些知识点:

类样式 描述
.btn 圆角灰色按钮,为了让按钮不那么尖锐,我们的按钮都应该使用这个样式来获得圆角,然后再覆盖上其他的特性。
.btn-default 默认/标准按钮,白色的按下灰色。
.btn-primary 原始按钮样式(未被操作),这个跟active相对应,他是一个按钮没被操作的样式,而active是按钮被点击时显示的相应的样式。
.btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg 大按钮
.btn-sm 小按钮
.btn-xs 超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击,按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)。
.disabled 禁用按钮,颜色会变淡 50%,并失去渐变。

按钮的各个效果如下:

详解Bootstrap各式各样的按钮(推荐)

很明显,圆角按钮~成功按钮都是比较容易理解的,我们主要讲一下原始按钮,激活按钮和禁用按钮。

原始按钮(btn-primary):指的是一个按钮(原始按钮,激活按钮和禁用按钮都使用了成功按钮的样式),还没有被操作的样式,这里的表现跟其左边的成功按钮样式是一致的,都是没有被按下的样子;

激活按钮(.active):按钮被点击,被按压时的样式,这个可以说跟原始按钮是 相对应的。

禁用按钮(.disabled):看到效果很明显,相比于成功按钮,颜色变淡,失去渐变,有一层 蒙蒙的效果,当我们的鼠标悬停在上边的时候,会出现红色的禁用圆圈,这个样式非常利于用户体验。

附上代码:

<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>bootsrap按钮</title> 
 <link rel="stylesheet" href="../libs/bootstrap.css"> 
</head> 
<body> 
 <div class="container"> 
  <button class="btn">圆角按钮</button> 
  <button class="btn btn-default">默认按钮</button> 
  <button class="btn btn-info">信息按钮</button> 
  <button class="btn btn-warning">警示按钮</button> 
  <button class="btn btn-danger">危险按钮</button> 
  <button class="btn btn-link">链接按钮</button> 
  <button class="btn btn-lg">大的按钮</button> 
  <button class="btn btn-sm">小的按钮</button> 
  <button class="btn btn-xs">超小按钮</button> 
  <button class="btn btn-block">块级按钮</button> 
  <button class="btn btn-success">成功按钮</button> 
  <button class="btn btn-success btn-primary">原始按钮</button> 
  <button class="btn btn-success active">激活按钮</button> 
  <button class="btn btn-success disabled" role="button">禁用按钮</button> 
 </div> 
</body> 
</html>

以上所述是小编给大家介绍的详解Bootstrap各式各样的按钮,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用jquery清空、复位整个输入域
Apr 02 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
javascript动画系列之模拟滚动条
Dec 13 #Javascript
js闭包用法实例详解
Dec 13 #Javascript
深入学习Bootstrap表单
Dec 13 #Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 #Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 #Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 #Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 #Javascript
You might like
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
关于php mvc开发模式的感想
2011/06/28 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
layui表格实现代码
2017/05/20 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
澳大利亚相机之家:Camera House
2017/11/30 全球购物
Unix里面如何在后台运行程序
2016/10/14 面试题
情侣吵架检讨书
2014/02/05 职场文书
实习指导老师评语
2014/04/26 职场文书
个人求职自荐信范文
2014/06/20 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
2016年寒假生活小结
2015/10/10 职场文书
Python实现科学占卜 让视频自动打码
2022/04/09 Python
Golang 遍历二叉树
2022/04/19 Golang