Bootstrap基本插件学习笔记之按钮(21)
(编辑：jimmy 日期: 2024/11/18 浏览：3 次 )
前面已经介绍过Button的使用。通过button按钮，我们还能实现一些诸如按钮状态控制等形式的交互。
0x01 加载状态
添加data-loading-text=”Loading…”属性：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="/UploadFiles/2021-04-02/jquery.min.js">效果如下：
$("#btnLoad").click(function () { $(this).button('loading').delay(1000).queue( function () { $(this).button('reset'); $(this).dequeue(); } ) })loading状态持续1s后，将会执行reset，恢复原始状态。
0x02 复选框
设置data-toggle为”buttons”可以实现复选框按钮组的效果：
上一篇：Bootstrap基本插件学习笔记之Alert警告框(20)<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="/UploadFiles/2021-04-02/jquery.min.js">效果如下：
0x03 单选按钮
类似地：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="/UploadFiles/2021-04-02/jquery.min.js">效果如下：
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：浅谈Node.js：理解stream
