Red de conocimiento informático - Computadora portátil - ¿Cuáles son los estilos de los botones de guía?

¿Cuáles son los estilos de los botones de guía?

Resumen: Los estilos de los botones de inicio incluyen: botón básico, botón predeterminado, botón principal, botón de éxito, botón de información, botón de advertencia, botón de peligro y botón de enlace.

I. Introducción del botón:

Los botones también son uno de los contenidos principales del marco Bootstrap. Porque los botones son algo indispensable en la producción de páginas web.

Y diferentes páginas web tienen diferentes estilos de botones, e incluso el mismo sitio web o aplicación tiene múltiples estilos de botones, como diferentes colores, tamaños y estados de botones.

lt; botón class="btn" type="button"gt; botón básico.btnlt;/buttongt

lt botón class="btn btn-default" type= "button"gt; Botón predeterminado.btn-primarylt;/buttongt;

lt;button class="btn btn-success" type="button"gt; Botón exitoso.btn-successlt;/buttongt;

lt; botón de información="btn btn-info" tipo="botón"gt; botón de información.btn-infolt;/buttongt

lt; -advertencia" tipo="botón"gt; botón de advertencia. btn-warninglt;/buttongt;

lt;button class="btn btn-danger" type="button"gt;Peligro button.btn-dangerlt;/buttongt

lt; ;button class="btn btn-link" type="button"gt;Link button.btn- linklt;/buttongt;

2. Botones básicos

Bootstrap Framework V3.x Los botones básicos de la versión son los mismos que los botones básicos de la versión V2.x y se implementan mediante el nombre de clase "btn".

La diferencia es que la versión V3.x es más concisa y elimina algunos efectos CSS3 en la versión V2.x, como sombra de texto, fondo degradado, sombra de cuadro, etc.

El marco Bootstrap tiene en cuenta las diferencias de análisis de diferentes navegadores y proporciona un proceso de compatibilidad seguro, por lo que los efectos de los botones son básicamente los mismos en diferentes navegadores.

Para el código fuente, consulte las líneas 1992 a 2010 del archivo bootstrap.css:

Los botones en el marco Bootstrap son muy simples de usar. siguiente:

lt;button class="btn" type="button"gt; Soy un botón básicolt;/buttongt;

3. >El marco Bootstrap primero pasa la clase base. El nombre ".btn" define el estilo del botón base y luego ".btn-default" define el estilo del botón predeterminado.

El estilo de botón predeterminado es modificar el color de fondo, el color del borde y el color del texto del botón según el estilo básico del botón.

El código fuente se puede encontrar en las líneas 2040 a 2044 del archivo bootstrap.css

Usar el estilo de botón predeterminado también es muy simple, solo agregue el nombre de clase "btn-default ":

lt;button class="btn btn-default" type="button"gt;Default buttonlt;/buttongt;

Cuatro. Compatibilidad con múltiples etiquetas (múltiples etiquetas para crear botones )

Generalmente, además de usar elementos lt;buttongt;label, también puede usar lt;input type="submit"gt;y lt;agt;etiquetas, etc. al crear botones.

De manera similar, al crear botones en el marco Bootstrap, además de los elementos de marca que acabamos de mencionar, también puedes usarlos en otros elementos de marca. Lo único a tener en cuenta es que debes agregar el nombre de la clase ". btn" al elemento de marcado.

Si no lo agregas, no obtendrás ningún efecto de botón.

lt; botón class="btn btn-default" type="button"gt; etiqueta del botón botónlt;/buttongt;lt; tipo de entrada="submit" class="btn btn-default" valor = "botón de etiqueta de entrada"/gt;lt;a href="##" class="btn btn-default"gt;un botón de etiquetalt;/agt;lt;span class="btn btn-default"gt;botón de etiqueta de spanlt ;/spangt;lt;p class="btn btn-default"gt;p Label buttonlt;/pgt;

Aunque los botones se pueden diseñar usando cualquier elemento de etiqueta en el marco Bootstrap, personalmente no lo recomiendo. Con este método, y para evitar problemas de compatibilidad con el navegador, recomiendo encarecidamente utilizar botones o etiquetas para diseñar los botones.

5. Personalizar botones de diferentes estilos

Como se mencionó al presentar los botones, puede haber diferentes estilos de botones al comienzo de la página web. Bueno, esto también se tiene en cuenta en el marco Bootstrap.

Además del estilo de botón predeterminado en el marco Bootstrap, hay otros seis estilos de botón. Cada estilo es en realidad el mismo, y la diferencia radica en el color de fondo, el color del borde y el color del texto del botón. .

Los diferentes estilos de botones en el marco Bootstrap se implementan a través de diferentes nombres de clase. Durante el uso, los desarrolladores solo necesitan elegir diferentes nombres de clase:

Su uso El método también es muy simple, solo. Al igual que el uso del botón predeterminado presentado anteriormente, solo necesita agregar el nombre de clase correspondiente al botón básico ".btn" para obtener el estilo de botón deseado.

Por ejemplo:

lt; botón clase="btn" tipo="botón"gt; botón base.btnlt;/buttongt;lt; botón clase="btn btn-default" tipo="botón"gt; ; botón predeterminado.btn- defaultlt;/buttongt;lt;button class="btn btn-primary" type="button"gt;primary button.btn-primarylt;/buttongt;lt;button class="btn btn-success" escriba ="botón"gt;éxito botón.btn-éxito;/buttongt;lt;botón clase="btn btn-info" tipo="botón"gt;info botón.btn-infolt;/buttongt.lt;botón clase= " btn btn-warning" type="button"gt; advertencia-button.btn-warninglt;/buttongt;lt;button class="btn btn-danger" type="button"gt;botón peligroso.btn-dangerlt;/ buttongt ;lt;button class="btn btn-link" type="button"gt;link button.btn-linklt;/buttongt; Tamaño del botón

En el marco Bootstrap. El tamaño de los botones también se puede personalizar. De manera similar a la entrada, el tamaño del botón también se puede controlar agregando el nombre de la clase al botón base ".btn".

El marco Bootstrap proporciona tres nombres de clase para controlar el tamaño del botón:

No es difícil ver en la tabla anterior que en el marco Bootstrap, el tamaño del botón se determina modificando el relleno del botón, las propiedades de altura de línea, tamaño de fuente y radio de borde a controlar.

El código fuente se puede encontrar en las líneas 2319 a 2339 del archivo bootstrap.css.

En aplicaciones reales, estos nombres de clases se pueden usar junto con otros nombres de clases de colores en el archivo. use, pero lo único que no puede faltar es el nombre de la clase ".btn":

lt button class="btn btn-primary btn-lg" type="button"gt; botón.btn-lglt; /buttongt;

lt; botón class="btn btn-primary" tipo="botón"gt; class="btn btn-primary btn-sm" type="button"gt; pequeño botón.btn-smlt;/buttongt;

7. Botones de bloqueo

El marco Bootstrap proporciona una herramienta llamada clase "btn-block".

Un botón que use este nombre de clase permitirá que el botón llene todo el contenedor y el botón no tendrá ningún valor de relleno o margen.

En la práctica, estos botones suelen denominarse botones de bloque.

Consulte el código fuente en las líneas 2340 a 2353 del archivo bootstrap.css:

El método de uso es similar al método anterior, solo agregue ". btn-block " Nombre de la clase, por supuesto".btn "El nombre de la clase es esencial:

lt button class="btnbtn-primary btn-lg btn-block" type="button"gt; botón class="btnbtn-primary btn-block" type="button"gt; botón normal. btn-lglt;/buttongt;lt; botón class="btnbtn-primary btn-sm btn-block" type="button"gt;botón pequeño.btn-smlt;/buttongt;lt;button class="btnbtn-primary btn -xs btn-block" type="button"gt; ultra-small button.btn-xslt;/buttongt;

8. Estado del botón: estado activo

El marco Bootstrap Realice algún procesamiento especial en el estado del botón. En el marco Bootstrap, los efectos de estado de los botones se dividen principalmente en dos tipos: estado activado y estado deshabilitado.

Los estados de actividad de los botones Bootstrap incluyen el estado de desplazamiento (:hover), el estado de clic (:active) y el estado de enfoque (:focus). línea del archivo css 2045 a la línea 2058

Para el código fuente, consulte la línea del archivo bootstrap.css 2045 a la línea 2058

Para el código fuente, consulte la línea del archivo bootstrap.css 2045 a la línea 2058 Línea 2058

Cuando el botón está en el estado en que se hizo clic (es decir, la pseudoclase ":activa" del elemento botón

lt; botón class="btn" type="botón"gt; botón base.btnlt;/buttongt

lt botón class="btn btn-default" tipo= "botón"gt; botón predeterminado.btn-primarylt;/buttongt;

lt;botón class="btn btn-success" type="button"gt;Botón de éxito.btn-successlt;/buttongt;

lt; botón de información="btn btn-info" tipo="botón"gt; botón de información.btn-infolt;/buttongt

lt; -warning" type="button"gt; Advertencia Button.btn-warninglt;/buttongt;

lt;button class="btn btn-danger" type="button"gt;Peligro button.btn- Dangerlt;/buttongt;

lt;button class="btn btn-link" type="button"gt;Link button.btn-linklt;/buttongt 9. Estado del botón: deshabilitado

Al igual que la entrada y otros controles de formulario, los botones en el marco Bootstrap también tienen configuraciones de estado deshabilitadas.

En comparación con otros estados de botones, el estado deshabilitado realiza cierto procesamiento en la transparencia del color de fondo y el valor de opacidad oscila entre 100 y 65.

En Bootstrap, hay dos formas de deshabilitar botones:

Método 1: Agregar el atributo deshabilitado a la etiqueta

Método 2: Agregarlo al elemento etiqueta Nombre de clase "disabled"

La principal diferencia entre los dos es:

El estilo ".disabled" no deshabilita el comportamiento predeterminado del botón, como los comportamientos de enviar y restablecer.

Si desea deshabilitar un botón y también deshabilitar el comportamiento predeterminado del botón, debe manejarlo a través de un lenguaje como JavaScript.

lt;agt; tiene un problema similar: si desactiva el botón usando el nombre de clase ".disable", no podrá desactivar el comportamiento del enlace.

El comportamiento predeterminado de un elemento se puede deshabilitar agregando el atributo "deshabilitado" a la etiqueta del elemento.

lt;button class="btnbtn-primary btn-lgbtn-block" type="button"disable="disabled"gt;Desactiva el botón mediante el atributo deshabilitadolt;/buttongt;lt;button class= " btnbtn-primary btn-block deshabilitado" type="button"gt; Deshabilite el botón agregando el nombre de la clase deshabilitado