PHP前端开发

详解Bootstrap中的按钮组件

百变鹏仔 1个月前 (11-14) #bootstrap
文章标签 详解

本篇文章带大家详细了解一下bootstrap中的按钮组件。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态、正在加载状态、正常状态等。本文将详细介绍Bootstrap按钮插件

加载状态

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

通过添加 data-loading-text="Loading..." 可以为按钮设置正在加载的状态,但从 v3.3.5 版本开始,此特性不再建议使用,并且已经在 v4 版本中删除了

[注意]如果不设置data-loading-text,则按钮文本在Loading状态时,默认显示的是'loading...'

<button class="btn btn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button><script>$(function(){    $("#loaddingBtn").click(function () {        var $btn = $(this).button("loading");        setTimeout(function(){            $btn.button('reset')        },1000);      });});    </script>