Das beste Bootstrap Listengruppen-Tutorial im Jahr 2024. In diesem Tutorial können Sie
Beispiele,Fügen Sie ein Abzeichen auf der Liste der Gruppen,Beispiele,Fügen Sie einen Link zur Liste der Gruppen,Beispiele,Fügen Sie benutzerdefinierte Inhalte in die Liste der Gruppen,Beispiele, lernen
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:
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:
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:
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: