具有加载效果的按钮
照着bootstrap网站上的例子写,怎么都没反应
只能想别的办法来实现这个效果了
<!-- 具有加载效果的按钮 --> <button type="button" id="fat-btn" class="btn btn-primary">Hello</button> <script src="../../jquery/jquery-10.0.2.js"></script> <script> $(function(){ var $btn = $('#fat-btn'); $btn.click(function(){ var $this = $(this); //禁用,设置按钮上显示的文字 $this.attr('disabled', 'disabled').html("Loading..."); setTimeout(function () { //3秒后,恢复状态 $this.removeAttr('disabled').html('Complete'); }, 3000) }); }) </script>
以下有bootstrap提供的功能,需要加入button.js,否则没有效果!
状态切换
通过添加data-toggle="button"
可以让按钮能够切换状态
<button class="btn btn-primary" data-toggle="button">Single Toggle</button>
按下
弹起
选择框
通过向按钮组添加data-toggle="buttons"
可以使按钮组具有类似选择框的选择/取消功能。
把默认checkbox框的样式改为按钮样式,按钮处于按下状态等效于勾选checkbox框
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="checkbox"> checkbox 1 </label> <label class="btn btn-primary"> <input type="checkbox"> checkbox 2 </label> <label class="btn btn-primary"> <input type="checkbox"> checkbox 3 </label> </div>
如,前2个按钮被按下,表示选择前2个选项
单选
通过向按钮组添加data-toggle="buttons"
可以让按钮组具有单选框的功能。
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="options" id="option1"> radio 1 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> radio 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3"> radio 3 </label> </div>
只有1个按钮可以被按下
相关推荐
Bootstrap 4切换Bootstrap 4 Toggle是一个Bootstrap插件/小部件,可将复选框转换为切换。图书馆分布项目描述支持bootstrap4(需要jQuery)支持bootstrap4 +(ES6类,没有依赖项)支持bootstrap4 +(React组件,没有...
bootstrap-crystal-buttons水晶样式按钮集合,里面包含各种bootstrap的水晶样式按钮
纯清除按钮Bootstrap + JQuery,输入清除按钮入门在您的项目中加载脚本。 < script src =" jquery.bootstrap-pureClearButton.js " > </ script > 将data-pure-clear-button属性添加到您的文本字段。 &...
这是一款基于bootstrap的带图标的按钮样式。这组按钮在bootstrap按钮的基础上,通过附加的HTML元素来构建小图标,并通过CSS3来制作鼠标hover动画效果。
自举方向按钮 引导程序的方向/箭头按钮 用法: 只需将类.btn-arrow-left或.btn-arrow-right添加到引导按钮。 在.btn-group内部使用可删除按钮之间的空间。 < button type =" button " class =" btn btn-...
Bootstrap风格的按钮 BButton ,BButton 是 UIButton 的子类,实现类似 Bootstrap 框架中的按钮风格。
与Bootstrap 3.3.7兼容! 灵感来源: ://eli.eliandlyndi.com/2011/10/10/using-jquery-to-provide-an-inline-confirmation-on-buttons/ 大事记 事件 数据 描述 “确认:之前” {} 首次点击时触发 “确认:已...
Bootstrap 3 教程 16 - 按钮组 以下视频教程的代码
React确认按钮 安装 npm install --save react-confirm-button 您可以根据需要安装bootstrap或material-ui或任何其他样式。 用法 import ConfirmButton from 'react-confirm-button' ; ... < p> Basic ...
Bootstrap 3 教程 90 - 加载按钮以下视频教程的代码
Bootstrap 3 教程 91 - 单个切换按钮 以下视频教程的代码
Bootstrap 3 教程 21 - 对齐按钮组 以下视频教程的代码
Bootstrap 3 教程 19 - 按钮组嵌套 以下视频教程的代码
Bootstrap 3 教程 24 - 按钮下拉大小 以下视频教程的代码
Bootstrap 3 教程 17 - 按钮组工具栏以下视频教程的代码
Bootstrap 3 教程 20 - 按钮组垂直变化以下视频教程的代码
Bootstrap 3 教程 25 - 按钮组下拉变化以下视频教程的代码
这是一款基于Bootstrap的超酷3D按钮设计效果。该3D按钮通过在按钮底部设置阴影效果来形成3D效果,并且在鼠标滑过按钮时,按钮有下凹的动画,效果非常的酷。
Bootstrap 3 教程 29 - 输入组按钮插件 以下视频教程的代码
Bootstrap 3 教程 30 - 输入组按钮下拉菜单 以下视频教程的代码