Latest web development tutorials

botón de arranque

En este capítulo se explicará a través de ejemplos de cómo utilizar el botón de arranque. Cualquier elemento con laclase .btn heredar la apariencia predeterminada de los botones grises redondeadas.Pero Bootstrap proporciona opciones para definir el estilo del botón, como se muestra en la siguiente tabla específica:

Los siguientes estilos se pueden utilizar <a>, el botón <>, o el elemento <input>:

categoría descripción Ejemplos
.btn Botón para añadir estilos básicos probar
.btn-default Default / botones estándar probar
.btn-primaria estilo de botón original (no operativo) probar
.btn-éxito Indica una acción exitosa probar
.btn-info La información de estilo puede ser usado botón para expulsar probar
.btn de alerta Expresó la necesidad de precaución botón probar
.btn-peligro Representa una peligrosa operación de los botones de acción probar
.btn-link Deje que el botón se parece a un enlace (todavía conserva el comportamiento del botón) probar
.btn-lg Hacer un gran botón probar
.btn-sm Hacer un pequeño botón probar
.btn-xs Hacer un botón muy pequeño probar
.btn-bloque botón a nivel de bloque (estirado a 100% de la anchura del elemento padre) probar
.active se hace clic en el botón probar
.disabled botón Desactivar probar

El siguiente ejemplo demuestra la totalidad de la clase de botón arriba:

Ejemplos

<! - Botón estándar -> <Botón type = "button" class = "btn btn-default" > botón predeterminado </ botón> <! - Proporcionar efectos visuales adicionales, identifica un conjunto de botones en la acción original -> <Botón type = "button" class = "btn btn-primaria" > Original Button botón </> <! - Representa una acción exitosa o positivo -> <Botón type = "button" class = "btn btn-éxito" > Botón éxito el botón </> <! - Mensaje de advertencia botón de contexto -> <Botón type = "button" class = "btn btn-info" > botón de información </ botón> <! - Indica la acción a tomar con precaución -> <Botón type = "button" class = "btn btn de alerta" > Botón Advertencia </ botón> <! - Representar una acción peligrosa o potencialmente negativo -> <Botón type = "button" class = "btn btn-peligro" > Botón peligroso </ botón> <! - No hace hincapié es un botón que se parece a un enlace, pero, al mismo tiempo que se mantiene el comportamiento del botón -> <Botón type = "button" class = "btn btn-link" > Botón de Enlace botón </>

Trate »

Los resultados son los siguientes:

Opciones del botón

Tamaño de los botones

La siguiente tabla muestra el tamaño del botón de acceso a una variedad de clases:

Class描述
.btn-lg这会让按钮看起来比较大。
.btn-sm这会让按钮看起来比较小。
.btn-xs这会让按钮看起来特别小。
.btn-block这会创建块级的按钮,会横跨父元素的全部宽度。

El siguiente ejemplo demuestra la totalidad de la clase de botón arriba:

Ejemplos

<P> <Botón type = "button" class = "btn btn-primaria BTN > -lg" grandes botones originales </ botón> <Botón type = "button" class = "btn btn btn-default -LG"> grandes botones </ botón> </ P> <P> <Botón type = "button" class = "btn btn-primaria" > El tamaño predeterminado del botón original de botón </> <Botón type = "button" class = "btn btn-default" > El tamaño predeterminado de los botones </ botón> </ P> <P> <Botón type = "button" class = "btn btn-primaria BTN > -SM" pequeños botones originales </ botón> <Botón type = "button" class = "btn btn btn-default > -SM" pequeños botones </ botón> </ P> <P> <Botón type = "button" class = "btn btn-primaria BTN -xs"> Originales particularmente pequeños botones </ botón> <Botón type = "button" class = "btn btn btn-default -xs"> particularmente pequeños botones </ botón> </ P> <P> <Botón type = "button" class = "btn btn-primaria BTN -lg BTN-bloque"> botones originales a nivel de bloque </ botón> <Botón type = "button" class = "btn btn btn-default -lg BTN-bloque"> botón de nivel de bloque </ botón> </ P>

Trate »

Los resultados son los siguientes:

Tamaño de los botones

estados de botón

Bootstrap proporciona la activación, la clase y otra de estado de botón está desactivado, el siguiente se explicará en detalle.

activo

Cuando se pulsa el botón para activarlo aparecerá como la apariencia (fondo oscuro, borde oscuro, sombra).

En la siguiente tabla se enumeran los elementos para hacer botones y elementos de anclaje se activa en clase:

元素Class
按钮元素添加.activeclass 来显示它是激活的。
锚元素添加 .activeclass 到 <a> 按钮来显示它是激活的。

El siguiente ejemplo ilustra este punto:

Ejemplos

<P> <Botón type = "button" class = "btn btn btn-default -LG"> botón predeterminado </ botón> <Botón type = "button" class = "btn btn btn-default -lg activa"> botón de activación del botón </> </ P> <P> <Botón type = "button" class = "btn btn-primaria BTN > -lg" Original Button </ botón> <Botón type = "button" class = "btn btn-primaria BTN -lg activa"> Activar los botones originales botón </> </ P>

Trate »

Los resultados son los siguientes:

botón activado

discapacitado

Al deshabilitar un botón, su color se desvanece a 50%, y la pérdida de gradiente.

En la siguiente tabla se enumeran los elementos y el elemento de anclaje para hacer botones están desactivados si la clase:

元素Class
按钮元素添加 disabled属性到 <button> 按钮。
锚元素添加 disabledclass到 <a> 按钮。
注意:该 class 只会改变 <a> 的外观,不会改变它的功能。在这里,您需要使用自定义的 JavaScript 来禁用链接。

El siguiente ejemplo ilustra este punto:

Ejemplos

<P> <Botón type = "button" class = "btn btn btn-default -LG"> botón predeterminado </ botón> <Botón type = "button" class = "btn btn btn-default -LG" discapacitados = "desactivado"> botón Desactivar </ botón> </ P> <P> <Botón type = "button" class = "btn btn-primaria BTN > -lg" Original Button </ botón> <Botón type = "button" class = "btn btn-primaria BTN -lg" discapacitados = "discapacidad"> desactivar los botones originales </ botón> </ P> <P> <A href = "#" class = "btn btn btn-default -LG" role = "botón"> vínculo </ a> <A href = "#" class = "btn btn btn-default -lg personas con discapacidad" role = "botón"> Desactivar enlace </ a> </ P> <P> <A href = "#" class = "btn btn-primaria BTN -lg" role = "botón"> vínculo original </ a> <A href = "#" class = "btn btn-primaria BTN -lg personas con discapacidad" role = "botón"> Desactivar el enlace original </ a> </ P>

Trate »

Los resultados son los siguientes:

botón desactivado

etiqueta del botón

Puede utilizar los botones de la <a> clase, el botón <> o <input> elementos. Sin embargo, se recomienda utilizar los botones de la clase <button> elemento, para evitar inconsistencias entre navegadores.

El siguiente ejemplo ilustra este punto:

Ejemplos

<A class = "btn btn-default" href = "#" role = "botón"> vínculo </ a> <Botón class = "btn btn-default" type = "submit"> botón </ botón> <Input class = "btn btn-default" type = "button" value = "entrada"> <Input class = "btn btn-default" type = "submit" value = "Enviar">

Trate »

Los resultados son los siguientes:

etiqueta del botón