Antworten auf deine Fragen:
Neues Thema erstellen

Bootstrap mit eigenen stylesheets modifizieren

ben_mvsn

Noch nicht viel geschrieben

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

00110100 00110010

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:
HTML:
<!-- Bootstrap core CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
Hier kannst Du also Änderungen vornehmen.
 
Zuletzt bearbeitet:

ben_mvsn

Noch nicht viel geschrieben

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?
 
Zuletzt bearbeitet:

ben_mvsn

Noch nicht viel geschrieben

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?
 
Zuletzt bearbeitet:

noltehans

Aktives Mitglied

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

Web Developer

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.

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

ben_mvsn

Noch nicht viel geschrieben

Danke für die intensive Hilfe, aber ich bin inzwischen fündig geworden. Was ich gemeint hatte, war das:
Code:
@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.
 

MainAngler

Excel (SVERWEIS...)

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.
:oops: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!
 

fakerer

Aktives Mitglied

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.633
Beiträge
1.538.446
Mitglieder
67.555
Neuestes Mitglied
scheflo
Oben