Come posso sovrascrivere gli stili CSS Bootstrap?

Devo modificare bootstrap.css per adattarlo al mio sito web. Ritengo sia preferibile creare un file custom.css separato invece di modificare direttamente bootstrap.css , una ragione per cui bootstrap.css dovrebbe ottenere un aggiornamento, custom.css tentativo di includere nuovamente tutte le mie modifiche. Sacrificherò un po ‘di tempo di caricamento per questi stili, ma è trascurabile per i pochi stili che sto scavalcando.

Come faccio a sovrascrivere bootstrap.css modo da rimuovere lo stile di un’ancora / class? Ad esempio, se voglio rimuovere tutte le regole di stile per 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; } 

Posso solo cancellare tutto ciò che succede in bootstrap.css , ma se la mia comprensione delle migliori pratiche sul CSS sovrascrivibile è corretta, cosa dovrei fare invece?

Per essere chiari, voglio rimuovere tutti quegli stili di legenda e utilizzare i valori CSS dei genitori. Quindi combinando la risposta di Pranav, farò quanto segue?

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

(Speravo ci fosse un modo per fare qualcosa come il seguente 🙂

 legend { clear: all; } 

L’uso di !important non è una buona opzione, poiché molto probabilmente vorrai sostituire i tuoi stili in futuro. Questo ci lascia con priorità CSS.

Fondamentalmente, ogni selettore ha il suo “peso” numerico:

  • 100 punti per gli ID
  • 10 punti per classi e pseudo-classi
  • 1 punto per selettori di tag e pseudo-elementi

Tra i due stili di selettore, il browser sceglierà sempre quello con più peso. L’ordine dei fogli di stile è importante solo quando le priorità sono pari: ecco perché non è semplice sovrascrivere Bootstrap.

L’opzione è di ispezionare le origini Bootstrap, scoprire come viene definito esattamente uno stile specifico e copiare quel selettore in modo che l’elemento abbia uguale priorità. Ma nel frattempo perdiamo tutta la dolcezza di Bootstrap.

Il modo più semplice per ovviare a questo è assegnare un ID arbitrario aggiuntivo a uno degli elementi di root nella tua pagina, in questo modo:

In questo modo, puoi semplicemente precedere qualsiasi selettore CSS con il tuo ID, aggiungere immediatamente 100 punti di peso all’elemento e ignorare le definizioni 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; } 

Nella sezione head del tuo html inserisci custom.css sotto bootstrap.css.

   

Quindi in custom.css devi usare lo stesso selettore per l’elemento che vuoi sovrascrivere. Nel caso della legend rimane semplicemente una legend nel tuo custom.css perché bootstrap non ha più selettori specifici.

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

Ma nel caso di h1 ad esempio, devi prenderti cura dei selettori più specifici come .jumbotron h1 perché

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

non sovrascriverà

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

Ecco una spiegazione utile della specificità dei selettori di CSS che è necessario capire per sapere esattamente quali regole di stile si applicano a un elemento. http://css-tricks.com/specifics-on-css-specificity/

Tutto il resto è solo questione di copia / incolla e modifica stili.

Non dovrebbe influire molto sul tempo di caricamento poiché si stanno sovrascrivendo le parti del foglio di stile di base.

Ecco alcune best practice che seguo personalmente:

  1. Carica sempre CSS personalizzati dopo il file CSS di base (non reattivo).
  2. Evitare di usare !important se ansible. Ciò può ignorare alcuni stili importanti dai file CSS di base.
  3. Carica sempre bootstrap-responsive.css dopo custom.css se non vuoi perdere le query multimediali. – DEVE SEGUIRE
  4. Preferisco modificare le proprietà richieste (non tutte).

Collega il tuo file custom.css come ultima voce sotto il file bootstrap.css. Le definizioni di stile Custom.css sovrascriveranno bootstrap.css

html

   

Copia tutte le definizioni di stile della legenda in custom.css e apporta le modifiche in esso (come margin-bottom: 5px; – Questo scavalcherà margin-bottom: 20px;)

Se stai pianificando di apportare modifiche piuttosto grandi, potrebbe essere una buona idea renderli direttamente bootstrap self self e ricostruirlo. Quindi è ansible ridurre il mount di dati caricati. Si prega di fare riferimento a Bootstrap su GitHub per la guida allo sviluppo.

Un po ‘tardi ma quello che ho fatto è che ho aggiunto una class al div root quindi estende tutti gli elementi bootstrap nel mio foglio di stile personalizzato:

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

Per reimpostare gli stili definiti per la legend in bootstrap, puoi seguire il seguente nel tuo file css:

 legend { all: unset; } 

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

La proprietà all in CSS reimposta tutte le proprietà dell’elemento selezionato, ad eccezione delle proprietà direction e unicode-bidi che controllano la direzione del testo.

I valori possibili sono: initial , inherit e unset .

Nota a margine: la proprietà clear viene utilizzata in relazione al float ( https://css-tricks.com/almanac/properties/c/clear/ )

Ho scoperto che (bootrap 4) mettere i tuoi onw css dietro bootstrap.css e .js è la soluzione migliore.

Trova l’object che desideri modificare (ispeziona elemento) e usa la stessa identica dichiarazione, quindi eseguirà l’override.

Mi ci è voluto un po ‘di tempo per capirlo.

Dai un ID alla legenda e applica i CSS. Come aggiungere id ciao a legend () il css è come follw:

 #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; } 

Usa jquery css invece di css. . . jquery ha la priorità rispetto al bootstrap css …

per esempio

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