详解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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
js计算页面刷新的次数
Jul 20 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
package.json文件配置详解
Jun 15 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
微信小程序使用前置摄像头拍照
Oct 22 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
PHP number_format() 函数定义和用法
2012/06/01 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
获取body标签的两种方法
2011/10/13 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
Python3中的真除和Floor除法用法分析
2016/03/16 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
简单实现Python爬取网络图片
2018/04/01 Python
python操作文件的参数整理
2019/06/11 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
英国二手物品交易网站:Preloved
2017/10/06 全球购物
八项规定整改方案
2014/02/21 职场文书
小学生元旦广播稿
2014/02/21 职场文书
yy生日主持词
2014/03/20 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
人大代表选举标语
2014/10/07 职场文书
Python中的套接字编程是什么?
2021/06/21 Python
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL