Bootstrap—各式各样的按钮

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

活学活用，自己利用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%，并失去渐变。

按钮的各个效果如下：

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

原始按钮（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>

本文参考资料地址： http://www.runoob.com/bootstrap/bootstrap-buttons.html

Bootstrap—各式各样的按钮相关推荐

bootstrap table 光标_第三章之Bootstrap 表格与按钮功能
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 学习要点: 1.表 ...
Bootstrap 组件 Button 按钮
按钮使用Bootstrap 的自定义按钮样式对于一些行动在表单中,对话框,和更多支持的多种大小.状态还有更多. 例子 Bootstrap包含几个预定义的按钮样式,每个样式都有自己的语义目的,还添加 ...
Bootstrap—点击按钮控制div隐藏和显示的切换（图文详情）
Bootstrap-点击按钮控制div隐藏和显示的切换第一步:bootstrap有一个open类用来控制隐藏和显示,动态获取open是true还是false,并且点击按钮让toggle的true和f ...
bootstrap 点击按钮刷新_bootstrap table onRefresh刷新事件
bootstrap table onRefresh刷新事件 bootstrap table刷新按钮事件,当然开启了showRefresh:"true"显示刷新按钮,用户点击刷新按钮 ...
Bootstrap组件_按钮组
按钮组通过按钮组容器把一组按钮放在同一行里.通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为.<!DOCTYPE html> <html lang="en&qu ...
Bootstrap插件之-按钮插件
按钮 button.js 按钮的功能很丰富.通过控制按钮的状态或创建一组按钮并形成一些新的组件,例如工具条. 跨浏览器兼容性在页面多次加载之间,Firefox 仍然保持表单控件的状态(禁用状态和选择 ...
bootstrap 点击按钮刷新_Spring Cloud 中的 Bootstrap 上下文
学习目标复习 Spring 事件/监听器模式(ApplicationEvent / ApplicationListener) 理解 Bootstrap 上下文理解 Spring Boot / Sp ...
Bootstrap创建拼接式按钮下拉菜单
拼接式按钮下拉菜单拼接式按钮下拉菜单由两个按钮拼接而成,一个是动作按钮,一个是下拉菜单开关按钮,它们之间被一个分隔线隔开.动作按钮用于完成按钮的原始功能,下拉菜单开关按钮用于显示下拉菜单. 只需在按 ...
Bootstrap禁用某个按钮组
禁用某个按钮组某些特殊情况下,可能需要垂直分组的按钮效果.这也很简单,只需把 .btn-group类换成.btn-group-vertical类,就可以让按钮组中的按钮堆叠排列.堆叠排列的按钮组中, ...
Bootstrap 禁用的按钮
对于链接,只要添加 .disabled 类,就可以实现颜色变浅.褪掉渐变的效果,并让按钮看起来无法点击.当鼠标移动按钮上时,按钮的样式不再发生变化.如: <a href="#" ...

Bootstrap—各式各样的按钮

Bootstrap—各式各样的按钮相关推荐

最新文章

热门文章