Bootstrap unterstützt vier Listenstile: Unstylierte Listen, bestellte Listen, ungeordnete Listen (alle Standardstile) und Inline -Listen, mit denen horizontale Navigationsmenüs und Tag -Clouds erstellt werden k?nnen. Darüber hinaus bietet Bootstrap auch eine leistungsstarke Listengruppenklasse, die Listen mit abgerundeten Ecken, Grenzen und Hintergrundfarben für die Anzeige von Projektlisten oder Navigationsmenüs erstellt.

Welche Listenstile unterstützen Bootstrap? Diese Frage ist gro?artig! Es sieht auf der Oberfl?che einfach aus, aber wenn Sie tiefer graben, werden Sie feststellen, dass Bootstrap -Griffe flexibler als Sie denken. Es handelt sich nicht nur um eine einfache Stileinstellung, sondern bietet auch leistungsstarke Werkzeuge zum Erstellen verschiedener Listenstrukturen und erm?glicht es Ihnen sogar, mit einigen unerwarteten Tricks zu spielen.

Zun?chst müssen Sie die Kernidee von Bootstrap verstehen: Erstellen Sie die Seitenelemente schnell durch vordefinierte CSS -Klassen. In Bezug auf Listen wurde also keine neuen Listentypen erfunden, sondern das Erscheinungsbild und das Verhalten von HTML -Standardlistenelementen <ul></ul> , <ol></ol> und <dl></dl> , indem sie CSS -Klassen geschickt anwenden.

Bootstrap enth?lt Standardstile für nicht stylede Listen, bestellte Listen und nicht ordnungsgem??e Listen. Obwohl einfach, sind diese Stile die Grundlage für den Aufbau komplexer Listen. Sie k?nnen <ul></ul> und <ol></ol> Tags direkt verwenden, und Bootstrap wendet automatisch den Standardstil an.

Aber was wirklich interessant ist, ist, dass Bootstrap zwei leistungsstarke Klassen bietet: list-inline und list-group . list-inline -Klasse kann Listenelemente in derselben Zeile anordnen, was bei der Erstellung horizontaler Navigationsmenüs oder Tag-Wolken sehr nützlich ist. Schauen Sie sich das an:

 <code class="html"><ul class="list-inline"> <li class="list-inline-item">Item 1</li> <li class="list-inline-item">Item 2</li> <li class="list-inline-item">Item 3</li> </ul></code>

Einfach? Aber die Auswirkungen, die es bringen kann, sind erstaunlich. Es ist zu beachten, dass list-inline-item mit list-inline verwendet wird. Die Listenelemente werden automatisch Margen und einige andere Stilanpassungen hinzugefügt, um sicherzustellen, dass zwischen den Listenelementen ein ordnungsgem??er Abstand besteht. Wenn Sie den Abstand fein steuern m?chten, k?nnen Sie das CSS selbst einstellen. Denken Sie daran, Bootstrap ist nur ein Framework, und die ultimative Stilkontrolle liegt immer noch in Ihren H?nden.

list-group ist leistungsf?higer und kann Listen mit abgerundeten Ecken, R?ndern und Hintergrundfarben erstellen, die normalerweise zum Anzeigen von Elementlisten, Navigationsmenüs oder Seitenleisten verwendet werden.

 <code class="html"><ul class="list-group"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li> </ul></code>

Dieses Beispiel zeigt die Kombination aus list-group und list-group-item . Sie k?nnen den Status der Listenelemente ?ndern, indem Sie active , disabled usw. hinzuzufügen, und auch andere Klassen von Bootstrap kombinieren, um komplexere Stileffekte zu erzielen. Beispielsweise kann list-group-flush den Teiler zwischen Listenelementen list-group-horizontal entfernen, um die Listenelemente horizontal anzuordnen.

Aber vergessen Sie nicht das <dl></dl> Tag! <dl></dl> , <dt></dt> und <dd></dd> , die die Beschreibungsliste definieren, gelten auch in Bootstrap, au?er dass es keine speziellen Klassen gibt, um sie zu ?ndern. Auf diese Weise müssen Sie CSS verwenden, um den Stil selbst anzupassen oder andere Werkzeugklassen von Bootstrap zu verwenden, um umfangreichere Effekte zu erzielen.

Schlie?lich m?chte ich Sie daran erinnern, dass das Versions -Update von Bootstrap einige subtile ?nderungen mit sich bringen kann. Es ist also am besten, sich auf die offizielle Dokumentation zu beziehen, um die neuesten Informationen zu erhalten. Seien Sie nicht abergl?ubisch über alte Tutorials oder Blogs, umarmen Sie Ver?nderungen und werden Sie ein Entwickler, der st?ndig lernt! Schlie?lich ?ndert sich die Technologie st?ndig, und nur durch kontinuierliches Lernen k?nnen wir unbesiegbar sein. Denken Sie daran, Code ist nicht statisch und eine flexible Anwendung ist der beste Weg.

Das obige ist der detaillierte Inhalt vonWelche Listenstile unterstützen Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!