Bootstrap es uno de los Marcos m s populares para el desarrollo de sitios web. Proporciona muchos estilos y componentes prefabricados que simplifican enormemente el proceso de creaci n de interfaces modernas y receptivas. Sin embargo, en algunos casos, es necesario cambiar estos estilos o agregar los suyos propios.
En este art culo, veremos varias formas de anular los estilos de Bootstrap para adaptarlo a sus necesidades. Hablaremos sobre las clases integradas de Bootstrap, las opciones para anularlas y tambi n sobre la creaci n de estilos personalizados que se aplicar n sobre Bootstrap.
Es importante darse cuenta de que al cambiar los estilos de Bootstrap, debe tener cuidado y ser consciente de las posibles consecuencias. La redefinici n innecesaria de estilos puede resultar en dificultades de compatibilidad y compatibilidad con las nuevas versiones del marco.
La primera forma de anular los estilos de Bootstrap es usar clases integradas y sus modificadores. Bootstrap proporciona muchas clases que se pueden aplicar a elementos HTML para cambiar su apariencia. Por ejemplo, las clases .BG son primary y.text-white se puede usar para cambiar el color de fondo y el color del texto.
- Cambiar estilos de dibujo grandes
- Cambiar el Tama o de fuente
- Cambiar el grosor del texto
- Aplicar sus estilos al texto
- Combinaci n de estilos
- C mo cambiar los estilos de anulaci n
- Ocultar elementos con clases
- Ejemplos de anulaci n de estilos
- 1. Cambiar el color de los enlaces
- 2. Cambiar el fondo de los botones
- 3. Cambiar el ancho de las columnas de la cuadr cula
- 4. Cambiar el Tama o del texto
- 5. Cambiar estilos de tabla
- Configuraci n de la sangr a de elementos
- C mo cambiar los estilos de sangr a
- Cambiar el color de fondo de los elementos
- Ejemplos de personalizaci n del color de fondo
- Cambiar la fuente del texto con herramientas de estilo
- Pregunta-respuesta
- Qu m todos puedo usar para anular estilos en Bootstrap?
- C mo puedo agregar mis propios estilos que tendr n prioridad sobre los estilos de Bootstrap?
- C mo cambiar la sangr a entre elementos en Bootstrap?
- Puedo usar mis propias Fuentes en Bootstrap?
- C mo puedo cambiar el Tama o de los botones en Bootstrap?
Cambiar estilos de dibujo grandes
Bootstrap proporciona muchas clases para cambiar los estilos de texto, incluido el cambio de Tama o de fuente y la aplicaci n de otras propiedades. En esta secci n, veremos c mo cambiar el Tama o de fuente y el grosor del texto en Bootstrap.
Cambiar el Tama o de fuente
Para cambiar el Tama o de fuente en Bootstrap, puede usar clases .fs es*, donde * es un d gito del 1 al 7. Por ejemplo, una clase .fs-4 establece el Tama o de fuente en 1.5 rem.
Ejemplo:
Este es un texto con un Tama o de fuente de 1.5 rem
Cambiar el grosor del texto
Para cambiar el grosor del texto en Bootstrap, puede usar clases .FW-bold para texto en negrita y .fw - normal para texto de grosor normal.
Ejemplo:
Es un texto en negrita
Este es el texto de espesor normal
Aplicar sus estilos al texto
Si necesita aplicar sus estilos al texto, puede agregar clases a los elementos correspondientes. Por ejemplo, para cambiar el color del texto, puede agregar una clase .text-primary.
Ejemplo:
Este es el texto con el estilo de color aplicado
Combinaci n de estilos
Puede combinar diferentes clases para lograr el efecto deseado. Por ejemplo, si desea crear texto de gran Tama o de fuente en negrita, puede aplicar clases .fs-4 y .fw-bold.
Ejemplo:
Este es un texto con un Tama o de fuente de 1.5 rem y un tipo de letra en negrita
Por lo tanto, Bootstrap le permite cambiar f cilmente los estilos de caracteres grandes en el texto. Puede usar diferentes clases para lograr el aspecto deseado del texto.
C mo cambiar los estilos de anulaci n
Al trabajar con Bootstrap, es posible que deba cambiar algunos estilos de anulaci n para adaptar el marco a sus necesidades. En esta secci n, veremos varias formas de hacerlo.
1. Usando clases de estilo propio: una forma f cil de cambiar los estilos de anulaci n es agregar una clase de estilo personalizado a los elementos correspondientes. Por ejemplo, si desea cambiar el color de fondo de un bot n, agregue su clase con estilo para cambiar el color de fondo.
.my-custom-class {
background-color: #ff0000;
}
2. Uso de la anulaci n de variables: Bootstrap proporciona la capacidad de anular algunas variables globales que afectan los estilos de anulaci n. Por ejemplo, si desea cambiar el color principal del marco, puede anular la variable "$primary" antes de cargar los estilos de Bootstrap.
$primary: #ff0000;
3. Uso de una hoja de estilo personalizada: si necesita cambiar una gran cantidad de estilos de anulaci n, puede crear su propia hoja de estilo y conectarla despu s de los estilos de Bootstrap. Su hoja de estilo tendr una prioridad m s alta y anular los estilos de Bootstrap.
Tenga en cuenta que al cambiar los estilos de anulaci n en Bootstrap, debe seguir las mejores pr cticas y evitar realizar cambios demasiado grandes que puedan romper la convenci n o la l gica del marco.
Ocultar elementos con clases
Hay varias clases en Bootstrap que le permiten ocultar elementos en una p gina web. Esto puede ser til cuando desea deshacerse temporalmente de algunos elementos u ocultarlos en ciertos dispositivos.
Estas son algunas de las clases b sicas que se pueden usar:
- .d-none: esta clase oculta el elemento por completo en todos los dispositivos.
- .d-sm-none: esta clase oculta el elemento en dispositivos con un Tama o de pantalla menor o igual a tablet ( 576px).
- .d-md-none: esta clase oculta un elemento en dispositivos con un Tama o de pantalla menor o igual a desktop ( 768px).
- .D-lg-none: esta clase oculta el elemento en dispositivos con un Tama o de pantalla menor o igual a large desktop ( 992px).
- .d-xl-none: esta clase oculta el elemento en dispositivos con un Tama o de pantalla menor o igual a extra large desktop ( 1200px).
Tambi n puede usar clases para ocultar elementos en dispositivos espec ficos:
- .D-sm-block: esta clase muestra el elemento solo en dispositivos con un Tama o de pantalla mayor que la tableta ( 576px).
- .d-md-block: esta clase solo muestra el elemento en dispositivos con un Tama o de pantalla mayor que desktop ( 768px).
- .D-lg-block: esta clase muestra el elemento solo en dispositivos con un Tama o de pantalla mayor que large desktop ( 992px).
- .d-xl-block: esta clase muestra el elemento solo en dispositivos con un Tama o de pantalla mayor que extra large desktop ( 1200px).
Por ejemplo, si desea ocultar un elemento solo en dispositivos m viles, puede aplicar una clase .d-lg-none:
Este texto solo ser visible en dispositivos m viles.
Esto ocultar el elemento en dispositivos con un Tama o de pantalla igual a large desktop y m s grande.
Tambi n tiene otras clases disponibles para administrar la visibilidad de los elementos de forma m s flexible en Bootstrap. salos para crear interfaces adaptables y f ciles de usar.
Ejemplos de anulaci n de estilos
A veces, es posible que deba cambiar los estilos de elementos de Bootstrap para que se ajusten mejor a sus necesidades y dise o. Aqu hay algunos ejemplos de c mo puede anular los estilos de Bootstrap:
1. Cambiar el color de los enlaces
. Por ejemplo:
Enlace con color azul2. Cambiar el fondo de los botones
. Por ejemplo:
Bot n con fondo azul3. Cambiar el ancho de las columnas de la cuadr cula
. Por ejemplo, para crear una columna que ocupe la mitad del ancho del contenedor:
Por la ma ana1 hasta
,
.display-2,
.display-3
Texto introductorio
.table-striped
. Por ejemplo:
T tulo 1
T tulo 2
Celda 1
- A menudo es necesario ajustar la sangr a de los elementos de la p gina web para mejorar la apariencia y la legibilidad del contenido. Bootstrap proporciona varias clases que le permiten administrar f cilmente la sangr a de elementos.
- /
- /
- /
- /
mb-3
- mb-4
- /
- /
- /
- /
ml-4
/
| mr-4 | - sangr a horizontal muy grande |
|---|---|
| mt-2 mb-4 | Adem s, Bootstrap proporciona clases para ajustar la sangr a externa e interna de los bloques .p-y .m-. Donde p es la abreviatura de padding y m es para margin. |
| Descripci n | / |
| sin sangr a externa o interna | / |
| peque as sangr as exteriores o interiores | / |
| sangr a media externa o interna | / |
p-4
/
m-4
sangr a externa o interna muy grande
Por ejemplo, aplicando una clase
p-2
- Al usar las clases de sangr a anteriores, puede ajustar f cilmente la sangr a de los elementos en su p gina web y ajustarlos para satisfacer sus necesidades.
- Bootstrap proporciona muchas clases para ajustar la sangr a de los elementos en una p gina web. Le permiten ajustar r pidamente el Tama o de la sangr a en las direcciones horizontal y vertical.
Para cambiar la sangr a en Bootstrap, se usan clases que tienen el prefijo mt - o mb -, donde m significa margen( sangr a) y t y b son top (superior) y bottom (inferior), respectivamente.
Por ejemplo:
| mt-3 | - establece la sangr a en la parte superior del elemento en el Tama o de 3 unidades (esta unidad depende del contexto); |
|---|---|
| - establece la sangr a de la parte inferior del elemento en el Tama o de 5 unidades. |
| Ejemplo de uso: |
HTML
- Ejemplo de texto con sangr a en la parte superior
- Ejemplo de texto con sangr a en la parte inferior
Ejemplo de texto con sangr a en la parte inferior
| Tambi n puede combinar clases para ajustar la sangr a en las direcciones vertical y horizontal: | mx-2 |
|---|---|
| my-4 |
| Ejemplo de uso: |
HTML
Resultado
Ejemplo de texto con sangr a izquierda y derecha
Ejemplo de texto con sangr a izquierda y derecha
- Ejemplo de texto con sangr a en la parte superior e inferior
- Ejemplo de texto con sangr a en la parte superior e inferior
- Por lo tanto, el uso de clases para ajustar la sangr a en Bootstrap permite la flexibilidad de cambiar el aspecto de los elementos en una p gina web y crear un dise o est tico.
- Cambiar el color de fondo de los elementos
- Una de las formas m s f ciles y efectivas de cambiar la apariencia de los elementos en un sitio que utiliza el marco Bootstrap es cambiar el color de fondo. En Bootstrap, hay varias clases que le permiten especificar el color de fondo de un elemento espec fico.
- Puede utilizar las siguientes clases para cambiar el color de fondo de un elemento:
- bg-primary: especifica el color de fondo principal;
- BG-secondary: establece el color de fondo secundario;
- BG-success: especifica el color de fondo que indica que la acci n se ha realizado correctamente;
- BG-danger: especifica el color de fondo que indica la ejecuci n incorrecta de una acci n;
BG-warning: especifica el color de fondo que indica la advertencia;
BG-info: especifica el color de fondo que indica la informaci n;
bg-light: establece el color de fondo claro;
BG-dark: establece el color de fondo oscuro;
BG-white: establece el color de fondo blanco;
BG-transparent: especifica el color de fondo transparente.
La aplicaci n de estas clases es bastante simple. Para usar una clase, debe agregarla a un elemento utilizando el atributo class. Por ejemplo:
Este es el texto con el color de fondo principal
Por lo tanto, la aplicaci n de la clase BG-primary al elemento p cambiar su fondo al color de fondo principal en Bootstrap.
Tambi n en Bootstrap hay una opci n para crear sus propias clases para establecer el color de fondo. Para hacer esto, puede usar las poderosas herramientas CSS que proporciona el marco.
Por ejemplo, para crear una clase BG-custom con un color de fondo verde, debe agregar el siguiente c digo a la hoja de estilo:
.bg-custom {
background-color: green;
- }
- Despu s de agregar esta clase al elemento p, el fondo ser de color verde:
- Este es el texto con el color de fondo verde
- Por lo tanto, al usar Bootstrap, puede cambiar f cilmente el color de fondo de los elementos utilizando clases predefinidas o creando las suyas propias.
- Ejemplos de personalizaci n del color de fondo
- Bootstrap ofrece varias clases para personalizar el color de fondo de los elementos:
- BG-primary: establece el color de fondo en el color principal del tema;
- bg-secondary: establece el color de fondo en el color secundario del tema;
BG-success: establece el color de fondo para acciones exitosas;
BG-warning: establece el color de fondo para las advertencias;
BG-danger: establece el color de fondo para situaciones peligrosas;
BG-info: establece el color de fondo para los mensajes de informaci n;
BG-light: establece el color de fondo claro;
bg-dark: establece el color de fondo oscuro;
Ejemplo de uso:
Este texto tendr el color de fondo principal
Este texto tendr un color de fondo para acciones exitosas
text-light: establece el color claro del texto;
Ejemplo de uso:
T tulo de la columna 1
T tulo de la columna 2Celda 1
Celda 2
Para cambiar la fuente, debe especificar el estilo apropiado para el elemento HTML deseado. Por ejemplo, para cambiar la fuente de un p rrafo, podemos utilizar la etiqueta
Este es un p rrafo con una fuente modificada
En un archivo de estilo CSS, se puede definir esta clase
.custom-font {
font-family: Arial, sans-serif;
Tambi n puede cambiar el Tama o y el dise o de la fuente. Por ejemplo, para hacer que el texto sea negrita, puede usar una etiqueta
Este texto es una fuente inclinada
Primer elemento de la lista
Segundo elemento de la lista
Tercer elemento de la lista
Para las tablas, tambi n puede anular el estilo de fuente. Por ejemplo:
T tulo 1
T tulo 2
Celda 1
Celda 2
Celda 3
Celda 4
En este caso, la tabla utilizar la fuente definida para la clase
.custom-font
.