bootstrap按钮插件（Button）使用方法解析

按钮插件（Button）学习笔记：

按钮插件

样式文件：
☑ LESS版本：源文件buttons.less

☑ 点击按钮时，按钮文字变为“正在加载…”，一旦加载完之后又变回“获取数据”。简单点说就是控制按钮状态，比如禁用状态、正在加载状态、正常状态等；
☑ 按钮切换状态
☑ 按钮模仿单选按钮
☑ 按钮模仿复选按钮

按钮插件–按钮加载状态
通过按钮可以设计状态提示，当单击按钮时，会显示loading状态信息。例如，点击“加载”按钮，会触发按钮的加载的状态

加载

通过data-loading-text属性定义加载的文本信息，然后通过JavaScript给按钮绑定一个事件，并给按钮添加一个button(“loading”)方法来激活按钮的加载状态行为。如下所示：

$(function(){
 $("#loaddingBtn").click(function () {
  $(this).button("loading");
  });
});

按钮插件–模拟单选择按钮

在Bootstrap框架中按钮插件中，可以通过给按钮组自定义属性data-toggle=”buttons”

<div class="btn-group">
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options1">男
 </label>
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options2">女
 </label>
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options3">未知
 </label>
</div>
----------------------------------------------------------------------
<div class="btn-group" data-toggle="buttons">
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options1">男
 </label>
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options2">女
 </label>
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options3">未知
 </label>
</div>

按钮插件–模拟复选按钮

<div class="btn-group">
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options1">电影
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options2">音乐
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options3">游戏
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options4">摄影
 </label>
</div>
-------------------------------------------------------------------
<div class="btn-group" data-toggle="buttons">
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options1">电影
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options2">音乐
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options3">游戏
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options4">摄影
 </label>
</div>

按钮插件–按钮状态切换

使用 data-toggle 属性还可以激活按钮的行为状态，实现在激活和未激活之间进行状态切换。

<button type="button" data-toggle="button" class="btn btn-primary">确认</button>

按钮插件–JavaScript用法

1、切换按钮状态（得到焦点）

$("#mybutton").button("toggle")

2、重新恢复按钮：

$("#mybutton").button("reset")

3、任意参数：

$(“#mybutton”).button(“任意字符参数名”)

替换 data-任意字符参数名-text 的属性值为“按钮上显示的文本值”

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# bootstrap  # 按钮  # button  # bootstrap改变按钮加载状态  # 详解Bootstrap按钮  # 全面解析Bootstrap表单使用方法（表单按钮）  # Bootstrap每天必学之按钮  # Bootstrap导航栏各元素操作方法(表单、按钮、文本)  # JS组件Bootstrap按钮组与下拉按钮详解  # Bootstrap按钮组件详解  # Bootstrap按钮下拉菜单组件详解  # 基于Bootstrap重置输入框内容按钮插件  # Bootstrap每天必学之按钮（Button）插件  # 加载  # 正在加载  # 复选  # 还可以  # 可以通过  # 自定义  # 所示  # 方法来  # 绑定  # 单击  # 值为  # 大家多多  # 变回  # 单选  # 学习笔记  # 并给  # 简单点  # 未激活  # pre  # text 

相关文章： c++怎么实现高并发下的无锁队列_c++ std::atomic原子变量与CAS操作【详解】  如何在橙子建站中快速调整背景颜色？  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  建站中国必看指南：CMS建站系统+手机网站搭建核心技巧解析  宝塔建站教程：一键部署配置流程与SEO优化实战指南  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  专业网站制作服务公司,有哪些网站可以免费发布招聘信息？  如何选择适配移动端的WAP自助建站平台？  如何选择香港主机高效搭建外贸独立站？  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  Avalonia如何实现跨窗口通信 Avalonia窗口间数据传递  c++怎么编写动态链接库dll_c++ __declspec(dllexport)导出与调用【方法】  如何选购建站域名与空间？自助平台全解析  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  常州自助建站费用包含哪些项目？  Bpmn 2.0的XML文件怎么画流程图  微信推文制作网站有哪些,怎么做微信推文，急？  天津个人网站制作公司,天津网约车驾驶员从业资格证官网？  企业网站制作费用多少,企业网站空间一般需要多大，费用是多少？  建站之星备案是否影响网站上线时间？  如何高效配置香港服务器实现快速建站？  定制建站价位费用解析与套餐推荐全攻略  建站主机选购指南与交易推荐：核心配置解析  如何配置FTP站点权限与安全设置？  济南网站建设制作公司,室内设计网站一般都有哪些功能？  建站为何优先选择香港服务器？  魔方云NAT建站如何实现端口转发？  定制建站流程步骤详解：一站式方案设计与开发指南  自助网站制作软件,个人如何自助建网站？  如何通过IIS搭建网站并配置访问权限？  如何在IIS中新建站点并解决端口绑定冲突？  简易网站制作视频教程,使用记事本编写一个简单的网页html文件？  早安海报制作网站推荐大全,企业早安海报怎么每天更换？  视频网站制作教程,怎么样制作优酷网的小视频？  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  c# await 一个已经完成的Task会发生什么  如何通过建站之星自助学习解决操作问题？  金*站制作公司有哪些,金华教育集团官网？  如何在万网ECS上快速搭建专属网站？  婚礼视频制作网站,学习*后期制作的网站有哪些？  宿州网站制作公司兴策,安徽省低保查询网站？  如何在宝塔面板中修改默认建站目录？  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  ,如何利用word制作宣传手册？  相册网站制作软件,图片上的网址怎么复制？  建站之星上传入口如何快速找到？  一键网站制作软件,义乌购一件代发流程？  专业公司网站制作公司,用什么语言做企业网站比较好？  ,怎么用自己头像做动态表情包？