Anular Bootstrap CSS
Este artículo trata sobre un famoso marco de interfaz de usuario de CSS conocido como Bootstrap. Discutiremos el proceso de anular Bootstrap CSS con nuestro estilo personalizado.
Descripción general de Bootstrap
Se puede crear un sitio web receptivo de manera más rápida y sencilla con Bootstrap CSS que solo con CSS simple.
Esto se debe a que este conjunto de herramientas de código abierto ofrece plantillas y componentes prediseñados, lo que le permite crear rápida y fácilmente diseños con componentes de diseño cruciales como botones, formularios y tablas de Bootstrap.
Pero el procedimiento no es tan sencillo como simplemente copiar y pegar estas piezas de código reutilizable. Primero, debe personalizar las plantillas y los componentes de Bootstrap para confirmar que el sitio web represente con precisión su marca distintiva.
Por ejemplo, es posible que prefiera un color personalizado a una de las diez clases de utilidad de color de Bootstrap. Como alternativa, es posible que desee modificar los puntos de interrupción del diseño de la cuadrícula en Bootstrap.
También puede incluir clases personalizadas como la clase .btn-cstm para botones únicos. Aunque no es recomendable, puede editar directamente los archivos principales de Bootstrap para realizar ajustes en su sitio web.
Modificar Bootstrap CSS
Las modificaciones directas a la hoja de estilo predeterminada de Bootstrap serán un desafío. Hace que sea más difícil recordar los cambios y hace que la actualización a una versión renovada de Bootstrap sea mucho más difícil.
Dado que debe reemplazar los archivos principales al actualizar, se perderán todas las personalizaciones. Sin embargo, es posible realizar cambios sin modificar el código fuente de Bootstrap.
Veamos el procedimiento con más detalle.
Anular el estilo Bootstrap
Agregue otra hoja de estilo externa si su sitio web necesita agregar un estilo personalizado que no sea Bootstrap. Aplicará estos estilos anulados a sus clases y selectores de ID en función de cómo cargue las dos hojas de estilos:
- El que tiene Bootstrap.
- El que tiene su hoja de estilo personalizada.
Por ejemplo, hay una clase en Bootstrap para botones, es decir, btn-primary. Para esa clase, el tamaño de fuente establecido por Bootstrap CSS es 16px. Podemos anular esta clase en nuestra hoja de estilo personalizada si necesitamos cambiar el tamaño de fuente a 21px.
El primer paso es hacer una hoja de estilo personalizada, digamos customStyles.css. La hoja de estilo se verá así:
.btn-primary{
font-size:21px;
}
Puede incluir esta hoja en su página HTML después de incluir el CSS de Bootstrap de esta manera:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="customStyling.css">
</head>
<body>
<h1>Custom Bootstrap demo</h1>
<button class="btn-primary">Demo</button>
</body>
</html>
Puede ver en el resultado que las propiedades distintas de font-size se heredan del CSS predeterminado de Bootstrap, y solo la propiedad font-size se actualiza a un nuevo valor.
Es uno de los enfoques más fáciles para anular Bootstrap CSS y agregar su estilo personalizado a su sitio web.