Personalizzazione del modello CSS Bootstrap

Sto appena iniziando con Bootstrap da Twitter e mi chiedo quali siano le "migliori pratiche" per la personalizzazione. Voglio sviluppare un sistema che sfrutti tutta la potenza di un template css (Bootstrap o altro), sia completamente (e facilmente) modificabile, sia sostenibile (cioè - quando la prossima versione di Bootstrap verrà rilasciata da Twitter non lo so Non devo ricominciare da capo.

Ad esempio, voglio aggiungere immagini di sfondo alla navigazione in alto. Sembra che ci siano 3 modi per farlo:

1. Modifica le classi .topbar in bootstrap.css. Non mi piace particolarmente perché avrò molti elementi .topbar e non voglio necessariamente modificarli tutti allo stesso modo.
2. Crea nuove classi con le mie immagini di sfondo e applica entrambi gli stili (il nuovo e il bootstrap al mio elemento). Ciò può creare conflitti di stile, che potrebbero essere evitati spogliando la classe .topbar in classi separate e quindi utilizzando solo i pezzi che non sono calpestati dalla mia classe personalizzata. Anche in questo caso richiede più lavoro di quanto penso dovrebbe essere necessario e sebbene sia flessibile, non mi consentirà di aggiornare facilmente bootstrap.css quando Twitter rilascerà la prossima puntata.
3. Usa le variabili in .LESS per ottenere la personalizzazione. All'improvviso questo sembra un buon approccio, ma non avendo usato. MENO ho dubbi sulla compilazione di CSS sul client e sulla sostenibilità del codice.

Anche se sto usando Bootstrap, questa domanda può essere generalizzata a qualsiasi modello CSS.

Grazie in anticipo per il contributo.

La cosa migliore da fare è.

1. fork twitter-bootstrap da github e clona localmente.

stanno cambiando molto velocemente la libreria / framework (divergono internamente. Alcuni preferiscono la libreria, direi che è un framework, perché cambia il tuo layout dal momento in cui lo carichi sulla tua pagina). Bene ... il fork / clonazione ti permetterà di recuperare facilmente le nuove versioni imminenti.

2. Non modificare il file bootstrap.css

Ti complicherà la vita quando avrai bisogno di aggiornare bootstrap (e dovrai farlo).

3. Crea il tuo file css e sovrascrivi ogni volta che vuoi roba bootstrap originale

se impostano una barra superiore con, diciamo, color: black;ma la vuoi bianca, crea un nuovo selettore molto specifico per questa barra superiore e usa questa regola sulla barra superiore specifica. Per un tavolo, ad esempio, sarebbe <table class="zebra-striped mycustomclass">. Se dichiari il tuo file css dopo bootstrap.css, questo sovrascriverà quello che vuoi.

Aggiornamento 2019 - Bootstrap 4

Sto rivisitando questa domanda di personalizzazione di Bootstrap per 4.x, che ora utilizza SASS invece di LESS. In generale, ci sono 2 modi per personalizzare Bootstrap ...

1. Sostituzioni CSS semplici

Un modo per personalizzare è semplicemente usare CSS per sostituire Bootstrap CSS. Per la manutenibilità, le personalizzazioni CSS vengono inserite in un custom.cssfile separato , in modo che bootstrap.cssrimanga invariato. Il riferimento a quanto custom.csssegue dopo il bootstrap.cssper il funzionamento degli override ...

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

Basta aggiungere le modifiche necessarie nel CSS personalizzato. Per esempio...

    /* remove rounding from cards, buttons and inputs */
    .card, .btn, .form-control {
        border-radius: 0;
    }

Prima ( bootstrap.css)

Dopo (con custom.css)

Quando si effettuano le personalizzazioni, è necessario comprendere la specificità CSS . Sostituisce la custom.cssnecessità di utilizzare selettori specifici come il file bootstrap.css.

Nota che non è necessario utilizzarlo !importantnel CSS personalizzato, a meno che tu non stia sovrascrivendo una delle classi di Bootstrap Utility . La specificità CSS funziona sempre per una classe CSS per sovrascrivere un'altra.

2. Personalizza utilizzando SASS

Se hai familiarità con SASS (e dovresti usare questo metodo), puoi personalizzare Bootstrap con il tuo custom.scss. C'è una sezione nei documenti di Bootstrap che lo spiega, tuttavia i documenti non spiegano come utilizzare le variabili esistenti nel tuo file custom.scss. Ad esempio, cambiamo il colore di sfondo del corpo in #eeeeeee cambiamo / sovrascriviamo il colore primarycontestuale blu nella $purplevariabile di Bootstrap ...

/* custom.scss */    

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

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

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

/* use a variable to override primary */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

Funziona anche per creare nuove classi personalizzate . Ad esempio, qui aggiungo purpleai colori del tema che crea tutto il CSS per btn-purple, text-purple, bg-purple, alert-purple, ecc ...

/* add a new purple custom color */
$theme-colors: (
  purple: $purple
);

https://www.codeply.com/go/7XonykXFvP

Con SASS devi @importare bootstrap dopo le personalizzazioni per farle funzionare! Una volta che il SASS è stato compilato in CSS ( questo deve essere fatto usando un compilatore SASS node-sass, gulp-sass, npm webpack, ecc. ), Il CSS risultante è il Bootstrap personalizzato. Se non hai familiarità con SASS, puoi personalizzare Bootstrap utilizzando uno strumento come questo generatore di temi che ho creato.

Demo Bootstrap personalizzato (SASS)

Nota: a differenza di 3.x, Bootstrap 4.x non offre uno strumento di personalizzazione ufficiale . Tuttavia, puoi scaricare solo la griglia CSS o utilizzare un altro strumento di build personalizzato 4.x per ricostruire Bootstrap 4 CSS come desideri.

Correlati:
Come estendere / modificare (personalizzare) Bootstrap 4 con SASS
Come cambiare il colore primario del bootstrap?
Come creare un nuovo set di stili di colore in Bootstrap 4 con sass
Come personalizzare Bootstrap

Penso che il modo ufficialmente preferito sia ora quello di usare Less, e sovrascrivere dinamicamente bootstrap.css (usando less.js), o ricompilare bootstrap.css (usando Node o il compilatore Less).

Dai documenti di Bootstrap , ecco come sovrascrivere dinamicamente gli stili bootstrap.css:

Scarica l'ultimo Less.js e includi il percorso (e Bootstrap) nel file <head>.

 <link rel="stylesheet/less" href="/path/to/bootstrap.less">
    <script src="/path/to/less.js"></script>

Per ricompilare i file .less, salvali e ricarica la pagina. Less.js li compila e li memorizza nella memoria locale.

O se preferisci compilare staticamente un nuovo bootstrap.css con i tuoi stili personalizzati (per ambienti di produzione):

Installa lo strumento della riga di comando LESS tramite Node ed esegui il seguente comando:

$ lessc ./less/bootstrap.less > bootstrap.css

Dalla risposta di Pabluez a dicembre, ora c'è un modo migliore per personalizzare Bootstrap.

Usa: Bootswatch per generare il tuo bootstrap.css

Bootswatch crea il normale Bootstrap di Twitter dall'ultima versione (qualunque cosa installi nella directory bootstrap), ma importa anche le tue personalizzazioni. Ciò semplifica l'utilizzo dell'ultima versione di Bootstrap, mantenendo il CSS personalizzato, senza dover modificare nulla del tuo HTML. Puoi semplicemente influenzare i file boostrap.css.

Puoi usare il modello bootstrap da

http://www.initializr.com/

che include tutti i file bootstrap .less. Puoi quindi modificare le variabili / aggiornare i file less che desideri e compilerà automaticamente il css. Durante la distribuzione, compilare il file less in css.

L'opzione migliore secondo me è compilare un file LESS personalizzato che includa bootstrap.less, un file variable.less personalizzato e le tue regole:

1. Clona bootstrap nella tua cartella principale: git clone https://github.com/twbs/bootstrap.git
2. Rinominalo "bootstrap"
3. Crea un file package.json: https://gist.github.com/jide/8440609
4. Crea un Gruntfile.js: https://gist.github.com/jide/8440502
5. Crea una cartella "less"
6. Copia bootstrap / less / variables.less nella cartella "less"
7. Cambia il percorso del carattere: @icon-font-path: "../bootstrap/fonts/";
8. Crea un file style.less personalizzato nella cartella "less" che importa bootstrap.less e il tuo file custom variables.less: https://gist.github.com/jide/8440619
9. Correre npm install
10. Correre grunt watch

Ora puoi modificare le variabili come preferisci, sovrascrivere le regole di bootstrap nel tuo file style.less personalizzato e se un giorno vuoi aggiornare bootstrap, puoi sostituire l'intera cartella bootstrap!

EDIT: ho creato un boilerplate Bootstrap utilizzando questa tecnica: https://github.com/jide/bootstrap-boilerplate

Recentemente ho scritto un post su come l'ho fatto a Udacity negli ultimi due anni. Questo metodo ha significato che siamo stati in grado di aggiornare Bootstrap ogni volta che volevamo senza conflitti di fusione, lavoro buttato via, ecc. Ecc.

Il post va più in profondità con esempi, ma l'idea di base è:

• Conserva una copia incontaminata di bootstrap e sovrascriverla esternamente.
• Modifica un file (variabili di bootstrap.less) per includere le tue variabili.
• Rendi il file del tuo sito @include bootstrap.less e poi i tuoi override.

Ciò significa usare MENO e compilarlo in CSS prima di inviarlo al client (LESS lato client se pignolo, e generalmente lo evito) ma è ESTREMAMENTE buono per la manutenibilità / aggiornabilità, e ottenere una compilazione MENO è davvero molto facile . Il codice GitHub collegato ha un esempio che utilizza grunt, ma ci sono molti modi per ottenerlo, anche le GUI se questo è il tuo genere.

Usando questa soluzione, il tuo problema di esempio sarebbe simile a:

• Cambia il colore della barra di navigazione con @ navbar-inverse-bg nelle tue variabili.less (non di bootstrap)
• Aggiungi i tuoi stili di barra di navigazione al tuo bootstrap_overrides.less, sovrascrivendo tutto ciò di cui hai bisogno mentre procedi.
• Felicità.

Quando arriva il momento di aggiornare il tuo bootstrap, devi solo sostituire la copia di bootstrap incontaminata e tutto funzionerà ancora (se il bootstrap apporta modifiche sostanziali, dovrai aggiornare le tue sostituzioni, ma dovresti farlo comunque)

Il post del blog con la procedura dettagliata è qui .

Un esempio di codice su GitHub è qui .

Usa MENO con Bootstrap ...

Ecco i documenti Bootstrap su come usare LESS

(si sono spostati rispetto alle risposte precedenti)