Wie implementieren Sie die ungeordnete Liste von Bootstrap?

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>这是第一个列表项</li> <li>这是第二个列表项</li> <li>这是第三个列表项</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">选项一</li> <li class="list-inline-item">选项二</li> <li class="list-inline-item">选项三</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!