Latest web development tutorials

Botón de arranque (botón) Reproductor

Button (Botón) en el botón de Bootstrap introdujo en el capítulo. Un botón (botón) plug-in, usted puede añadir algunos estados de los botones de control interactivos, tales como o crear grupos de botones para otros componentes (tales como barras de herramientas).

Si se desea hacer referencia a las características individuales de plug-in, es necesario hacer referencia abutton.js.O, como Bootstrap general Plugin capítulo mencionado, se puede hacer referencia abootstrap.jso versión comprimida debootstrap.min.js.

estado de carga

Para añadir a el estado de carga del botón, sólo tiene que añadir el elemento de botónde carga de datos de texto = "Cargando ..." ya que sus propiedades pueden, como se muestra en los siguientes ejemplos:

Ejemplos

<Botón id = "grasa-btn" class = "btn btn-primaria" los datos de carga-text = "Cargando ..." type = "button"> Estado de carga </ botón> <Script> $ (function () {$ ( ". Btn"). Click (function () {$ (this) .button ( 'loading'). Delay (1000) .queue (function () {// $ ( esto) .button ( 'reset') ;});});}); </ script>

Trate »

Los resultados son los siguientes:

Button (Botón) plug-in de estado cargado

interruptor sencillo

Para activar interruptores de botón único (es decir, cambiar el estado normal del botón se pulsa el estado y viceversa), sólo tiene queañadir-toggle de datos "botón" = el elemento de botón ya que sus propiedades pueden, como se muestra en los siguientes ejemplos:

Ejemplos

<Botón type = "button" class = "btn btn-primaria" -Toggle de datos = "botón"> sola palanca </ botón>

Trate »

Los resultados son los siguientes:

Button (Botón) plug-in de un solo conmutador

Casilla de verificación (casilla de verificación)

Se puede crear un grupo de casilla de verificación, y añadiendo los datos de atributosde datos de conmutación de "botones" btn-group= añadir un grupo caja de interruptores.

Ejemplos

<Div class = "btn-grupo" datos de palanca "botones" => <Label class = "btn btn-primaria" > <Input type = "checkbox"> Opción 1 </ label> <Label class = "btn btn-primaria" > <Input type = "checkbox"> opción 2 </ label> <Label class = "btn btn-primaria" > <Input type = "checkbox"> Opción 3 </ label> </ Div>

Trate »

Los resultados son los siguientes:

Button (Botón) plug-in de la caja

botón de radio (Radio)

Del mismo modo, se puede crear un grupo de radio, y añadiendo el atributo de datosde datos de palanca = "botones" para añadir BTN-grupopara cambiar el grupo de botones de radio.

Ejemplos

<Div class = "btn-grupo" datos de palanca "botones" => <Label class = "btn btn-primaria" > <Input type = "radio" name = "opciones" id = "option1"> Opción 1 </ label> <Label class = "btn btn-primaria" > <Input type = "radio" name = "opciones" id = "opcion2"> opción 2 </ label> <Label class = "btn btn-primaria" > <Input type = "radio" name = "opciones" id = "opción3"> Opción 3 </ label> </ Div>

Trate »

Los resultados son los siguientes:

Button (Botón) plug-in botón de opción

uso

Botón (Button) puede habilitar conectea través de JavaScript, de la siguiente manera:

$ ( '. Btn'). Botón ()

opciones

No hay opciones.

camino

Los siguientes son algunos de los botones (botón) plug-in de maneras útiles:

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

Ejemplos

El siguiente ejemplo demuestra el uso de los métodos anteriores:

Ejemplos

<H2> Haga clic en cada botón para ver el efecto del método </ h2> <H4> Demostración .button ( 'alternar') Método </ h4> <Div id = "myButtons1" class = "bs-ejemplo"> <Botón type = "button" class = "btn btn-primaria" > ORIGINAL </ botón> </ Div> <H4> Demostración .button ( 'loading') Método </ h4> <Div id = "myButtons2" class = "bs-ejemplo"> <Botón type = "button" class = "btn btn-primaria" los datos de carga-text = "Cargando ..."> ORIGINAL </ botón> </ Div> <H4> Demostración .button ( 'reset') Método </ h4> <Div id = "myButtons3" class = "bs-ejemplo"> <Botón type = "button" class = "btn btn-primaria" los datos de carga-text = "Cargando ..."> ORIGINAL </ botón> </ Div> <H4> Demostración .button (cadena) Método </ h4> <Botón type = "button" class = "btn btn-primaria" id = "" myButton4 datos completa de texto = "Carga terminada"> haga clic en I </ botón> <Script>
$ (Function () {$ ( "# MyButtons1 .btn" ) click (function () {$ (este botón) ( 'alternar') ;.}) ;.}); $ (function () {$ ( "# MyButtons2 .btn" ). Click (function () {$ (este). Botón ( 'loading'). Delay (1000). Cola (function () { });});}) ; $ (Function () {$ ( "# MyButtons3 .btn" ). Click (function () {$ (este). Botón ( 'loading'). Delay (1000). Cola (function () {$ (Este) botón ( ' reset') ;.});});}); $ (function () {$ ( "# MyButton4") . Click (function () {$ (este). Botón ( 'loading'). Delay (1000). Cola (function () {$ (Este) botón (. 'Completa');});});});
</ Script>

Trate »

Los resultados son los siguientes:

Button (Botón) Método de plug-in