Bootstrap 3 Grundkurs

Vorgegebene CSS "überschreiben"

Testen Sie unsere 2005 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
CSS-Anpassungen sind regelmäßig notwendig. Das ist aber kein Problem, wenn Sie sich eine eigene CSS-Datei anlegen, so dass bestehende Werte einfach überschrieben werden können.
04:38

Transkript

Bei allen Vorzügen die ein vorgefertigtes CSS liefern kann, gibt es immer wieder Situationen wo es Ihnen nicht erspart bleibt, dass Sie es selber Hand anlegen müssen. Ein kleines Beispiel haben wir hier. Nämlich, wenn Sie genau schauen, dann liegen diese beiden nicht auf einer Ebene. Und das liegt daran, dass wir hier unterschiedliche Überschriften verwenden mit unterschiedlichen Eigenschaften, die von Ihnen begleitet werden. Nun ist es aber überhaupt kein Problem, dass Sie in der eigenen CSS Datei, die ich schon angefangen habe, zu befüllen, das vorgegebene CSS eben überschreiben können. Und falls Sie sich überlegen müssen mit welchem Namen Sie etwas ansprechen, können wir ja mal versuchen ob's da Möglichkeiten gäbe drauf zu reagieren. In dem Fall weiß ich z. B. schon, dass es wahrscheinlich hier an dieser Überschrift liegen wird und werde deswegen der Überschrift mal eine Klasse mitgeben. Und zwar die Klasse heißt neben, weil das ganze Site, also neben dem Hauptteil liegt. Ich bestätige das ganze mit Speichern. Und schaue mir jetzt noch einmal im Firefox an, womit ich es hier eigentlich zu tun bekomme. Der Firefox, genauso wie der Chrome, bringen, wenn man mit der rechten Maustaste über ein Objekt fährt, die Möglichkeit mit, zu sagen Element untersuchen. Und das tun wir hier und wir sehen also, dass das h4 von sich aus ein margin top von 10 Pixel mitbringt. Würde ich das mal wegtun, merken wir schon, a es wandert in die andere Richtung. Es könnte also sein, dass wir da jetzt noch ein bisschen Adjustierung Arbeit einfach leisten müssen. Um uns das Leben leichter zu machen, habe ich hier jetzt noch zusätzlich bei Firefox die Möglichkeit, dass ich hier was übernehmen kann. Und hier sage ich eindeutigen Selektor kopieren und mit diesem zusätzlichen Wissen wandere ich jetzt in meine myCSS und füge ihn hier mit der rechten Maustaste Paste wieder ein. Den Selektor habe ich jetzt, brauche ich nur noch versuchen Eigenschaften dafür zu definieren. Und ich glaube mit einem margin-top von, sagen wir jetzt mal, 20 Pixel, könnte ich zu einem ganz guten Ergebnis kommen. Ich speicher meinen Eintrag. Gehe zurück in die Index und lasse mir das ganze anzeigen. Und tatsächlich im Unterschied zu vorher ist das, das entsprechende Stück runtergerutscht und ich konnte mit dem Überschreiben der CSS Datei auf diese Weise gleichzeitig mein Gesamtbild etwas anegenehmer adjustieren. Ähnlich verhält es sich mit jeder weiteren Form von Veränderung die Sie durchführen wollen. Wenn Sie sehen, dass Sie irgendwo Eigenartigkeiten entdecken, die Sie so nicht haben wollen, dann haben Sie die Möglichkeit, dass Sie eine Klasse vergeben, oder eine ID vergeben und dann diese ID tatsächlich ansprechen können und Veränderungen durchführen. Ansatzweise habe ich das einerseits schon gemacht, indem ich den Überschriften andere Farben mitgegeben habe, oder indem ich im Zusammenhang mit dem Branding einfach dafür gesorgt habe, dass diese Eigenschaften, die normalerweise mit einem Link mitkommen, nicht übernommen werden. Mit dieser Methode können Sie sämtliche CSS Einträge anpassen und zu Ihren Gunsten verändern. Das einzige wovon ich abraten würde, wäre, dass Sie direkt in dem Bootstrap eigenen Dateien schreiben, weil Sie dann wahrscheinlich über kurz oder lang eine sehr unübersichtliche Gesamtsituation bekämen. Das zweite was Sie auf jeden Fall noch bedenken sollten, ist die Positionierung Ihrer eigenen CSS Datei. Die muss nämlich, damit sie überschreibend wirken kann, natürlich an dritter Stelle liegen. D. h. ich habe hier die Bootstrap eigenen CSS Einträge und darunter setze ich meinen eigenen, denn die Befehle werden zeilenweise ausgelesen und damit überschreibt das Darunterlegende das Darüberlegende. Ein einfaches eben kaskadierendes Prinzip, dass Sie sich in der Weise zu Nutze machen können.

Bootstrap 3 Grundkurs

Lernen Sie, wie Sie über Bootstrap 3 mit dem Gridsystem - einem ausgeklügelten Spaltensystem – beliebige Gestaltungsmöglichkeiten schnell und flexibel umsetzen können.

2 Std. 14 min (25 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!