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 ff6d136ddc5fdfeffaf53ff6ee95f185 hinzu.

Klasse .list-group-item zu 25edfb22a4f469ecb59f1190150159c6 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;
}

86ba7a910db1f851ade673353645313df496da2c0df4bc6d16ea49188db2a380HTMLbed06894275b65c1ab86501b08a632eb
f496da2c0df4bc6d16ea49188db2a380CSSbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a380javascriptbed06894275b65c1ab86501b08a632eb
f496da2c0df4bc6d16ea49188db2a380bootstrapbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a380jquerybed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

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;
}

86ba7a910db1f851ade673353645313df496da2c0df4bc6d16ea49188db2a38065a095448675e8d3ad55aa894fd9d7023354bdf357c58b8a65c66d7c19c8e4d114HTMLbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a38065a095448675e8d3ad55aa894fd9d7026054bdf357c58b8a65c66d7c19c8e4d114CSSbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a38065a095448675e8d3ad55aa894fd9d70219254bdf357c58b8a65c66d7c19c8e4d114javascriptbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a38065a095448675e8d3ad55aa894fd9d7022054bdf357c58b8a65c66d7c19c8e4d114bootstrapbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a38065a095448675e8d3ad55aa894fd9d7022654bdf357c58b8a65c66d7c19c8e4d114jquerybed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689

Links

Verwenden Sie das

-Tag anstelle des

-Tags, um eine Listengruppe zu bilden, die alle Links enthält (beachten Sie auch, dass Das 3499910bf9dac5ae3c52d5ede7383485-Tag muss durch das 25edfb22a4f469ecb59f1190150159c6-Tag ersetzt werden. Es ist nicht erforderlich, ein übergeordnetes Element ff6d136ddc5fdfeffaf53ff6ee95f185dc6dce4a544fdca2df29d5ac0ea9906b

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;
}

1f2e350fb86f4fbcf304a3170516954f
  c6c9c9b8b3173ba91b723c08e0d6be97HTML5db79b134e9f6b82c0b36e0489ee08ed
  a16100a6f9717ef0222dddbefdffc896CSS5db79b134e9f6b82c0b36e0489ee08ed
  a16100a6f9717ef0222dddbefdffc896javascript5db79b134e9f6b82c0b36e0489ee08ed
  10520cbff229fcc96105ca9518f38965bootstrap5db79b134e9f6b82c0b36e0489ee08ed
  a16100a6f9717ef0222dddbefdffc896jquery5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68

Button

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-dc6dce4a544fdca2df29d5ac0ea9906bKlassen zu verwendenff6d136ddc5fdfeffaf53ff6ee95f185.btn

1f2e350fb86f4fbcf304a3170516954f
  6b50b67c135ab2e62492341b13f29373HTML65281c5ac262bf6d81768915a4a77ac0
  d68a9ee5ca1160520ed600ec9e3a7af9CSS65281c5ac262bf6d81768915a4a77ac0
  d68a9ee5ca1160520ed600ec9e3a7af9javascript65281c5ac262bf6d81768915a4a77ac0
  d68a9ee5ca1160520ed600ec9e3a7af9bootstrap65281c5ac262bf6d81768915a4a77ac0
  d68a9ee5ca1160520ed600ec9e3a7af9jquery65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68

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

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

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;
}

1f2e350fb86f4fbcf304a3170516954f
  c6c9c9b8b3173ba91b723c08e0d6be97HTML5db79b134e9f6b82c0b36e0489ee08ed
  a16100a6f9717ef0222dddbefdffc896CSS5db79b134e9f6b82c0b36e0489ee08ed
  a16100a6f9717ef0222dddbefdffc896javascript5db79b134e9f6b82c0b36e0489ee08ed
  10520cbff229fcc96105ca9518f38965bootstrap5db79b134e9f6b82c0b36e0489ee08ed
  240d28e046b15bac6aa66060d9749335jquery5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68

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!