Die nicht ordneten Listen mit Bootstrap verwenden keine neuen Tags, sondern verwenden CSS -Klassen, um die Original

und <li> -Tags zu versch?nern. Zu den Hauptschritten geh?ren: Verwenden Sie die. List-Unstyled-Klasse, um den Standardlistenstil zu entfernen. Verwenden Sie die .List-Inline-Klasse, um Listenelemente in eine Zeile zu ordnen. Kontrolllistenlayout in Verbindung mit dem Netzsystem. Passen Sie Stile mit Vorsicht an und priorisieren Sie die Verwendung von Klassen, die von Bootstrap bereitgestellt werden.

Bootstrap Unbestrafte Liste? Diese Frage ist gro?artig! Um es unverblümt auszudrücken, hat Bootstrap keine neuen HTML -Tags erfunden. Es verwendet nur CSS, um <ul></ul> und <li> Tags zu versch?nern, mit denen Sie bereits vertraut sind. Daher besteht der Kern der Implementierung der ungeordneten Liste des Bootstrap -Stils darin, die von Bootstrap bereitgestellten CSS -Klassen geschickt zu verwenden.

Sie denken vielleicht, dass dies sehr einfach ist. Ist es nicht nur eine Klasse hinzugefügt? Aber hier gibt es tats?chlich viele Details, mit denen der Code, den Sie eleganter schreiben, mehr mit dem Bootstrap -Stil entsprechen k?nnen, und was noch wichtiger ist, dass es einfacher ist, zu warten und zu erweitern.

Lassen Sie uns zuerst die Grundlagen überprüfen. Das <ul></ul> Tag in HTML definiert eine ungeordnete Liste, und das <li> Tag definiert ein Listenelement. Bootstrap verwendet eine Reihe von Klassen, um den Stil der Liste zu steuern. Zum Beispiel kann .list-unstyled k?nnen den Standardlistenstil einschlie?lich der Kugeln direkt entfernen. Dies ist sehr nützlich für Listen, die benutzerdefinierte Stile erfordern.

Schauen wir uns ein einfaches Beispiel an:

 <code class="html"><ul class="list-unstyled"> <li>這是第一個(gè)列表項(xiàng)</li> <li>這是第二個(gè)列表項(xiàng)</li> <li>這是第三個(gè)列表項(xiàng)</li> </ul></code>

Nachdem dieser Code ausgeführt wurde, sehen Sie eine Liste ohne Kugeln. Ist es nicht sehr einfach? Aber keine Sorge, das ist nur eine Einführung.

Bootstrap bietet auch andere Klassen, wie .list-inline . Dies ist nützlich, wenn Sie horizontale Navigationsmenüs oder -bezeichnungen erstellen.

 <code class="html"><ul class="list-inline"> <li class="list-inline-item">選項(xiàng)一</li> <li class="list-inline-item">選項(xiàng)二</li> <li class="list-inline-item">選項(xiàng)三</li> </ul></code>

Achten Sie hier auf .list-inline-item Klasse, in der zus?tzliche Stilanpassungen für die Auflistung von Elementen vorgenommen werden, damit sie für die horizontale Anordnung geeigneter werden. Ignorieren Sie diese Klasse, der Effekt von list-inline ist m?glicherweise nicht das, was Sie wollen.

Um tiefer zu gehen, k?nnen Sie das Gittersystem von Bootstrap kombinieren, um das Layout der Liste zu steuern. Stellen Sie sich vor, Sie m?chten eine Liste in einer Spalte anzeigen, und diese Liste ben?tigt ein reaktionsschnelles Layout. Zu diesem Zeitpunkt k?nnen Sie <ul></ul> in einer Rasterspalte platzieren und die reaktionsschnellen Eigenschaften von Bootstrap verwenden, um den Anzeigeeffekt der Liste unter verschiedenen Bildschirmgr??en zu steuern. Dies erfordert, dass Sie ein gewisses Verst?ndnis des Grid -Systems von Bootstrap haben.

Natürlich k?nnen Sie auch den Stil der Liste vollst?ndig anpassen, indem Sie den Standardstil von Bootstrap überschreiben. Aber ich empfehle Ihnen nicht, dies zu tun, es sei denn, Sie wissen wirklich, was Sie tun. Da dies die Komplexit?t des Codes erh?ht und Ihr benutzerdefinierter Stil bei der Upgrade von Bootstrap in Zukunft ungültig ist. Versuchen Sie nicht, die von Bootstrap bereitgestellten Klassen zu verwenden, um Stile zu steuern, was die beste Praxis ist.

Denken Sie schlie?lich daran, dass Bootstrap nur ein Tool ist, mit dem Sie schnell Seiten erstellen k?nnen, aber das wirklich exquisite Design und Code h?ngt von Ihrem ausführlichen Verst?ndnis von HTML, CSS und Bootstrap ab. Seien Sie nicht abergl?ubisch über Werkzeuge, Sie müssen die Prinzipien dahinter verstehen. Auf diese Weise k?nnen Sie eleganter, robuster und leichter für den Code aufrechterhalten.

Das obige ist der detaillierte Inhalt vonWie implementieren Sie die ungeordnete Liste von Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!