Ich habe den ganzen Tag nachgeforscht, da ich dachte, es würde sich lohnen, einige Zeit damit zu verbringen, bewährte Methoden zum Anpassen von Bootstrap zu erlernen .
Ich kann sehen, dass eine benutzerfreundliche Seite zum selektiven Anpassen von Elementen unter http://twitter.github.io/bootstrap/customize.html verfügbar ist, aber ich möchte mehr Kontrolle als diese haben, ohne die ursprünglichen Bootstrap-Quelldateien zu berühren.
Zunächst wollte ich testen, wie sich das Raster von 12 auf 16 Spalten ändert. Dazu habe ich meine eigene Datei ohne Variablen erstellt und @gridColumns hinzugefügt: 16; nur in diese Datei und importierte diese benutzerdefinierte weniger in bootstrap.less wie folgt.
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
**@import "../custom-variables.less"; //Override variables**
Dann habe ich mit WinLess die Datei bootstrap.less kompiliert, um eine neue Datei bootstrap.css mit überschriebenem Variablenimportaufruf zu erhalten, und die CSS mit der HTML-Datei verknüpft, aber das Raster ändert sich nicht in 16 Spalten.
Kann jemand bitte darauf hinweisen, was ich falsch mache?
quelle
Antworten:
Ich arbeite an einem ähnlichen Projekt, bei dem wir Bootstrap an einem Ort eines Drittanbieters haben und dann nur
mixins.less
und überschreibenvariables.less
. Das Muster, das wir hierfür verwenden, fügt drei Dateien hinzu und berührt den Bootstrap überhaupt nicht (so dass Sie leicht Ersatz ersetzen können):/style |- bootstrap-master/ | |- less/ | |- js/ | ... |- shared/ |- shared.less |- variables.less |- mixins.less
die Mixins-Datei
/* * /style/shared/mixins.less */ @import "../bootstrap-master/less/mixins.less"; // override any mixins (or add any of your third party mixins here)
die Variablendatei, in der Sie Gitter überschreiben würden
/* * /style/shared/variables.less */ @import "../bootstrap-master/less/variables.less"; @gridColumns: 16; // let's pretend this is your site-specific override
Die Datei, die tatsächlich importiert (oder an einen weniger Compiler weitergeleitet) wird:
/* * /style/shared/shared.less */ @import "variables.less"; @import "mixins.less"; @import "../bootstrap-master/less/grid.less"; //and any other bootstrap less files we need here
Wenn ich das mache, bekomme ich in meinem Setup eine CSS-Datei mit einigen seltsamen .span15-Werten (da ich nicht aktualisiert habe
@gridColumnWidth
oder@gridGutterWidth
aber die .row-fluid-Werte tatsächlich genau so funktionieren, wie Sie es erwarten würden, da sie ' neu berechnet durch einfache Division).Ich mag dieses Setup, weil ich
cd
in Bootstrap-Mastergit pull
einsteigen und neue Updates abrufen kann, ohne meine spezifischen Kludges zusammenführen zu müssen (es gibt mir auch einen guten Überblick darüber, was ich tatsächlich überschrieben habe).Die andere Sache ist, dass es sehr klar ist, dass shared.less nur grid.less verwendet (und nicht den gesamten Bootstrap). Dies ist beabsichtigt, da Sie in den meisten Fällen nicht den gesamten Bootstrap benötigen, sondern nur einige Teile davon, um loszulegen. Die meisten Dateien ohne Bootstrap sind zumindest insofern nett, als ihre einzigen harten Abhängigkeiten
shared.less
und sindmixins.less
Wenn dies immer noch nicht funktioniert, wird WinLess möglicherweise verwirrt
quelle
shared.less
wird kompiliert und Seiten werden direkt mit dieser Datei (oder in der Produktion mit ihrer kompilierten Ausgabe) verknüpft. Sie sollten niemals irgendwo anders Bootstrap einbinden müssen, obwohl Sie alle fehlenden Module einschließen müssen. Wenn Sie möchten, kann ich die Antwort aktualisieren, um dies klarer zu machen.Das Überschreiben von Variablen nach dem Importieren des Originals
bootstrap.less
funktioniert für mich hervorragend:@import "less/bootstrap.less"; @body-bg: red; @text-color: green; @link-color: blue;
Das Kompilieren der obigen WENIGER Quellausgaben gibt den richtig angepassten Bootstrap-CSS-Code aus.
Relevante Informationen: http://lesscss.org/features/#variables-feature-lazy-loading
quelle
@icon-font-path
) und alles funktioniert. Vielen Dank!Ein weiteres Beispiel, das jemandem helfen kann:
@import 'bootstrap/bootstrap/variables'; // Prgress bar @progress-bar-bg: #f5f5f5; @progress-bar-default-color: @gray-base; @import 'bootstrap/bootstrap';
quelle
Eine einfache Möglichkeit besteht darin, die Stile in Ihrem Stildokument mit demselben Namen zu überschreiben und als! Wichtig zu markieren.
quelle
!important
ist im Allgemeinen eine schreckliche Idee, aber das Überschreiben von Themenstilen!important
ist noch schlimmer.