Bootstrap 3 Grundkurs

Absätze gestalten

Testen Sie unsere 2007 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Einfache Vorformatierungen, können helfen, Text optimal zu strukturieren. Das sind Angebote, die sogar erweitert oder ergänzt werden können.
05:03

Transkript

Hier habe ich nun eine prinziepielle Absatz Einteilung erzeugt und ich möchte Ihnen jetzt zeigen wie Sie Absätze noch weiter gestalten, bzw. auch mit der Anzeige von Absätzen ein bisschen spielen können und die eigene Note noch hinzuzufügen. Ich gehe mit Ihnen dazu jetzt gleich zurück in mein Aptana Studio, sage Ihnen aber nur was ich bis jetzt getan habe. Ich habe eine eigene row Abteilung für den Bereich Inhalt erzeugt, der eben da bis knapp unter die Fußnote reicht. Und habe dann nochmal unterteilt in einem Bereich aside. Der läuft hier. Und in einem article Bereich, der läuft hier. Und habe innerhalb dieses article Bereichs nochmal eine Unterteilung geschaffen, um hier 3 zusätzliche Spalten drin unterbringen zu können. So, und jetzt aber zurück in's Studio, wo Sie sich das ganze nochmal in Ruhe anschauen können. Eben hier habe ich, nach dem heading, also nach dem Abschluß des Brandings eine neue row begonnen, der ich jetzt vorsichtshalber noch die Klasse Inhalt mitgegeben habe für den Fall, dass wir weiter was damit spielen wollen. Und habe jetzt hier den aside Bereich und hier den article Bereich und habe hier eine neue row gebildet mit den 3 Unterabteilungen drinnen. Was ich Ihnen jetzt zeigen möchte, ist auf der einen Seite die Möglichkeit mit einer einfachen Klassenbezeichnung dem einen Leitungsteil des Hauptasrtikels z. B. eine andere Gewichtung zu geben. Also unter diesem was wir anbieten, möchte ich gerne, dass der erste Absatz etwas prominenter hervorsticht und das kann ich mit einer Klasse erledigen, die heißt lead. Mehr muss ich gar nicht machen, sondern ich vergebe diese Klasse und habe jetzt einen anders formatierten Bereich. Und schon allein diese kleine Veränderung ist wieder sehr ausgerichtet auf dieses responsive Design, auf diesen Anspruch, denn, wenn wir jetzt die Seite kleinschrumpfen lassen, werden Sie sehen, dass es nach wie vor eine andere Schrift aufweißt, aber eben nicht das kleine Display erschlägt. Und wenn ich mir das ganze hier so klein anschaue, merke ich das, ich glaube, dass es gut sein wird, wenn ich diesen letzten Absatz bei so einem kleinen Display einfach nicht anzeigen lasse. Er ist dann für den Inhalt und für das Finden des Inhalts nicht so von wesentlicher Bedeutung, sondern der soll aber nur bei kleineren Anzeigen dann lieber versteckt und verdeckt bleiben, damit man sich auf das wesentliche konzentrieren kann. Und auch das machen wir mit einer einfachen Klasse. Ich suche mir meinen letzten Artikel. Das ist dieser hier, über die almächtige Interpunktion. Ich sage wieder Klasse und diese Klasse heißt jetzt eben hidden-xs und damit ereiche ich, dass bei diesen wirklich kleinst Anzeigen oder kleinen Anzeigen bei Smartphones, dieser Absatz versteckt wird. Ich speichere dies. Wenn Sie die Überschriften noch anpassen wollen, weil Sie ganz gerne hätten, dass die Überschriften z. B. in dem selben grau Ton sind wie hier oben, dann ist das ebenfalls ein ziemlich einfacher Eintrag in meiner selbsterstellten CSS Datei, womit ich hier wie gesagt die anderen Einträge überschreibe. Und d. h. wenn ich hier einfach sage h1, h2, h3, h4. Von denen hätte ich gerne, dass sie einfach nur die selbe Farbe haben. D. h. ich kopiere mir mit Steuerung C einfach diesen Eintrag und füge ihn hier wieder ein. Speicher das ganze, gehe zurück in meine index.html und auch das hat funktioniert. Sie sehen mit einem Schlag haben Sie auch gleich Ihre Überschriften formatiert. Sie bekommen jetzt vielleicht eine Vorstellung davon, dass Sie auf der einen Seite sehr schnell auf vorgegebenes CSS zugreifen können. Und auf der anderen Seite, Ihnen aber die weitereren Gestaltungsmöglichkeiten total weiter offen stehen, weil Sie eben bestimmen welche Teilbereiche Sie evenutell überschreiben möchten und das dann ganz gezielt erledigen können, ohne sich Sorgen um den Gesamteindruck machen zu müssen. Absätze zu gestalten ist also überhaupt kein Problem mit Bootstrap.

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)
Professionell - verstndlich - empfehlenswert
Ilona H.
Habe schon einige Videos nach dem Step-by-step Verfahren mitgemacht. Bin begeistert, von der Gelassenheit in der Stimme und Ruhe. Das passt einfach. Das Video ist nachvollziehbar und es wird einem nicht langweilig. Auch kommt die Autorin im nächsten Schritt auf den Punkt. Würde mir wünschen wenn Sie mehr Videos anbieten würde.
 

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!