Latest web development tutorials

Bootstrap Button (Button) widget

Button (Button) in Bootstrap button introduced in the chapter. A button (Button) plug-in, you can add some interactive, such as control button states or create groups of buttons for other components (such as toolbars).

If you want to refer to the individual plug-in features, you need to referencebutton.js.Or, as Bootstrap plugin Overview chapter mentioned, you can refer tobootstrap.jsor compressed version ofbootstrap.min.js.

Loading status

To add to the load state of the button, simply add the button elementdata-loading-text = "Loading ..." as its properties can, as shown in the following examples:

Examples

<Button id = "fat-btn" class = "btn btn-primary" data-loading-text = "Loading ..." type = "button"> Load Status </ button> <Script> $ (function () {$ ( ". Btn"). Click (function () {$ (this) .button ( 'loading'). Delay (1000) .queue (function () {// $ ( this) .button ( 'reset') ;});});}); </ script>

try it"

The results are as follows:

Button (Button) plug-in loaded state

Single switch

To activate single button switches (ie, change the normal state of the button is pressed state and vice versa), just adddata-toggle = "button" the button element as its properties can, as shown in the following examples:

Examples

<Button type = "button" class = "btn btn-primary" data-toggle = "button"> single toggle </ button>

try it"

The results are as follows:

Button (Button) plug-in a single switch

Checkbox (Checkbox)

You can create a check box group, and by adding the data attributedata-toggle to btn-group= "buttons" to add a switch box group.

Examples

<Div class = "btn-group" data-toggle = "buttons"> <Label class = "btn btn-primary" > <Input type = "checkbox"> Option 1 </ label> <Label class = "btn btn-primary" > <Input type = "checkbox"> option 2 </ label> <Label class = "btn btn-primary" > <Input type = "checkbox"> Option 3 </ label> </ Div>

try it"

The results are as follows:

Button (Button) plug-in box

Radio button (Radio)

Similarly, you can create a radio group, and by adding the data attributedata-toggle = "buttons" to add btn-groupto toggle the radio button group.

Examples

<Div class = "btn-group" data-toggle = "buttons"> <Label class = "btn btn-primary" > <Input type = "radio" name = "options" id = "option1"> Option 1 </ label> <Label class = "btn btn-primary" > <Input type = "radio" name = "options" id = "option2"> option 2 </ label> <Label class = "btn btn-primary" > <Input type = "radio" name = "options" id = "option3"> Option 3 </ label> </ Div>

try it"

The results are as follows:

Button (Button) plug-in radio button

usage

You can enable button (Button) plugthrough JavaScript, as follows:

$ ( '. Btn'). Button ()

Options

There are no options.

method

The following are some of the buttons (Button) plug-in useful ways:

方法描述实例
button('toggle')切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。
$().button('toggle')
.button('loading')当加载时,按钮是禁用的,且文本变为 button 元素的data-loading-text属性的值。
$().button('loading')
.button('reset')重置按钮状态,文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时,该方法非常有用。
$().button('reset')
.button(string)该方法中的字符串是指由用户声明的任何字符串。使用该方法,重置按钮状态,并添加新的内容。
$().button(string)

Examples

The following example demonstrates the use of the above methods:

Examples

<H2> Click on each button to see the effect of the method </ h2> <H4> Demo .button ( 'toggle') method </ h4> <Div id = "myButtons1" class = "bs-example"> <Button type = "button" class = "btn btn-primary" > original </ button> </ Div> <H4> Demo .button ( 'loading') method </ h4> <Div id = "myButtons2" class = "bs-example"> <Button type = "button" class = "btn btn-primary" data-loading-text = "Loading ..."> original </ button> </ Div> <H4> Demo .button ( 'reset') method </ h4> <Div id = "myButtons3" class = "bs-example"> <Button type = "button" class = "btn btn-primary" data-loading-text = "Loading ..."> original </ button> </ Div> <H4> Demo .button (string) method </ h4> <Button type = "button" class = "btn btn-primary" id = "myButton4" data-complete-text = "Loading finished"> click I </ button> <Script>
$ (Function () {$ ( "# MyButtons1 .btn" ) click (function () {$ (this) button ( 'toggle');.});.}); $ (Function () {$ ( "# MyButtons2 .btn" ). Click (function () {$ (this). Button ( 'loading'). Delay (1000). Queue (function () { });});}) ; $ (Function () {$ ( "# MyButtons3 .btn" ). Click (function () {$ (this). Button ( 'loading'). Delay (1000). Queue (function () {$ (This) button ( ' reset');.});});}); $ (Function () {$ ( "# MyButton4") . Click (function () {$ (this). Button ( 'loading'). Delay (1000). Queue (function () {. $ (This) button ( 'complete');});});});
</ Script>

try it"

The results are as follows:

Button (Button) plug-in method