Elenco Styling Group in Bootstrap 5

Elenca i gruppi in un sito Web assemblare il contenuto correlato in modo che diventi più facile per l'utente navigare tramite il contenuto Web. L'aggiunta di semplici gruppi di elenchi può essere un po 'noioso, tuttavia acconciarli in vari modi migliorerà la bellezza del web design. Dalla creazione di un gruppo di elenco di base allo stile in diversi modi sono stati discussi in questo blog. Attenersi alla fine per conoscere lo stile del gruppo di elenchi in bootstrap 5.

Come creare un gruppo di elenco

Per creare un elenco, crea un elenco non ordinato e assegna il

elemento il .gruppo di elenco classe e assegnare ogni elemento dell'elenco il .Elenco-Group-Item classe.

Html



• Articolo 1


• Articolo 2


• Articolo 3



Il codice sopra generato genererà un gruppo di elenco che consiste in tre elementi di elenco.

Produzione

L'output sopra mostra un gruppo di elenco di base.

Come assegnare gli stati attivi e disabili a un gruppo di elenco

Se si desidera definire lo stato attivo per un elemento dell'elenco corrente e uno stato disabilitato per un elemento non chiuso, quindi assegna semplicemente l'elemento dell'elenco degli stati attivi e disabilitati.

Html



• Articolo 1


• Articolo 2


• Articolo 3



Qui abbiamo assegnato uno stato attivo al primo elemento e uno stato disabile al terzo elemento. Lo stato disabilitato non rende un oggetto collegato in modo chring, ma elimina anche l'effetto hover.

Produzione

Questo è il modo in cui si assegnano gli stati attivi e disabili per elencare gli elementi in un gruppo di elenco.

Come assegnare collegamenti agli elementi di elenco in un gruppo di elenco

Se si desidera reindirizzare l'utente a un'altra pagina Web o fonte utilizzando gli elementi in un gruppo di elenco, invece di creare un elenco non ordinato, crea un div e assegnalo il .gruppo di elenco classe e nidificare tutti i collegamenti presenti nei tag di ancoraggio all'interno di quel div. Inoltre, assegna il .Elenco-Group-Items, E .Elenco-Group-Item-Action Classi per i tag di ancoraggio presenti all'interno del div.

Html


Articolo 1
Articolo 2
Articolo 3


Il gruppo di elenco creato quando viene eseguito il codice sopra sarà howlable e ogni elemento del gruppo sarà collegato a un'altra sorgente.

Produzione

Gli elementi degli elenchi sono stati collegati con successo.

Come creare un gruppo di elenchi senza confini

Se si desidera rimuovere i bordi da un gruppo di elenco, quindi assegna semplicemente il .flush-group-group classe per il

elemento insieme al .gruppo di elenco classe.

Html



• Articolo 1


• Articolo 2


• Articolo 3



Il codice sopra genere genererà un gruppo di elenco che non ha confini.

Produzione

Ecco come crei un gruppo di elenchi senza bordi.

Come numerare gli elementi in un gruppo di elenco

Ai fini della numerazione degli elementi in un gruppo di elenco utilizzare il .Elenco-Group-numerato classe.

Html



• Articolo 1


• Articolo 2


• Articolo 3



Lo snippet di codice sopra indicato darà numeri a ciascuno degli elementi presenti all'interno del div.

Produzione

Gli elementi dell'elenco erano numerati.

Come allineare un gruppo di elenco in orizzontale

Un gruppo di elenco per impostazione predefinita è allineato verticalmente ma se si preferisce allinearlo in orizzontale, quindi utilizzare il .elenco-group-orizontale classe.

Html



• Articolo 1


• Articolo 2


• Articolo 3



IL .La classe del gruppo elenco-orizzontale è stata assegnata al

elemento insieme al .Classe di gruppi di elenco, pertanto, il gruppo di elenco generato come risultato sarà allineato orizzontale.

Produzione

L'output visualizza un gruppo di elenco orizzontali.

Come colorare elenchi elenchi in un gruppo di elenco

Una cosa divertente che fai per rendere elencato il tuo gruppo elenco è utilizzare le classi di utilità dei colori per fornire colori per elencare gli elementi del gruppo di elenco.

Html



• Articolo 1


• Articolo 2


• Articolo 3


• Articolo 4


• Articolo 5



Ci sono un totale di 5 elementi elenchi generati nel codice sopra e a ciascuno di questi elementi è stato assegnato un colore diverso usando il .Elenco-Group-Item-Primary, .Elenco-Group-Item-Warning, .Elenco-Group-Item-Info, .Elenco-Group-Item-Success, E .Elenco-Group-Item-Danger lezioni rispettivamente.

Produzione

L'output mostra elementi di elenco colorati.

Se si desidera creare elementi elenchi collegati e fornire anche loro colori, segui lo snippet di codice di seguito.

Html


Articolo 1
Articolo 2
Articolo 3
Articolo 4
Articolo 5


Per collegare gli elementi dell'elenco stiamo semplicemente realizzando un contenitore di div e nidificando vari tag di ancoraggio all'interno di quel contenitore che collegherà gli elementi dell'elenco. Inoltre, ogni collegamento è stato fornito di un colore diverso.

Produzione

Il gruppo di elenco mostrato sopra ha elementi colorati e collegati.

Conclusione

Un gruppo di elenco può essere disegnato utilizzando varie classi bootstrap 5 ad esempio .flush-group-group crea un gruppo di elenchi senza confini, .Elenco-Group-numerato dà il numero ai elementi del gruppo di elenco e .elenco-group-orizontale Allinea un gruppo di elenco in orizzontale. Inoltre, per fornire colori agli elementi di un gruppo di elenco utilizzare le classi di colore associate a gruppi di elenchi come .Elenco-Group-Item-Primary, .Elenco-Group-Item-Info, .Elenco-Group-Item-Danger, eccetera. Questo e molto altro sulla creazione e lo stile del gruppo di elenchi sono stati discussi in questo blog.