html - span - tooltip bootstrap

La mejor manera de anular bootstrap css

Question

Necesito modificar bootstrap.css para que se ajuste a mi sitio web. Siento que es mejor crear un archivo custom.css separado en lugar de modificar bootstrap.css directamente, una de las razones es que bootstrap.css debe obtener una actualización, sufriré intentando volver a incluir todas mis modificaciones. Sacrificaré un poco de tiempo de carga para cargar, pero es insignificante para los pocos estilos que anulo.

Esta línea de pensamiento es correcta, ¿verdad? Si no, mi pregunta a continuación puede ser irrelevante.

Si es así, ¿cómo anulo bootstrap.css para que elimine el estilo de un ancla / clase? Por ejemplo, si deseo eliminar todas las reglas de diseño de la 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;
}

Puedo simplemente eliminar todo eso en bootstrap.css, pero si mi entendimiento sobre las mejores prácticas sobre la anulación de CSS es correcto, ¿qué debo hacer en su lugar?

EDITAR:

Lo siento, déjame mejorar mi pregunta. 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 haya una manera de hacer algo como lo siguiente :)

legend {
  clear: all;
}

Answer 1

Descubrí que (bootrap 4) poner tu onw css detrás de bootstrap.css y .js es la mejor solución.

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

Me tomó un poco de tiempo resolver esto.

Answer 2

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 tienes que usar exactamente el mismo selector para el elemento que deseas sobrescribir. En el caso de la legend , solo se mantiene como legend en 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 el caso de h1 por ejemplo, tienes que ocuparte de selectores más específicos como .jumbotron h1 porque

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 de 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 una cuestión de copiar / pegar y editar estilos.

Answer 3

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 la leyenda en custom.css y realice cambios en ella (como margin-bottom: 5px; - Esto sobreescribirá margin-bottom: 20px;)

Answer 4

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. Siempre cargue css personalizado después del archivo base css (no receptivo).
2. Evite usar! Importante si es posible. Eso puede anular algunos estilos importantes de la base.
3. Siempre carga bootstrap-responsive.css después de custom.css si no quiere perder consultas de medios .. - DEBE SEGUIR
4. Prefiere modificar las propiedades requeridas (no todas) ...

Espero que ya tengas la respuesta ...

Nosotros en nuestra organización seguimos estas mejores prácticas para lograr la mejor personalización.

Answer 5

Si está planeando hacer cambios bastante grandes, puede ser una buena idea hacer que se arranquen directamente y lo reconstruyan. Entonces podrías reducir la cantidad de datos cargados. Consulte Bootstrap en GitHub para obtener la guía de compilación.

Answer 6

Un poco tarde, pero lo que hice fue agregar una clase al div raíz, luego extendí todos los elementos del bootstrap en mi hoja de estilo personalizada:

CSS

.overrides .list-group-item {
  border-radius: 0px;
}
.overrides .some-elements-from-bootstrap { ... }

HTML

<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>

Answer 7

Usar !important no es una buena opción, ya que es muy probable 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 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements

Entre dos estilos de selector, el navegador siempre elegirá el que tenga más peso. El orden de las hojas de estilo solo importa cuando las prioridades son uniformes; por eso 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 en cierto modo, perdemos toda la dulzura de Bootstrap en el proceso.

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

De esta manera, puede simplemente ponerle un prefijo a cualquier selector de CSS con su ID, agregando instantáneamente 100 puntos de peso al elemento y anulando la definición 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;
}

Answer 8

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;

}