Bootstrap 3 Grundkurs

Listen erzeugen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Listen kommen auf Web-Seiten recht häufig zum Einsatz – deshalb gibt es für die üblichen Einsatzvarianten auch entsprechend vorgefertigte Klassen.
05:30

Transkript

Listen Elemente werden auf Web Seiten vielseitig eingesetzt und deswegen erstaunt es nicht, dass Bootstrap auch ein paar CSS Voreinstellungen mitbringt, wenn es um Listen geht. Ich habe hier in einem Dokument ein paar Listen vorbereitet. Ich zeige es Ihnen einmal schnell. Der Klassiker. Hier habe ich eben eine ganz normale unsortierte Liste, hier habe ich eine sortierte Liste mit einer Subliste drinnen und als dritte Variante ist hier eine dieser klassischen Definitionslisten. Und jetzt sehen wir uns mal an, wie einfach es ist z. B. dieser Liste die Punkte wegzunehmen. Wenn Sie also nicht unbedingt wollen, dass Ihre unsortierte Liste Punkte mitbringt oder diesen seltsamen Mark hier mitbringt, also diese leichte Einrückung, dann reicht es völlig, dass Sie der Liste eine Klasse mitgeben, mit dem wunderschönen Namen list-unstyled. Steuerung S speicher ich das ganze. Sehe es mir an. Und jetzt merken Sie, hat die Liste eben den Mark hinten und auch das Punktedesign verloren. Ähnlich können Sie es auch bei einer ordentlichen Liste halten. Da ist es dann eben so, wenn Sie dieses Klassenattribut mitgeben unstyled, dass Sie merken können, dass auch die Nummerierungen verschwinden, nur eben nicht in dieser Unterebene. Da geht die Zählung nach wie vor von vorne los, denn diese Klassen beziehen sich nur auf das tatsächliche erste Kindelement. Das zweite Kindelement ist in der Weise nicht integriert. Das einzige was Sie dann tun können ist, dass Sie eben auch diesem Kindelement so ein list-unstyled mitgeben, also dann auch hier die Klasse verwenden und sagen list-unstyled. Dann allerdings haben Sie wieder sämtliche Punkte in einer Reihe stehen und müssten sich jetzt hier nochmal neu um eine leichte Abweichung kümmern. Eine weitere Möglichkeit, die sehr oft gebraucht wird, ist die, dass man sich die Listenelemente nicht untereinander, sondern nebeneinander, anzeigen lassen möchte. Und da gibt es den hübschen Befehl des list inline und der ist genauso leicht einzusetzen, d. h. bei meiner unsortierten Liste werde ich jetzt das list-unstyled durch ein list-inline ersetzen, speichere das und Sie werden jetzt gleich sehen, das alleine diese Klasse reicht, das nun die Listenelemente horizontal in einer Reihe dargestellt werden. Falls Sie sich schon jemals mit langwierigen horizontalen Menüleisten gespielt haben, werden Sie diese Vereinfachung sehr zu schätzen wissen, obwohl es ja in Bootstrap auch noch eigene Navigationsmöglichkeiten gibt. Schauen wir weiter zur Definitionsliste. Die Definitionsliste ohne das man sehr viel dazu beiträgt, hat ungefähr dieses Aussehen. D. h. ich habe hier meine Überschrift, dann den ersten Definitionspunkt, 1-2 Erklärungen dazu, zweiter Definitionspunkt, 1-2 Erklärungen. Das ganze sieht in Aptana so aus. Warten Sie mal. Hier gehören wir her. Ein ganz normales mark up ohne, dass ich jetzt besonders viel dazu beitragen hätte müssen. Jetzt wäre natürlich aber eine horizontale Definitionsliste optisch viel ansprechender, und abgesehen davon, dass ich jetzt hier die Überschrift ändere, reicht es, wenn ich hier in Definitionslisten umfassenden Bereich eben eine Klasse angebe, die da heißt dl-horizontal. Und ich speichere das. Aktualisiere meine Seite. Und jetzt merken Sie was passiert ist. Ich habe hier meine Listen Überschrift und bekomme jetzt wunderbar sortiert die einzelnen Elemente. Und das sehr praktische bei dieser horizontalen Definitionsliste ist aber das, dass Sie nur dann zu horizontal erscheint, wenn genügend Platz dafür da ist. Sollte man es mit einem kleinen Ausgabegerät zu tun bekommen, dann rutscht die horizontale Definitionsliste wieder zusammen und wird eine ganz normale klassische Definitionsliste. D. h. sogar bei den Listen Elementen wird darauf geachtet das, dass das Design für unterschiedliche Medien durchgezogen wird. Sie brauchen sich also keine größeren Sorgen mehr um das Erstellen von Listen zu machen, grundsätzliche Funktionalitäten sind eben sehr leicht mit einfachen vorgefertigten CSS Klassen umzusetzen.

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!