Bootstrap mit eigenen stylesheets modifizieren

[ben_mvsn]

Hallo, hier eine Anfängerfrage zu den Themen Bootstrap bzw. CSS: Ich möchte die Stilvorlagen von Bootstrap umdesignen, will aber nicht die Originale umschreiben, sondern eine neue css-Datei anlegen, in der ich die Änderungen anlege - Stichwort Vererbung. Nur hab ich leider keine Ahnung, wie man die Dateien miteinander verbindet, funktionstechnisch löst oder was auch immer.

 

[leveler]

Ich möchte die Stilvorlagen von Bootstrap umdesignen, will aber nicht die Originale umschreiben, sondern eine neue css-Datei anlegen, in der ich die Änderungen anlege - Stichwort Vererbung

Mach DIr eine Kopie von der css-Datei, die Du modifizieren willst, modifiziere sie und ändere den Verweis im entsprechenden html/php-Dokument zur geänderten css-Datei.

Nur hab ich leider keine Ahnung, wie man die Dateien miteinander verbindet,

Ich hab mir bootstrap jetzt nicht extra heruntergeladen, aber folgende Zeile ist für das Einbinden der css-Datein auf der offiziellen bootstrap-Seite verantwortlich:

<!-- Bootstrap core CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">

Hier kannst Du also Änderungen vornehmen.

 

[ben_mvsn]

Danke für die schnelle Antwort. Wenn ich dich richtig verstanden habe, soll ich eine Kopie der bootstrap.css bearbeiten und anschließend die link rel in der index, oder was auch immer, ändern. Aber dass ist ja nicht der Workflow den ich meine. Ich möchte die Site in Echtzeit bearbeiten und das Ergebnis direkt auf dem Browser angucken können. Deshalb würde ich gerne eine zusätzliche css anhängen, die zum Schluss abgerufen wird und die Standardwerte von Bootstrap überschreibt - Geht das?

 

[leveler]

Naja, das könnte ich ja auch so,

Ähmm, wenn Du weisst, wie`s geht, warum fragst Du es dann an? Naja, evt hab ich das missverstanden.
Xampp und Firebug kennst Du?

 

[ben_mvsn]

Ich habe meinen letzten Beitrag editiert, damit wir nicht aneinander vorbeireden.

Hier mal ein Beispiel: Kennst du zufällig das Baukastensystem von Shopware? Das ist quasi ein Pyramidensystem. Du kannst, wenn du Lust hast, direkt an die core herangehen mit dem Risiko, dass dein Shop nicht mehr funktioniert, sobald du irgendein Coding zerwurstest, du kannst aber auch einfach eigene Stylesheets in einer neuen Datei anlegen und arbeitest nur auf dieser einen neuen css, die alle anderen überschreibt. Du kannst auf die Art deine eigenes Theme ein und ausschalten wie du willst, oder löschen, und jederzeit zu den Standardwerten zurückkehren. ¿Me comprendes?

 

[noltehans]

Hi ben_mvsn,

CSS-Dateien werden werden linear von oben nach unten abgearbeitet.
Öffne also einfach deine bootstrap.css und schreib unter der letzten Zeile deine Änderungen.

 

[Aelfry]

du kannst aber auch einfach eigene Stylesheets in einer neuen Datei anlegen und arbeitest nur auf dieser einen neuen css, die alle anderen überschreibt. Du kannst auf die Art deine eigenes Theme ein und ausschalten wie du willst, oder löschen, und jederzeit zu den Standardwerten zurückkehren. ¿Me comprendes?

Beim Vorschlag von leveler kannst du doch auch jederzeit zum original Zustand zurückkehren.
Du arbeitest ja mit einer Kopie der bootstrap Datei und kannst bei Bedarf einfach wieder die original Datei einbinden.
Aber wie dem auch sei, alternativ kannst du natürlich auch einfach nach der bootstrap css eine eigene Datei einbinden und überschreibst in dieser die gewünschten Klassen,IDs, etc.

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

 

[ben_mvsn]

Danke für die intensive Hilfe, aber ich bin inzwischen fündig geworden. Was ich gemeint hatte, war das:

@import url('bootstrap/css/bootstrap.min.css');

Damit eröffne ich meine style.css und überschreibe die jeweiligen Zeilen im Original.
Ich hätte Stichwort: Child-CSS schreiben sollen.

 

[noltehans]

Und mit dem "@import url" hast du auch gleich eine Serveranfrage mehr.

 

[MainAngler]

Vielleicht lesen das ja noch andere...

CSS-Dateien werden werden linear von oben nach unten abgearbeitet.
Öffne also einfach deine bootstrap.css und schreib unter der letzten Zeile deine Änderungen.

Mach das auf gar keinen Fall!
So kannst du Bootstrap nie updaten, weil du dann die Original-Dateien mit überschreiben würdest.

Leg dir lieber eine CSS-Datei an und füge diese als letzte CSS-Datei im head-Bereich ein, denn wie richtig erwähnt, werden CSS-Dateien von oben nach unten gelesen und die letzte - welche dann deine Änderungen enthält - ist der "Sieger" und überschreibt die vorhandenen Anweisungen.

Auch würde ich keine Kopie einer der Bootstrap.css-Dateien nehmen und darin Änderungen vornehmen, selbst wenn du sie umbenennst, denn du hast darin dann wieder unnötigen Code der die Seite beim Laden bremst!

 

[noltehans]

So kannst du Bootstrap nie updaten, weil du dann die Original-Dateien mit überschreiben würdest.

Lieber MainAngler,

selbstverständlich sollte man seine Änderungen vorher per Copy and Paste in die neue Bootstrap transferieren.
Dauer ca. 5 Sekunden.

Oder man lädt für immer eine zweite CSS-Datei mit.

 

[fakerer]

also ich sehe das so wie mainAngler,
einfach eine myBootstrapp.css anlegen und gut,
wenn man meint das man ladezeit sparen will kann man ja dann seine ganzen css datein in eine zusammenfügen
oder per less oder sass includen und dann eine einzige compilieren, oder was cachen,

verstehe ach nicht warum ich da die originale kopieren sollte