Bootstrap-按钮插件 - 芒果文档

📌 相关文章

📜 Bootstrap-按钮插件

📅 最后修改于: 2020-10-27 06:23:53 🧑 作者: Mango

按钮在引导按钮一章中进行了说明。使用此插件，您可以添加一些交互，例如控制按钮状态，或为更多组件(如工具栏)创建按钮组。

如果要单独包含此插件功能，则需要button.js 。另外，如在Bootstrap插件概述一章中所述，您可以包括bootstrap.js或缩小的bootstrap.min.js 。

加载状态

要将加载状态添加到按钮，只需将data-loading-text =“ Loading …”作为属性添加到按钮元素，如以下示例所示-

当您单击按钮时，输出将如下图所示：

单拨

要激活单个按钮上的切换(即将按钮的正常状态更改为按下状态，反之亦然)，请将data-toggle =“ button”作为属性添加到按钮元素，如以下示例所示-

选框

您可以通过将数据属性data-toggle =“ buttons”添加到btn-group中来创建复选框组并对其进行切换。


   
       Option 1
   
   
   
       Option 2
   
   
   
       Option 3

无线电

同样，您可以创建一组无线电输入并通过将数据属性data-toggle =“ buttons”添加到btn-group来对其进行切换。


   
       Option 1
   
   
   
       Option 2
   
   
   
       Option 3

用法

您可以通过JavaScript启用按钮插件，如下所示-

$('.btn').button()

选件

没有选择。

方法

下面给出了一些按钮插件的有用方法-

Method	Description	Example
button(‘toggle’)	Toggles push state. Gives the button the appearance that it has been activated. You can also enable auto toggling of a button by using the data-toggle attribute.	$().button('toggle')
.button(‘loading’)	When loading, the button is disabled and the text is changed to the option from the data-loading-text attribute of button element	$().button('loading')
.button(‘reset’)	Resets button state, bringing the original content back to the text. This method is useful when you need to return the button back to the primary state	$().button('reset')
.button(string)	String in this method is referring to any string declared by the user. To reset the button state and bring in new content use this method.	$().button(string)

例

以下示例演示了上述方法的使用-

Click on each of the buttons to see the effects of methods
Example to demonstrate .button('toggle') method


   


Example to demonstrate  .button('loading') method


   


Example to demonstrate .button('reset') method


   


Example to demonstrate  .button(string) method