Come posso sostituire gli stili CSS di Bootstrap?

234

Devo modificare bootstrap.cssper adattarmi al mio sito web. Sento che è meglio creare un custom.cssfile separato invece di modificarlo bootstrap.cssdirettamente, uno dei motivi è che dovrebbe bootstrap.cssottenere un aggiornamento, soffrirò cercando 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 sostituire in bootstrap.cssmodo da rimuovere lo stile di un'ancora / classe? Ad esempio, se voglio rimuovere tutte le regole di stile per 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 semplicemente eliminare tutto ciò bootstrap.css, ma se la mia comprensione delle migliori pratiche sulla sovrascrittura dei CSS è corretta, cosa dovrei fare invece?

Per essere chiari, voglio rimuovere tutti quegli stili di legenda e usare 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 che ci fosse un modo per fare qualcosa di simile al seguente :)

legend {
  clear: all;
}

html css twitter-bootstrap

— alex
fonte

491

L'uso !importantnon è una buona opzione, poiché molto probabilmente vorrai sovrascrivere 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 le classi e le pseudo-classi
1 punto per selettori di tag e pseudo-elementi
Nota: se l'elemento ha uno stile in linea che vince automaticamente (1000 punti)

Tra due stili di selezione il browser sceglierà sempre quello con più peso. L'ordine dei fogli di stile è importante solo quando le priorità sono pari, ecco perché non è facile ignorare Bootstrap.

La tua opzione è di ispezionare le fonti Bootstrap, scoprire come è definito esattamente uno stile specifico e copiare quel selettore in modo che il tuo elemento abbia la stessa priorità. Ma nel processo perdiamo tutta la dolcezza di Bootstrap.

Il modo più semplice per ovviare a questo è assegnare un ID arbitrario aggiuntivo a uno degli elementi radice nella tua pagina, come questo: <body id="bootstrap-overrides">

In questo modo, puoi semplicemente aggiungere un prefisso a qualsiasi selettore CSS con il tuo ID, aggiungendo istantaneamente 100 punti di peso all'elemento e sovrascrivendo 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;
}

— smugglerFlynn
fonte

poiché gli ID possono essere utilizzati solo una volta, perché non creare #bootstrap-overridesuna classe?

— Chharvey,

2

@chharvey: perché dovresti finire per calcolare meglio. se fosse una classe in questo esempio sarebbe prio 11 e se la definizione css fosse dopo bootstrap.css, allora saremmo pronti. Tuttavia, questo sarebbe abbastanza vicino e impostandolo come un ID che aumenta il tempo di prio, non dobbiamo preoccuparci di calcolare il prio e testare duramente se abbiamo sempre ragione. più facile con un ID se si desidera sovrascrivere definitivamente il valore predefinito.

— hogan,

ho appena fatto la mia giornata. lo so e rimango bloccato cercando di capire perché i miei stili non vengono interpretati.

— hogan,

3

I punti che hai citato (100 per gli ID, 10 per le classi / pseudo-classi, 1 per i selettori di tag / pseudo elementi) sono letterali o hai semplicemente inventato quei valori per questo esempio?

— Kyle Vassella,

2

La tua spiegazione è buona, ha senso come un modo per spiegarla a qualcuno di nuovo a CSS, ma è fuorviante. Il nome corretto per ciò che hai menzionato è css specificityche definisce il "peso" di ciascun selettore css. Ecco qualche dettaglio in più: css-tricks.com/specifics-on-css-specificity/…

— Adriano,

85

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

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

Quindi in custom.css devi usare lo stesso selettore esatto per l'elemento che vuoi sovrascrivere. In questo caso legendrimane solo legendnel tuo custom.css perché bootstrap non ha selettori più 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, h1ad esempio, devi prenderti cura dei selettori più specifici come .jumbotron h1perché

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

non sovrascriverà

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

Ecco un'utile spiegazione della specificità dei selettori CSS che devi capire per sapere esattamente quali regole di stile verranno applicate a un elemento. http://css-tricks.com/specifics-on-css-specificity/

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

— Markus Kottländer
fonte

28

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

Ecco alcune best practice che seguo personalmente:

Carica sempre CSS personalizzato dopo il file CSS di base (non reattivo).
Evitare l'uso !importantse possibile. Ciò può sovrascrivere alcuni stili importanti dai file CSS di base.
Caricare sempre bootstrap-responsive.css dopo custom.css se non si desidera perdere le query multimediali. - DEVE SEGUIRE
Preferisce modificare le proprietà richieste (non tutte).

— Rahul Patil
fonte

10

poiché bootstrap-responsive.cssnon esiste più, è ancora vero o non è più pertinente?

— Shaun Wilson,

20

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

html

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

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

— Paramasivan
fonte

Sì, l'ho già fatto. Mi dispiace che la mia domanda non sia chiara. La mia domanda era chiedermi cosa fare in custom.css per sovrascrivere gli stili da bootstrap.min.css.

— Alex,

E se sto usando anche bootstrap-theme.min.css?

— Quasaur

Ha funzionato per me, anche con min css

— mimi

5

Per ripristinare gli stili definiti legendin bootstrap, puoi fare quanto segue nel tuo file css:

legend {
  all: unset;
}

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

La proprietà all in CSS ripristina tutte le proprietà dell'elemento selezionato, tranne le proprietà direction e unicode-bidi che controllano la direzione del testo.

I valori possibili sono: initial, inherite unset.

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

— Vivek Athalye
fonte

3

Se stai pianificando di apportare modifiche piuttosto grandi, potrebbe essere una buona idea apportarle direttamente nel bootstrap stesso e ricostruirlo. Quindi, è possibile ridurre la quantità di dati caricati.

Fare riferimento a Bootstrap su GitHub per la guida allo sviluppo.

— Victor Häggqvist
fonte

A seconda dell'entità della personalizzazione richiesta, questa potrebbe essere l'opzione più semplice. Ad esempio, la modifica di qualsiasi colore del tema richiederebbe così tante sostituzioni che preferirei optare per una modifica del modello e una creazione personalizzata.

— David Kirkland,

@alex Bump fonti e ricostruzione?

— Victor Häggqvist,

3

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

Per semplici sostituzioni CSS, è possibile aggiungere un file custom.css sotto bootstrap.css

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

Per modifiche più estese, SASS è il metodo raccomandato.

crea il tuo custom.scss
importa Bootstrap dopo le modifiche in custom.scss

Ad esempio, cambiamo il colore di sfondo del corpo in #eeeeee grigio chiaro e cambiamo il colore contestuale primario blu nella variabile $ viola di 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
fonte

2

Un po 'tardi, ma quello che ho fatto è stato aggiungere una classe alla radice, divquindi estendere ogni elemento bootstrap nel mio foglio di stile personalizzato:

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

-1

Ispeziona il pulsante di destinazione sulla console.
Vai alla scheda elementi quindi passa il mouse sopra il codice e assicurati di trovare l'id o la classe predefinita utilizzata dal bootstrap.
Usa jQuery / javascript per sovrascrivere lo stile / il testo chiamando la funzione.

Vedi questo esempio:

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

— Anand Chaudhary
fonte

-1

Ho scoperto che (bootstrap 4) mettere il proprio CSS dietro bootstrap.csse .js è la soluzione migliore.

Trova l'elemento che desideri modificare (ispeziona elemento) e utilizza la stessa identica dichiarazione, quindi verrà sostituito.

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

— Henry
fonte

-3

Dai ID alla legenda e applica css. Come aggiungere ciao id alla legenda () il CSS è come segue:

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

-9

Usa jquery css invece di css. . . jquery ha la priorità di 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;

}

— Ajeet Sankhwal
fonte

6

L'HTML dovrebbe essere usato per fornire la struttura, il CSS dovrebbe essere usato per fornire lo stile e Javascript (incluso jQuery) dovrebbe essere usato solo per fornire l'interattività. L'uso di jQuery per sovrascrivere gli stili è contrario ai principi della buona architettura e sarà estremamente fonte di confusione per chiunque cerchi di lavorare sul codice tra 6 mesi.

— Stephen R. Smith,