Botones de arranque | Explicado
Este artículo le instruirá:
- Cómo hacer botones en bootstrap?
- Cómo crear botones de esquema en Bootstrap?
- Cómo ajustar los tamaños de botones de arranque?
- Cómo hacer un botón de nivel de bloque en Bootstrap?
- Cómo crear botones de estado activos en bootstrap?
- Cómo crear botones de estado deshabilitados en bootstrap?
Cómo hacer botones en bootstrap?
El bootstrap "btn"La clase se utiliza para crear botones. Para agregar botones de estilo, puede usar el "btn"Clase con la clase de color, como"btn-tucés"Para crear un botón verde.
En HTML, el "","", y ""Etiquetas con el tipo"botón"Se utilizan para crear botones. El "btn"La clase tiene un estilo predefinido que agregan un estilo básico a los elementos del botón.
Para un concepto claro, consulte el ejemplo a continuación.
Ejemplo
En el archivo HTML, siga los pasos para crear botones usando diferentes etiquetas:
- Agregar "" y ""Elementos y asignarlos"btn" y "btn-primario"Clases.
- Entonces, agregue un ""Etiqueta con el tipo"botón". Asignarlo el "btn" y "btn-tucés"Para el estilo como los dos primeros botones como azul, y el tercero como verde:
Abierto
Producción
Cómo crear botones de esquema en Bootstrap?
Para agregar contornos del botón, el bootstrap "btn-outline-*Se usa la clase. En su sintaxis, "*"Aquí representa el color del contorno. Por ejemplo, "BTN-Outline-amenger"Coloca el esquema rojo", "BTN-Outline-Primary"Establece el esquema azul, y más.
Analice el código que se proporciona a continuación:
Se puede observar que el "Próximo"El botón tiene un esquema azul, el"Cancelar"Botón con contorno rojo y el"ÉxitoEl botón ha sido diseñado con un esquema verde:
Cómo ajustar los tamaños de botones de arranque?
Algunas clases de arranque se aplican para ajustar los tamaños de los botones, como:
- "btn-lgLa clase se aplica para crear un botón grande. Esta clase puede aumentar el tamaño de la fuente y el relleno.
- "btn-md"Crea un botón de tamaño mediano.
- "btn-sm"Crea un pequeño botón.
Ejemplo
Ahora, crearemos tres botones con diferentes tamaños y nombres de autoexplicación:
Producción
Cómo hacer un botón de nivel de bloque en Bootstrap?
Los botones a nivel de bloque son los que contienen el tamaño del ancho completo. Para crear los botones de nivel de bloque, el "bloqueo de btn"La clase se utiliza de la siguiente manera
Producción
Cómo crear botones de estado activos en bootstrap?
Los botones de estado activo se refieren a los botones que están actualmente activos. Estos botones son ligeramente más oscuros de lo normal. Para crear tales botones, el bootstrap "activoSe utiliza la clase.
Ejemplo
El siguiente código crea dos botones. El primero está en el estado normal, mientras que el otro se aplica con el "activo" clase:
Producción
Cómo crear botones de estado deshabilitados en bootstrap?
Los botones de estado deshabilitados se refieren a los botones que no se pueden recluir e inutilizables. En Bootstrap, el "desactivadoLa clase se utiliza para crear un botón de estado deshabilitado. El "desactivadoEl atributo también se puede utilizar para este propósito.
Ejemplo
Mira el ejemplo proporcionado a continuación:
- El primer botón no está en un estado discapacitado.
- El segundo utiliza el "desactivadoClase para crear un botón de estado deshabilitado.
- El tercero usa el "desactivado" atributo:
Producción
Hemos cubierto diferentes aspectos relacionados con los botones de arranque y su estilo en CSS.
Conclusión
El "btnLa clase se utiliza para crear botones de arranque con un diseño simple. Para crear botones de color y contorno, el "btn-*" y "btn-outline-*"Las clases se utilizan donde"*"Simboliza cualquier clase de color. Por ejemplo, "BTN-Warning"Crea un botón amarillo", "BTN-WARNINGURA DE LÍNEA"Crea un botón de descorración amarillo, y muchos más. Para hacer que los botones sean activos o deshabilitados, se aplican las clases "activas" y "deshabilitadas", respectivamente. Esta publicación proporcionó una guía completa en los botones de arranque.