174

Dopo aver scaricato un pacchetto completo di bootstrap 3 da http://getbootstrap.com , ho notato che esiste un file css separato per il tema. Come utilizzarlo? Spiega per favore?

Ho incluso bootstrap-theme.cssnel mio progetto bootstrap esistente, ma non c'è differenza nell'output.

html css twitter-bootstrap-3

— Yuvaraj P
fonte

382

Dopo aver scaricato Bootstrap 3.x, otterrai bootstrap.css e bootstrap-theme.css (per non parlare delle versioni minimizzate di questi file che sono anche presenti).

bootstrap.css

bootstrap.cssè completamente in stile e pronto per l'uso, se tale è il tuo desiderio. Forse è un po 'semplice ma è pronto ed è lì.

Non è necessario utilizzare bootstrap-theme.css se non lo si desidera e le cose andranno bene.

bootstrap-theme.css

bootstrap-theme.cssè proprio quello che il nome del file sta cercando di suggerire: è un tema per bootstrap che viene considerato in modo creativo "IL tema bootstrap". Il nome del file confonde un po 'le cose poiché alla base è bootstrap.cssgià stato applicato lo stile e io, per esempio, considererei quegli stili come predefiniti. Ma questa conclusione è apparentemente errata alla luce delle cose dette nella sezione degli esempi della documentazione Bootstrap riguardo a questo bootstrap-theme.cssfile:

"Carica il tema Bootstrap opzionale per un'esperienza visivamente migliorata."

La citazione sopra è disponibile qui http://getbootstrap.com/getting-started/#examples su una miniatura che rimanda a questa pagina di esempio http://getbootstrap.com/examples/theme/ . L'idea è che bootstrap-theme.cssè IL tema di bootstrap ed è facoltativa.

Temi su BootSwatch.com

Informazioni sui temi su BootSwatch.com: questi temi non sono implementati come bootstrap-theme.css. I temi BootSwatch sono versioni modificate dell'originale bootstrap.css. Quindi, NON dovresti assolutamente usare un tema di BootSwatch AND il bootstrap-theme.cssfile allo stesso tempo.

Tema personalizzato

Informazioni sul proprio tema personalizzato: è possibile scegliere di modificare bootstrap-theme.cssdurante la creazione del proprio tema. Ciò potrebbe rendere più semplice apportare modifiche allo stile senza rompere accidentalmente nessuna delle caratteristiche di Bootstrap incorporate.

— witttness
fonte

68

Questa dovrebbe essere la risposta selezionata.

— Patrick Cullen,

11

Avviso su Bootswatch.com è molto utile. Grazie.

— Daniel Kmak,

@Daniel ... ma dovrebbe essere refactored secondo la nuova direzione twbs / bootstrap per avere una caratteristica stabile e coerente per i suoi clienti tematici

— Luca G. Soave,

Il file bootstrap-theme.css non è più una sostituzione, ad esempio bootstrap.css ti imposta in modo tale da poter usare bootstrap con tutto lo stile pertinente. Bootstrap-theme.css è lì per sovrascrivere gli stili SENZA modificare il file css di base. L'importanza qui è che se esegui l'aggiornamento a bootstrap XX sostituisci il file css di base e non dovrai preoccuparti di perdere tutte le personalizzazioni. Potrebbe essere necessario modificare il file del tema, ma questo è molto meno preoccupante. Forse quello che stavi dicendo.

— Jacques,

2

La cosa più confusa al riguardo è che se si utilizza la funzione Personalizzazione sul sito bootstrap ( getbootstrap.com/customize ), inserisce le personalizzazioni in bootstrap.css e non nel file del tema. Quella pagina non contiene anche opzioni per modificare qualsiasi cosa relativa a The Theme (tm). Per quanto posso vedere, il file del tema aggiunge solo un sacco di sfumature e ombre dappertutto e fa ben poco altro.

— Elenco C.

90

Per un esempio degli stili CSS, dai un'occhiata a: http://getbootstrap.com/examples/theme/

~~Se vuoi vedere come appare l'esempio senza il file bootstrap-theme.css, apri gli strumenti di sviluppo del browser ed elimina il collegamento dalla <head> dell'esempio e poi puoi confrontarlo.~~

~~So che questa è una vecchia domanda, ma l'ha pubblicata nel caso in cui qualcuno stia cercando un esempio di come sembro.~~

Aggiornare

bootstrap.css = framework css principale (griglie, stili di base, ecc.)

bootstrap-theme.css= stile esteso (pulsanti 3D, sfumature ecc.). Questo file è facoltativo e non influisce affatto sulla funzionalità di bootstrap, ma migliora solo l'aspetto.

Aggiornamento 2

Con il rilascio di v3.2.0 Bootstrap ha aggiunto un'opzione per visualizzare il tema css nelle pagine del documento. Se vai su una delle pagine del documento ( css , componenti , javascript ) dovresti vedere un link "Anteprima tema" nella parte inferiore del navigatore laterale che puoi usare per attivare e disattivare il tema css.

— joshhunt
fonte

Grazie per il follewing su questo come la tua risposta ha avuto più senso. Mi chiedevo, lo so, avrei semplicemente sostituito il contenuto di bootstrap.csscon un tema di Bootswatch.com come dice il sito e potrei ancora usare bootstrap-theme.cssanche con un tema Bottswatch?

— Rifadito il Paladino il

3

bootstrap.css = framework css principale (griglie, stili di base, ecc.) bootstrap-theme.css = stile esteso (pulsanti 3D ecc.) Non l'ho mai usato ma l'ho appena visto e Bootswatch sembra modificare il file bootstrap.css per soddisfare le proprie esigenze. Quindi per usarlo tutto ciò che devi fare è scaricare il file bootstrap.css da Bootswatch e usarlo. Non usare bootstrap-theme.css in quanto probabilmente entrerà in conflitto con il CSS di Bootswatch.

— joshhunt,

Grazie amico, apprezza la risposta! Questo è quello che ho notato anche che non ce l'ho fatta qui. Senza modifiche non riesci a usare bootstrap-themecon Bootswatch. Ha fatto un casino del mio sito comunque.

— Rifatto Paladino

72

In primo luogo, bootstrap-theme.cssnon è altro che equivalente dello stile Bootstrap 2.x in Bootstrap 3. Se vuoi davvero usarlo, aggiungilo SOLO con bootstrap.css(anche la versione ridotta funzionerà).

— androphone
fonte

4

Ricorda che se usi file css di temi bootstrap di terze parti, è meglio commentare il bootstrap-theme.css ufficiale.

— Cheung,

163

Come mai questa è una risposta accettata. Non è nemmeno una risposta. Scusate. Tutto ciò che dice è qual è l'equivalente del file in Bootstrap 2 e chiunque non abbia familiarità con Bootstrap 2 dovrà ora cercare un'altra risposta per scoprire cosa fa questo file.

— Mario Awad,

4

Ma è tutto, quello che voglio sapere.

— Uladzimir,

9

Concordo con @MarioAwad, questa non è una risposta. È anche confuso perché pensavo che fosse solo il supporto del vecchio css Bootstrap, che è solo parzialmente vero.

— Yannis Dran,

1

In BS 3.2, incluso il tema CSS, cambia davvero l'aspetto aggiungendo sfumature 3D ai pulsanti e ad altre cose. Vedi la risposta di joshhunt per i dettagli.

— RajV,

31

Bootstrap-theme.css è il file CSS aggiuntivo, che è facoltativo da usare. Fornisce effetti 3D sui pulsanti e su alcuni altri elementi.

— Jowen
fonte

14

Come affermato da altri, il nome file bootstrap-theme.css è molto confuso. Avrei scelto qualcosa come bootstrap-3d.css o bootstrap-fancy.css che sarebbe più descrittivo di ciò che effettivamente fa. Quello che il mondo vede come un "tema Bootstrap" è una cosa che puoi ottenere da BootSwatch che è una bestia totalmente diversa.

Detto questo, gli effetti sono piuttosto belli: sfumature, ombre e così via. Sfortunatamente questo file causerà il caos sui temi BootSwatch, quindi ho deciso di scavare in quello che sarebbe necessario per farlo funzionare bene con loro.

DI MENO

Bootstrap-theme.css viene generato dal file theme.less nell'origine Bootstrap. Gli elementi interessati sono (a partire da Bootstrap v3.2.0):

Elementi della lista
pulsanti
immagini
menu a discesa
Navbars
avvisi
Indicatori di stato
Elenco dei gruppi
pannelli
Wells

Il file theme.less dipende da:

@import "variables.less";
@import "mixins.less";

Il codice utilizza colori definiti in variabili.less in diversi punti, ad esempio:

// Give the progress background some depth
.progress {
    #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}

Questo è il motivo per cui bootstrap-theme.css incasina totalmente i temi di BootSwatch. La buona notizia è che i temi BootSwatch sono creati anche da file variabili.less, quindi puoi semplicemente creare un bootstrap-theme.css per il tuo tema BootSwatch.

Costruire bootstrap-theme.css

Il modo giusto per farlo è aggiornare il processo di creazione del tema, ma qui ecco il modo rapido e sporco. Sostituisci il file variabili.less nel sorgente Bootstrap con quello del tuo tema Bootswatch e costruiscilo e voilà hai un file bootstrap-theme.css per il tuo tema Bootswatch.

Costruire Bootstrap stesso

La creazione di Bootstrap può sembrare scoraggiante, ma in realtà è molto semplice:

Scarica il codice sorgente Bootstrap
Scarica e installa NodeJS
Aprire un prompt dei comandi e accedere alla cartella di origine bootstrap. Digita "npm install". Ciò aggiungerà la cartella "node_modules" al progetto e scaricherà tutte le cose del Nodo necessarie.
Installa grunt a livello globale (l'opzione -g) digitando "npm install -g grunt-cli"
Rinominare la cartella "dist" in "dist-orig", quindi ricostruirla digitando "grunt dist". Ora controlla che ci sia una nuova cartella "dist" che contiene tutto ciò che ti serve per usare la tua build Bootstrap personalizzata.

Fatto. Vedi, è stato facile, no?

— Questo ragazzo
fonte

2

So che questo post è un po 'vecchio ma ...

Come ha sottolineato "l'arguzia".

Informazioni sul proprio tema personalizzato È possibile scegliere di modificare bootstrap-theme.css durante la creazione del proprio tema. Ciò potrebbe rendere più semplice apportare modifiche allo stile senza rompere accidentalmente nessuna delle caratteristiche di Bootstrap incorporate.

Lo vedo come Bootstrap ha visto negli anni che tutti vogliono qualcosa di un po 'diverso dagli stili di base. Mentre potresti modificare bootstrap.css, ciò potrebbe spezzare le cose e potrebbe rendere l'aggiornamento a una versione più recente un vero e proprio dispendio di tempo. Scaricare da un sito "a tema" significa che devi aspettare se quel creatore aggiorna quel tema, grande se a volte, giusto?

Alcuni creano il proprio file "custom.css" e va bene, ma se si utilizza "bootstrap-theme.css" è già stato creato un sacco di roba e ciò consente di ruotare il proprio tema più velocemente "senza" interrompere il nucleo di bootstrap css. Io per primo non mi piacciono i pulsanti e le sfumature 3D per la maggior parte del tempo, quindi cambiali usando bootstrap-theme.css. Aggiungi margini o riempimento, modifica il raggio dei pulsanti e così via ...

— user1946683
fonte

Come usare bootstrap-theme.css con bootstrap 3?