Wie implementieren Sie die Bootstrap -Definitionsliste?

Die Definitionsliste von Bootstrap ist im Wesentlichen eine Kombination aus HTML -Tags

,

,

. Bootstrap fügt ihm Stile und Rastersysteme hinzu, wodurch es schöner und reaktionsschneller aussieht.

Liste der Definitionen für Bootstrap? Diese Frage ist wunderbar. Es scheint einfach, aber in der Tat gibt es viele Tricks. Viele Anfänger denken, dass Bootstrap nur ein paar Stile ist, und es ist alles getan, wenn Sie es anziehen. Tatsächlich ist dies nicht der Fall. Nur wenn Sie die Designideen dahinter verstehen, können Sie wirklich damit spielen. Schauen wir uns in diesem Artikel die Implementierung der Bootstrap -Definitionsliste an und sprechen Sie über einige unbekannte Techniken. Nachdem Sie es gelesen haben, können Sie nicht nur die Definitionsliste leicht erhalten, sondern auch ein tieferes Verständnis des Bootstrap -Mechanismus haben.

Sprechen wir zuerst über die Grundlagen. Die Definitionsliste von Bootstrap ist im Wesentlichen eine Kombination aus HTML -Tags <dl></dl> , <dt></dt> , <dd></dd> . Bootstrap fügt diesen Tags nur ein paar Dinge hinzu, damit sie schöner und mehr im Einklang mit dem Gesamtstilstil aussehen. Wenn Sie direkt in native HTML schreiben, können Sie auch die Definitionsliste implementieren. Der Effekt ist jedoch der gleiche und fehlt die Ästhetik.

Komm schon, fügen Sie den Code hinzu und erleben Sie den Charme von Bootstrap:

 <code class="html"><dl class="row"> <dt class="col-sm-3">Term 1</dt> <dd class="col-sm-9">Definition 1 goes here.</dd> <dt class="col-sm-3">Term 2</dt> <dd class="col-sm-9">Definition 2 goes here.</dd> <dt class="col-sm-3">Term 3</dt> <dd class="col-sm-9">Definition 3 goes here.</dd> </dl></code>

Hast du class="row" und col-sm-* gesehen? Dies funktioniert das Rastersystem von Bootstrap. Es ordnet die Definitionsliste horizontal col-sm-* , kontrolliert die Breite jedes Elements und ist reaktionsmäßig konzipiert. Es ist in Ordnung, dieses Netzsystem nicht zu verwenden, aber es ist in Ordnung, den Standardstil von Bootstrap zu verwenden, aber der Effekt wird etwas anders sein, und natürlich ist es auch einfacher:

 <code class="html"><dl> <dt>Term 1</dt> <dd>Definition 1 goes here.</dd> <dt>Term 2</dt> <dd>Definition 2 goes here.</dd> <dt>Term 3</dt> <dd>Definition 3 goes here.</dd> </dl></code>

Diese beiden Schreibmethoden können sich jedoch unter verschiedenen Bildschirmgrößen unterschiedlich verhalten, sodass Sie entsprechend der tatsächlichen Situation wählen müssen. Ich persönlich bevorzuge es, ein Gittersystem zu verwenden, da es flexibler und kontrollierbarer ist.

Lassen Sie uns als nächstes über einige fortgeschrittene Verwendung sprechen. Wenn Sie beispielsweise Punktstile zum Definitionselement ( <dt></dt> ) wie fett oder Farbe hinzufügen möchten, ist es absolut in Ordnung:

 <code class="html"><dl class="row"> <dt class="col-sm-3 text-primary">Term 1</dt> <!-- text-primary是Bootstrap的样式类--> <dd class="col-sm-9">Definition 1 goes here.</dd> <!-- ...more items... --> </dl></code>

Wenn Sie beispielsweise eine Liste von Definitionen nisten möchten, ist dies auch in Ordnung, was bei der Behandlung komplexer Informationsstrukturen sehr nützlich ist. Wenn Sie jedoch nisten, sollten Sie jedoch auf das Gefühl der Schichtung achten und es nicht zu chaotisch machen, sonst wird es schmerzhaft sein, es zu erhalten. Dies erfordert, dass Sie ein gutes Verständnis der HTML -Semantik haben.

Lassen Sie uns schließlich über einige Fallstricke sprechen. Ein häufiger Fehler für Anfänger ist das Verständnis von Bootstraps reaktionsschnellem Design, was zu einer schlechten Anzeigeleistung unter verschiedenen Bildschirmgrößen führt. Es gibt auch Stilkonflikte, da der Stil von Bootstrap möglicherweise mit Ihrem eigenen Stil in Konflikt steht und Ausnahmen für Displays verursacht. Lösung? Entweder überprüfen Sie CSS oder verwenden Sie einen fortschrittlicheren CSS-Präprozessor (wie SASS oder weniger), um Ihre Stile besser zu verwalten.

Kurz gesagt, die Implementierung der Definitionsliste von Bootstrap ist nicht kompliziert. Der Schlüssel ist, das Rastersystem und die Stilklassen von Bootstraps zu verstehen. Nur wenn Sie mehr üben und mehr zusammenfassen, können Sie es wirklich beherrschen. Denken Sie daran, Code ist nur ein Tool, und das Verständnis der Designphilosophie dahinter kann nur eleganter und leichter zu Code aufrechterhalten werden.

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