Eine ausführliche Einführung in Bootstrap-Listengruppen

In diesem Kapitel erklären wir Listengruppen. Die Listenkomponente wird verwendet, um komplexe und individuelle Inhalte in Form einer Liste darzustellen. Die Schritte zum Erstellen einer einfachen Listengruppe sind wie folgt:

Fügen Sie die Klasse .list-group zum Element <ul> hinzu.

Klasse .list-group-item zu <li> hinzufügen.

Das folgende Beispiel zeigt dies:

Beispiel

<ul class="list-group">
    <li class="list-group-item">免费域名注册</li>
    <li class="list-group-item">免费 Window 空间托管</li>
    <li class="list-group-item">图像的数量</li>
    <li class="list-group-item">24*7 支持</li>
    <li class="list-group-item">每年更新成本</li></ul>

Basislistengruppe

Die grundlegende Listengruppe sieht aus wie ein Listenelement, bei dem das Listensymbol entfernt und mit einigen spezifischen Stilen ausgestattet wurde. Die grundlegende Listengruppe im Bootstrap-Framework besteht hauptsächlich aus zwei Teilen:

　☑ Listengruppe: Listengruppencontainer, häufig verwendet wird das ul-Element, natürlich kann es auch das ol- oder div-Element

sein

　☑ list-group-item: Listenelement, häufig verwendet wird das li-Element, natürlich kann es auch das div-Element sein

Für die grundlegende Listengruppe gibt es nicht viele Stileinstellungen, hauptsächlich deren Abstand , Rand und abgerundete Ecken usw.

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}.list-group-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

<ul class="list-group"><li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li><li class="list-group-item">javascript</li>
<li class="list-group-item">bootstrap</li><li class="list-group-item">jquery</li>
</ul>

Badge

Die Listengruppe mit Badge ist eigentlich die Badge-Komponente und die Basis Listengruppe im Bootstrap-Framework für einen Effekt kombiniert. Die spezifische Methode ist sehr einfach. Sie müssen nur die Badge-Komponente „badge“ in „list-group-item“ hinzufügen. Das Prinzip ist sehr einfach, das heißt, Sie legen einen rechten Float für das Badge fest Wenn zwei Abzeichen gleichzeitig vorhanden sind, wird beim Erscheinen von Elementen in der Liste natürlich auch der Abstand zwischen ihnen festgelegt

.list-group-item > .badge {
  float: right;
}.list-group-item > .badge + .badge {
  margin-right: 5px;
}

<ul class="list-group"><li class="list-group-item"><span class="badge">33</span>HTML</li><li class="list-group-item"><span class="badge">60</span>CSS</li><li class="list-group-item"><span class="badge">192</span>javascript</li><li class="list-group-item"><span class="badge">20</span>bootstrap</li><li class="list-group-item"><span class="badge">26</span>jquery</li></ul>

Links

Verwenden Sie das

-Tag anstelle des

-Tags, um eine Listengruppe zu bilden, die alle Links enthält (beachten Sie auch, dass Das <a>-Tag muss durch das <li>-Tag ersetzt werden. Es ist nicht erforderlich, ein übergeordnetes Element <ul><div>

a.list-group-item {
  color: #555;
}a.list-group-item .list-group-item-heading {
  color: #333;
}a.list-group-item:hover,
a.list-group-item:focus {
  color: #555;
  text-decoration: none;
  background-color: #f5f5f5;
}

<div class="list-group">
  <a href="#" class="list-group-item ">HTML</a>
  <a href="#" class="list-group-item">CSS</a>
  <a href="#" class="list-group-item">javascript</a>
  <a href="#" class="list-group-item active">bootstrap</a>
  <a href="#" class="list-group-item">jquery</a></div>

Button< hinzuzufügen 🎜>

Die Elemente in der Listengruppe können auch direkt Schaltflächen sein (was auch bedeutet, dass das übergeordnete Element

sein muss und nicht

verwendet werden kann), und es ist nicht erforderlich, jede Schaltfläche einzeln einzuschließen Ein übergeordnetes Element Element.

Achten Sie darauf, keine Standard-<div>Klassen zu verwenden<ul>.btn

<div class="list-group">
  <button type="button" class="list-group-item ">HTML</button>
  <button type="button" class="list-group-item">CSS</button>
  <button type="button" class="list-group-item">javascript</button>
  <button type="button" class="list-group-item">bootstrap</button>
  <button type="button" class="list-group-item">jquery</button></div>

Benutzerdefinierte Inhalte

Das Bootstrap-Feld fügt zwei neue Stile basierend auf der Linklistengruppe hinzu:

　☑ list-group-item-heading: wird zum Definieren des Listenelement-Header-Stils verwendet

　☑ list- Gruppenelementtext: Wird verwendet, um den Hauptinhalt des Listenelements zu definieren

Die größte Rolle dieser beiden Stile besteht darin, Entwicklern dabei zu helfen, den Inhalt des Listenelements anzupassen

<div class="list-group"><a href="##" class="list-group-item"><h4 class="list-group-item-heading">HTML</h4><p class="list-group-item-text">HTML被认为是前端知识体系里面最简单的知识，几年前，很多人都推荐在W3C上学习个几天就能够基本掌握。但随着HTML5和移动端的强势发展，HTML的技能点也越来越难。世上无难事，好学好总结...</p></a><a href="##" class="list-group-item"><h4 class="list-group-item-heading">CSS</h4><p class="list-group-item-text">CSS是前端工程师的基本功，但好多执迷于学习javascript的人的基本功并不扎实。可能一些人从w3school网站匆匆过了一遍，只是对CSS常用概念有一些表面上的理解，就一头扎进javascript的深坑里跳不出来。实际上，javascript中比较复杂的逻辑很有可能使用CSS几行样式就能解决问题，而且性能还好。CSS之所以能成为一门优雅的语言，以及有其对应的重构工程师的岗位，是因为这本语言本身就有很强的存在价值，且真正要理解它并不容易。从CSS禅意花园开始，写CSS成为一种艺术。从CSS2.1到3再到4，CSS所涵盖的内容及可实现的功能得到了极大的丰富，使得CSS的学习成本也越来越高。再多的知识，一个知识点一个知识点去学，总能学明白...</p></a><a href="##" class="list-group-item"><h4 class="list-group-item-heading">javascript</h4><p class="list-group-item-text">javascript就如同魔法一样，它是一门充满活力、简单易用的语言，又是一门具有许多复杂微妙技术的语言。即使是经验丰富的javascript开发者，如果没有认真学习的话，也无法真正理解它们，这就是javascript的矛盾之处。由于javascript不必理解就可以使用，因此通常来说很难真正理解语言本身，这就是我们面临的挑战。不满足于只是让代码正常工作，而是想要弄清楚为什么，勇于挑战这条崎岖颠簸的少有人走的路，拥抱整个javascript...</p></a>    </div>

Statuseinstellungen

Das Bootstrap-Framework bietet Statuseffekte für kombinierte Listenelemente, insbesondere verknüpfte Listengruppen. Wie etwa der gemeinsame Status und der Behindertenstatus usw. Die Implementierungsmethode ähnelt den zuvor vorgestellten Komponenten. In der Listengruppe müssen Sie lediglich den Klassennamen zum entsprechenden Listenelement hinzufügen:

　☑ aktiv: Zeigt den aktuellen Status an

☑ deaktiviert: Zeigt den deaktivierten Zustand an

.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
  color: #777;
  background-color: #eee;
}.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  z-index: 2;
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
}

<div class="list-group">
  <a href="#" class="list-group-item ">HTML</a>
  <a href="#" class="list-group-item">CSS</a>
  <a href="#" class="list-group-item">javascript</a>
  <a href="#" class="list-group-item active">bootstrap</a>
  <a href="#" class="list-group-item disabled">jquery</a></div>

Bunte Listengruppe

Listengruppenkomponente Wie die Warnkomponente stellt Bootstrap verschiedene Hintergrundfarben und Textfarben für verschiedene Zustände bereit. Sie können diese Klassennamen verwenden, um Listenelemente mit unterschiedlichen Hintergrundfarben zu definieren

　☑ List-group-item -success: Erfolgreich, Hintergrundfarbe ist grün

　☑ list-group-item-info: Information, Hintergrundfarbe ist blau

　☑ list-group-item-warning: Warnung, Hintergrundfarbe ist gelb

☑ list-group-item-danger: Fehler, die Hintergrundfarbe ist rot

Wenn Sie dem Listenelement eine Hintergrundfarbe hinzufügen möchten, müssen Sie nur die entsprechende Klasse hinzufügen Name basierend auf „list-group-item“

Das obige ist der detaillierte Inhalt vonEine ausführliche Einführung in Bootstrap-Listengruppen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn