Bootstrap基本插件学习笔记之按钮(21)

前面已经介绍过Button的使用。通过button按钮，我们还能实现一些诸如按钮状态控制等形式的交互。

0x01 加载状态

添加data-loading-text=”Loading…”属性：

 
 
 
 
 
 



 
  按钮交互
 
 
  加载状态
 
 

效果如下：

$("#btnLoad").click(function () {
  $(this).button('loading').delay(1000).queue(
    function () {
     $(this).button('reset');
     $(this).dequeue();
    }
   )
})

loading状态持续1s后，将会执行reset，恢复原始状态。

0x02 复选框

设置data-toggle为”buttons”可以实现复选框按钮组的效果：

 
 
 
 
 
 



 
  复选框按钮组
 
 
  
   选项1
  
  
   选项2
  
  
   选项3
  
 

效果如下：

0x03 单选按钮

类似地：

 
 
 
 
 
 



 
  单选按钮
 
 
  
   选项1
  
  
   选项2
  
  
   选项3
  
 

效果如下：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

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