Anzeige

Bootstrap mit eigenen stylesheets modifizieren

Bootstrap mit eigenen stylesheets modifizieren | PSD-Tutorials.de

Erstellt von ben_mvsn, 06.03.2014.

  1. ben_mvsn

    ben_mvsn Noch nicht viel geschrieben

    Dabei seit:
    25.12.2010
    Beiträge:
    16
    Bootstrap mit eigenen stylesheets modifizieren
    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.
     
    #1      
  2. leveler

    leveler 00110100 00110010

    Dabei seit:
    23.06.2008
    Beiträge:
    2.614
    Bootstrap mit eigenen stylesheets modifizieren
    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.

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

    ben_mvsn Noch nicht viel geschrieben

    Dabei seit:
    25.12.2010
    Beiträge:
    16
    Bootstrap mit eigenen stylesheets modifizieren
    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: 06.03.2014
    #3      
  4. leveler

    leveler 00110100 00110010

    Dabei seit:
    23.06.2008
    Beiträge:
    2.614
    Bootstrap mit eigenen stylesheets modifizieren
    Ähmm, wenn Du weisst, wie`s geht, warum fragst Du es dann an? Naja, evt hab ich das missverstanden.
    Xampp und Firebug kennst Du?
     
    #4      
  5. ben_mvsn

    ben_mvsn Noch nicht viel geschrieben

    Dabei seit:
    25.12.2010
    Beiträge:
    16
    Bootstrap mit eigenen stylesheets modifizieren
    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: 06.03.2014
    #5      
  6. noltehans

    noltehans Aktives Mitglied

    Dabei seit:
    02.06.2009
    Beiträge:
    541
    Geschlecht:
    männlich
    Bootstrap mit eigenen stylesheets modifizieren
    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.
     
    #6      
  7. Aelfry

    Aelfry Web Developer

    Dabei seit:
    17.02.2007
    Beiträge:
    794
    Geschlecht:
    männlich
    Ort:
    Mönchengladbach
    Software:
    CC, SublimeText, Git, Sass, Gulp
    Kameratyp:
    Canon EOS 60D
    Bootstrap mit eigenen stylesheets modifizieren
    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:
    1. <link href="css/bootstrap.min.css" rel="stylesheet">
    2. <link href="css/deine_datei.css" rel="stylesheet">
     
    #7      
  8. ben_mvsn

    ben_mvsn Noch nicht viel geschrieben

    Dabei seit:
    25.12.2010
    Beiträge:
    16
    Bootstrap mit eigenen stylesheets modifizieren
    Danke für die intensive Hilfe, aber ich bin inzwischen fündig geworden. Was ich gemeint hatte, war das:
    Code (Text):
    1. @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.
     
    #8      
  9. noltehans

    noltehans Aktives Mitglied

    Dabei seit:
    02.06.2009
    Beiträge:
    541
    Geschlecht:
    männlich
    Bootstrap mit eigenen stylesheets modifizieren
    Und mit dem "@import url" hast du auch gleich eine Serveranfrage mehr.
     
    #9      
  10. MainAngler

    MainAngler Excel (SVERWEIS...)

    Dabei seit:
    15.02.2006
    Beiträge:
    918
    Bootstrap mit eigenen stylesheets modifizieren
    Vielleicht lesen das ja noch andere...
    :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!
     
    #10      
    MyBad und Myhar gefällt das.
  11. noltehans

    noltehans Aktives Mitglied

    Dabei seit:
    02.06.2009
    Beiträge:
    541
    Geschlecht:
    männlich
    Bootstrap mit eigenen stylesheets modifizieren
    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.
     
    #11      
  12. fakerer

    fakerer Aktives Mitglied

    Dabei seit:
    03.08.2008
    Beiträge:
    804
    Geschlecht:
    männlich
    Bootstrap mit eigenen stylesheets modifizieren
    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
     
    #12      
x
×
×