Latest web development tutorials

Bootstrap Listengruppen

In diesem Kapitel werden wir die Liste der Gruppen erklären. Liste der Komponenten in der Liste verwendet, dargestellt in Form von komplexen und kundenspezifische Inhalte. Erstellen Sie eine grundlegende Liste der Gruppen wie folgt:

  • Das Element <ul> Add -Klasse .list-Gruppe.
  • Zum <li> Fügen SieKlasse .list-group-Element.

Das folgende Beispiel veranschaulicht diesen Punkt:

Beispiele

<Ul class = "list-Gruppe"> <Li class = "list-Gruppe-item "> Anmeldung kostenlose Domain - Namen </ li> <Li class = "list-Gruppe-item "> Fenster kostenlosen Hosting - Raum </ li> <Li class = "list-Gruppe-item "> Die Anzahl der Bilder </ li> <Li class = "list-Gruppe-item "> 24 * 7 Support </ li> <Li class = "list-group-Artikel "> Aktualisieren jährlichen Kosten </ li> </ Ul>

Versuchen »

Die Ergebnisse sind wie folgt:

Die grundlegende Liste der Gruppen

Fügen Sie ein Abzeichen auf der Liste der Gruppen

Wir können ein Abzeichen Komponenten zu jedem Listeneintrag hinzufügen, wird sie automatisch nach rechts positioniert. Nur müssen Sie eine<span class = "Abzeichen"> zum <li> Element hinzuzufügen.Das folgende Beispiel veranschaulicht diesen Punkt:

Beispiele

<Ul class = "list-Gruppe"> <Li class = "list-Gruppe-item "> Anmeldung kostenlose Domain - Namen </ li> <Li class = "list-Gruppe-item "> Fenster kostenlosen Hosting - Raum </ li> <Li class = "list-Gruppe-item "> Die Anzahl der Bilder </ li> <Li class = "list-Gruppe-item "> <span class = "Abzeichen"> neue </ span> 24 * 7 Support </ li> <Li class = "list-group-Artikel "> Aktualisieren jährlichen Kosten </ li> <Li class = "list-Gruppe-item "> <span class = "Abzeichen"> neue </ span> Rabatt </ li> </ Ul>

Versuchen »

Die Ergebnisse sind wie folgt:

Die Liste der Gruppen-Abzeichen

Fügen Sie einen Link zur Liste der Gruppen

Durch die Verwendung des Anker-Tag, anstatt eine Liste von Elementen, können wir einen Link zu der Liste der Gruppen hinzuzufügen. Wir müssen verwenden <div> statt <ul> Element. Das folgende Beispiel veranschaulicht diesen Punkt:

Beispiele

<A href = "#" class = "list-group-Element aktiv"> Anmeldung freien Domain - Namen </ a> <A href = "#" class = "list-Gruppe-item "> 24 * 7 Support </ a> <A href = "#" class = "list-Gruppe-item "> kostenlose Hosting - Raum - Fenster </ a> <A href = "#" class = "list-Gruppe-item "> Die Anzahl der Bilder </ a> <A href = "#" class = "list-group-Artikel "> Aktualisieren jährlichen Kosten </ a>

Versuchen »

Die Ergebnisse sind wie folgt:

Liste Gruppe Links

Fügen Sie benutzerdefinierte Inhalte in die Liste der Gruppen

Wir haben Links zu der Spitze der Liste der Gruppen hinzugefügt, um beliebigen HTML-Inhalt hinzufügen. Das folgende Beispiel veranschaulicht diesen Punkt:

Beispiele

<Div class = "list-Gruppe"> <A href = "#" class = "list-group-Element aktiv"> <H4 class = "list-group-Element -heading"> Portal Paket </ h4> </ A> <A href = "#" class = "list-Gruppe-item "> <H4 class = "list-group-Artikel -heading"> Anmeldung kostenlose Domain - Namen </ h4> <P class = "list-Gruppe-Artikel -text"> Sie werden kostenlose Domain - Namen - Registrierung über die Website sein. </ P> </ A> <A href = "#" class = "list-Gruppe-item "> <H4 class = "list-Gruppe-Artikel -heading"> 24 * 7 Support </ h4> <P class = "list-Gruppe-item -text"> Wir bieten 24 * 7 Support. </ P> </ A> </ Div> <Div class = "list-Gruppe"> <A href = "#" class = "list-group-Element aktiv"> <H4 class = "list-Gruppe-Artikel -heading"> Business - Website - Paket </ h4> </ A> <A href = "#" class = "list-Gruppe-item "> <H4 class = "list-group-Artikel -heading"> Anmeldung kostenlose Domain - Namen </ h4> <P class = "list-Gruppe-Artikel -text"> Sie werden kostenlose Domain - Namen - Registrierung über die Website sein. </ P> </ A> <A href = "#" class = "list-Gruppe-item "> <H4 class = "list-Gruppe-Artikel -heading"> 24 * 7 Support </ h4> <P class = "list-Gruppe-item -text"> Wir bieten 24 * 7 Support. </ P> </ A> </ Div>

Versuchen »

Die Ergebnisse sind wie folgt:

Die Liste der Gruppen benutzerdefinierte Inhalte