CSS-Helferlein

Bootstrap kommt mit einer großen Anzahl an kleinen Helferlein CSS-Deklarationen, deren Aufgabe darin besteht, mit den Weg zu meiner eigenen CSS-Datei zu ersparen. Das heißt, ich kann auf bestehende Klassen zurückgreifen, die so prinzipielle Einstellungsmöglichkeiten wie margin oder padding für mich dann quasi übernehmen können. Ich habe hier ein Beispiel, und zwar wenn ich hier auf diesen Button klicke und mir dann meinen kollabierten Inhalt anzeigen lassen möchte, dann merke ich, dass ich dazu wenig Abstand hinauf zu meinem Ankerelement habe. Und natürlich könnte ich jetzt in meine eigene CSS-Datei gehen und dort eine entsprechende Klasse wählen oder ich greife auf eine bestehende Klasse zurück und kann das Ganze einfach innerhalb von meiner HTML-Datei klären. Das heißt, ich muss jetzt zu meiner Karte gehen, bei der es um den Berg geht, und da habe ich jetzt meine Klasse collapse klappe2. Und wenn ich jetzt möchte, dass die ein bisschen Luft nach oben bekommt, so kann ich p sagen für padding, Bindestrich, dann t für top, und jetzt muss ich noch eine Größenangabe machen. Ich möchte, dass sie eine Zeilenhöhe Abstand hat, also ein rem. Und mit Strg+S speichere ich das, erneuere mir die Seite. Und wenn ich jetzt aufklappen lasse, merke ich, dass ich hier diesen nötigen Abstand habe. Das ist ja praktisch, weil wie gesagt Sie haben gemerkt, ich muss nicht den Umweg über eine CSS-Klasse machen. Diese CSS-Klasse ist im Großen und Ganzen schon so weit bereit, dass ich sie einfach für meine Zwecke einsetzen kann. Und dies gilt für margin genauso wie für padding. Und das Vorgehen ist immer gleich: m für margin, p für padding, dann für welche Dimensionen das Ganze gedacht ist und mit welcher Größenordnung. Damit aber nicht genug, kann ich auch noch andere Details über diese kleinen Klassen regeln, zum Beispiel das Erscheinungsbild der Schrift. Ich habe jetzt also bei meinen Karten überall eine Überschrift der vierten Ebene und eben eine Klasse mit card-title. Wenn ich jetzt aber der Meinung bin, dass diese Klasse mir etwas zu wenig Körper an die Schrift gibt und nicht die Schrift etwas fetter haben möchte, so kann ich auf eine Klasse zurückgreifen, die mit font beginnt, weil es sich um font handelt. Mit einem Bindestrich sage ich, welche Eigenschaft von font ich haben möchte, in dem Fall weight, und dann brauche ich noch einen Wert, und das ist in meinem Fall bold. Das heißt, ich müsste jetzt nachher den Wald fett gedruckt sehen. Und das Ganze kann ich nicht damit fett machen, sondern das ginge auch mit diesem italic, was für das Schrägstellen von Schrift geht. Es ist wieder eine von den Font-Eigenschaften, das heißt, die Klasse heißt auch font und italic für dieses Schräggestellte. Sehen wir uns das Ganze mal an, ob das so funktioniert, wie ich Ihnen das erzähle. Ja, das tut es. Hier haben wir jetzt einen etwas fetteren Wald, und hier haben wir schräggestellte Blumen oder beziehungsweise eine schräggestellte Blume. Ich kann aber nicht nur mit dem Schriftschnitt arbeiten. Ich könnte genauso mit der Schriftfarbe arbeiten. Da ist zwar der Rahmen etwas beschränkt, weil wir sollten uns auf die Farbbezeichnungen beschränken, die Bootstrap ja schon innen wohnend hat. Das heißt, das sind diese fünf, sechs Farben, die einer bestimmten Signalwirkung zugeordnet werden. Das heißt, wenn ich möchte, dass diese Überschrift Berg zum Beispiel in diesem Blau erscheint, was mit der Bezeichnung Info verbunden ist, dann brauche ich eigentlich nur noch meiner Überschrift hier sagen, dass die Textfarbe die Farbe info sein soll, also text-info sollte meinen Berg blau werden lassen. Wir schauen es uns wieder an, und es funktioniert. Und dies geht nicht nur mit der Schrift, sondern ich kann auch den Hintergrund dementsprechend einfärben. Wenn ich also den Hintergrund dieser letzten Karte hier in diesem Orange haben möchte, was mit der Bezeichnung Warning versehen ist, so brauche ich nur dieser letzten Karte mit pg-warning sagen dass es jetzt eben diese orange Farbe annehmen soll, die eben mit warning signalisiert wird. Schauen wir es uns an. Tatsächlich, der Hintergrund ist jetzt orange von dieser Karte, nicht besonders reizvoll, aber effektiv, wenn ich Ihnen da was zeigen möchte. Eine weitere Möglichkeit, die Ihnen vielleicht sehr hilfreich sein wird, ist die, dass ich neben dem, dass ich Texte von ihrer Ausrichtung her ebenfalls mit einer solchen Klasse versehen kann, gibt es eine Klasse, die nennt sich pull. Und mit pull können Sie das regeln, was Sie vielleicht bisher unter normalen Umständen mit floats geregelt haben. Und in unserem Beispiel möchte ich hier eben in der Navigation es so haben, dass das Branding, also das Wort Bootstrap weiter auf der linken Seite bleibt, während die eigentliche Navigation auf die rechte Seite wandert. Und dazu muss ich jetzt erst mal meine Navigation suchen gehen und da dann eben unterscheiden. Hier habe ich das Branding, aber hier geht die eigentliche Navigation los. Und das heißt, wenn ich jetzt von diesem Element möchte, dass es nach rechts fließt, dann sage ich pull, und jetzt muss ich eine Größenangabe machen, also ob es in jedem Fall nach rechts wandert, also xs die kleinste Einheit immer nach rechts, sm für fast immer nach rechts. Ich sage jetzt mal xs als dieser Breakpoint, bei dem es passieren soll, und eben dass es nach rechts wandern soll. Strg+S. Speichere ich es, erneuere hier die Seite und habe jetzt hier herunten eine Aufteilung zwischen dem Branding und meiner Navigation erreicht, und das mit einer einfachen vordefinierten Klasse, ohne dabei einen Umweg über meine eigene CSS-Datei machen zu müssen. Und genau das ist das Bestechende an diesem kleinen Helferlein, dass sie sehr vielseitig auf der einen Seite sind und mir einige so zusätzliche Schreibarbeit in meiner CSS-Datei ersparen helfen können.