¿Cómo puedo anular los estilos CSS de Bootstrap?

234

Necesito modificar bootstrap.csspara que se ajuste a mi sitio web. Siento que es mejor crear un custom.cssarchivo separado en lugar de modificarlo bootstrap.cssdirectamente, una razón es que debería bootstrap.cssrecibir una actualización, sufriré al tratar de volver a incluir todas mis modificaciones. Sacrificaré algo de tiempo de carga para estos estilos, pero es insignificante para los pocos estilos que estoy anulando.

¿Cómo anulo bootstrap.csspara eliminar el estilo de un ancla / clase? Por ejemplo, si quiero eliminar todas las reglas de estilo para legend:

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

Simplemente puedo eliminar todo eso bootstrap.css, pero si mi comprensión sobre las mejores prácticas para anular CSS es correcta, ¿qué debo hacer en su lugar?

Para ser claros, quiero eliminar todos esos estilos de leyenda y usar los valores CSS de los padres. Entonces, combinando la respuesta de Pranav, ¿haré lo siguiente?

legend {
  display: inherit !important;
  width: inherit !important;
  padding: inherit !important;
  margin-bottom: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  border: inherit !important;
  border-bottom: inherit !important;
}

(Esperaba que hubiera una manera de hacer algo como lo siguiente :)

legend {
  clear: all;
}
html  css  twitter-bootstrap 
— Alex
fuente

Respuestas:

491

Usar !importantno es una buena opción, ya que lo más probable es que desee anular sus propios estilos en el futuro. Eso nos deja con las prioridades de CSS.

Básicamente, cada selector tiene su propio 'peso' numérico:

  • 100 puntos por identificaciones
  • 10 puntos por clases y pseudo-clases
  • 1 punto para selectores de etiquetas y pseudoelementos
  • Nota: Si el elemento tiene un estilo en línea que gana automáticamente (1000 puntos)

Entre dos estilos de selector, el navegador siempre elegirá el que tenga más peso. El orden de sus hojas de estilo solo es importante cuando las prioridades son uniformes; es por eso que no es fácil anular Bootstrap.

Su opción es inspeccionar las fuentes de Bootstrap, averiguar cómo se define exactamente un estilo específico y copiar ese selector para que su elemento tenga la misma prioridad. Pero perdemos toda la dulzura de Bootstrap en el proceso.

La forma más fácil de superar esto es asignar una ID arbitraria adicional a uno de los elementos raíz de su página, de esta manera: <body id="bootstrap-overrides">

De esta manera, puede prefijar cualquier selector CSS con su ID, agregar instantáneamente 100 puntos de peso al elemento y anular las definiciones de Bootstrap:

/* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
  line-height: 1;
  color: inherit;
}

/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
  line-height: 1;
  color: inherit;
}

/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
  line-height: 1;
  color: inherit;
}
— contrabandistaFlynn
fuente
Como las ID solo se pueden usar una vez, ¿por qué no hacer #bootstrap-overridesuna clase?
— chharvey
2
@chharvey: porque terminarías teniendo que calcular mejor. si fuera una clase en este ejemplo, sería el prio 11 y si la definición de css fuera después de bootstrap.css, estaríamos listos para comenzar. Sin embargo, esto sería bastante cercano y establecerlo como una identificación que impulse el prio a lo grande, no tenemos que preocuparnos por calcular el prio y probar si es correcto. más fácil con una identificación si desea sobrescribir definitivamente el valor predeterminado.
— Hogan
Acabo de alegrarme el día. Sé esto y todavía me quedo atascado tratando de descubrir por qué mis estilos no se interpretan.
— Hogan
3
¿Los puntos que mencionó (100 para id's, 10 para clases / pseudo clases, 1 para selectores de etiquetas / pseudo elementos) son literales, o simplemente inventó esos valores para este ejemplo?
— Kyle Vassella
2
Su explicación es buena, tiene sentido como una forma de explicárselo a alguien nuevo en CSS, pero es engañosa. El nombre correcto de lo que mencionó es css, specificityque define el "peso" de cada selector css. Aquí algunos detalles más al respecto: css-tricks.com/specifics-on-css-specificity/…
— Adriano
85

En la sección principal de su html, coloque su custom.css debajo de bootstrap.css.

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

Luego, en custom.css, debe usar exactamente el mismo selector para el elemento que desea anular. En el caso de legendque simplemente permanezca legenden su custom.css porque bootstrap no tiene ningún selector más específico.

legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

Pero en caso de que, h1por ejemplo, tenga que ocuparse de los selectores más específicos como .jumbotron h1porque

h1 {
  line-height: 2;
  color: #f00;
}

no anulará

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

Aquí hay una explicación útil de la especificidad de los selectores CSS que debe comprender para saber exactamente qué reglas de estilo se aplicarán a un elemento. http://css-tricks.com/specifics-on-css-specificity/

Todo lo demás es solo cuestión de copiar / pegar y editar estilos.

— Markus Kottländer
fuente
28

No debería afectar mucho el tiempo de carga ya que está anulando partes de la hoja de estilo base.

Estas son algunas de las mejores prácticas que personalmente sigo:

  1. Cargue siempre CSS personalizado después del archivo CSS base (no responde).
  2. Evite usar !importantsi es posible. Eso puede anular algunos estilos importantes de los archivos CSS básicos.
  3. Cargue siempre bootstrap-responsive.css después de custom.css si no desea perder consultas de medios. - DEBE SEGUIR
  4. Prefiere modificar las propiedades requeridas (no todas).
— Rahul Patil
fuente
10
dado que bootstrap-responsive.cssya no existe, ¿esto sigue siendo cierto o ya no es relevante?
— Shaun Wilson el
20

Enlace su archivo custom.css como la última entrada debajo de bootstrap.css. Las definiciones de estilo Custom.css anularán bootstrap.css

HTML

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

Copie todas las definiciones de estilo de leyenda en custom.css y realice cambios en él (como margin-bottom: 5px; - Esto anulará margin-bottom: 20px;)

— Paramasivan
fuente
Sí, eso ya lo hice. Lo siento, mi pregunta no estaba clara. Mi pregunta fue preguntar qué hacer en custom.css para anular los estilos de bootstrap.min.css.
— Alex
¿Qué sucede si también estoy usando bootstrap-theme.min.css?
— Quasaur
Trabajó para mí, incluso con min css
— mimi
5

Para restablecer los estilos definidos legenden bootstrap, puede hacer lo siguiente en su archivo css:

legend {
  all: unset;
}

Ref: https://css-tricks.com/almanac/properties/a/all/

La propiedad all en CSS restablece todas las propiedades del elemento seleccionado, excepto la dirección y las propiedades unicode-bidi que controlan la dirección del texto.

Los valores posibles son: initial, inherityunset .

Nota al margen: la clearpropiedad se utiliza en relación con float( https://css-tricks.com/almanac/properties/c/clear/ )

— Vivek Athalye
fuente
3

Si está planeando hacer cambios bastante grandes, podría ser una buena idea hacerlos directamente en bootstrap y reconstruirlos. Luego, podría reducir la cantidad de datos cargados.

Consulte Bootstrap en GitHub para obtener la guía de compilación.

— Victor Häggqvist
fuente
Dependiendo del alcance de la personalización requerida, esta podría ser la opción más simple. Por ejemplo, cambiar los colores de cualquier tema requeriría tantas anulaciones que preferiría optar por un cambio de plantilla y una creación personalizada.
— David Kirkland
@alex Bump fuentes y reconstrucción?
— Victor Häggqvist
3

Ver https://bootstrap.themes.guide/how-to-customize-bootstrap.html

  1. Para anulaciones CSS simples, puede agregar un custom.css debajo de bootstrap.css

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

  2. Para cambios más extensos, SASS es el método recomendado.

    • crea tu propio custom.scss
    • importar Bootstrap después de los cambios en custom.scss

    • Por ejemplo, cambiemos el color de fondo del cuerpo a gris claro #eeeeee, y cambiemos el color contextual primario azul a la variable $ purple de Bootstrap ...

      /* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* or, use an existing variable */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
— Konyak
fuente
2

Un poco tarde, pero lo que hice es agregar una clase a la raíz y divluego extender cada elemento de arranque en mi hoja de estilo personalizada:

.overrides .list-group-item {
    border-radius: 0px;
}
.overrides .some-elements-from-bootstrap { 
    /* styles here */
}
<div class="container-fluid overrides">
    <div class="row">
        <div class="col-sm-4" style="background-color: red">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">Hey</a></li>
                <li class="list-group-item"><a href="#">I was doing</a></li>
                <li class="list-group-item"><a href="#">Just fine</a></li>
                <li class="list-group-item"><a href="#">Until I met you</a></li>
                <li class="list-group-item"><a href="#">I drink too much</a></li>
                <li class="list-group-item"><a href="#">And that's an issue</a></li>
                <li class="list-group-item"><a href="#">But I'm okay</a></li>
            </ul>
        </div>
        <div class="col-sm-8" style="background-color: blue">
            right
        </div>
    </div>
</div>
— mr5
fuente
-1
  1. Inspeccione el botón de destino en la consola.
  2. Vaya a la pestaña de elementos, luego desplace el mouse sobre el código y asegúrese de encontrar la identificación o clase predeterminada utilizada por el bootstrap.
  3. Use jQuery / javascript para sobrescribir el estilo / texto llamando a la función.

Ver este ejemplo:

  $(document).ready(function(){
      $(".dropdown-toggle").css({ 
        "color": "#212529",
        "background-color": "#ffc107",
        "border-color": "#ffc107"
       });
      $(".multiselect-selected-text").text('Select Tags');
  });
— Anand Chaudhary
fuente
-1

Descubrí que (bootstrap 4) pone tu propio CSS detrás bootstrap.css y .js es la mejor solución.

Encuentre el elemento que desea cambiar (inspeccione el elemento) y use exactamente la misma declaración, luego se anulará.

Me tomó un poco de tiempo resolver esto.

— Enrique
fuente
-3

Dar identificación a la leyenda y aplicar css. Como agregar id hola a la leyenda (), el css es el siguiente:

#legend  legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}
— Amar Gaur
fuente
-9

Use jquery css en lugar de css. . . jquery tiene prioridad que bootstrap css ...

p.ej

$(document).ready(function(){
        $(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"});    


);

 instead of

.mnu
{

font-family:myfnt;
font-size:20px;
color:#006699;

}
— Ajeet Sankhwal
fuente
66
El HTML se debe usar para proporcionar estructura, el CSS se debe usar para proporcionar estilo y el Javascript (incluido jQuery) solo se debe usar para proporcionar interactividad. Usar jQuery para anular estilos es contrario a los principios de una buena arquitectura y será extremadamente confuso para cualquiera que intente trabajar en el código dentro de 6 meses.
— Stephen R. Smith
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.