Listegruppestyling i Bootstrap 5

Listegrupper på et nettsted samler sammenhengende innhold, slik at det blir lettere for brukeren å navigere gjennom nettinnholdet. Å legge til vanlige listegrupper kan være litt kjedelige, men å style dem på forskjellige måter vil forbedre skjønnheten i webdesignet. Fra å lage en grunnleggende listegruppe til å style den på flere måter har blitt diskutert i denne bloggen. Hold deg til slutten for å lære om listegruppestyling i Bootstrap 5.

Hvordan lage en listegruppe

For å opprette en liste, lag en uordnet liste og tilordne

element .listegruppe klasse og tilordne hvert listeelement .Liste-gruppe-element klasse.

Html



• Punkt 1


• Punkt 2


• Punkt 3



Ovennevnte kode vil generere en listegruppe som består av tre listeartikler.

Produksjon

Ovennevnte utgang viser en grunnleggende listegruppe.

Hvordan tilordne aktive og funksjonshemmede tilstander til en listegruppe

Hvis du vil definere aktiv tilstand for en gjeldende listeelement og en funksjonshemmede til en uklarbar vare, så bare tilordne det respektive listeelementet Active og deaktiverte tilstandene.

Html



• Punkt 1


• Punkt 2


• Punkt 3



Her har vi tildelt en aktiv stat til det første elementet og en funksjonshemmet tilstand til det tredje elementet. Funksjonshemmede tilstand gjør bare ikke en koblet gjenstand som ikke er klikkelig, men eliminerer også svevetffekten.

Produksjon

Slik tildeler du aktive og funksjonshemmede tilstander for å liste opp elementer i en listegruppe.

Hvordan tilordne lenker til liste elementer i en listegruppe

Hvis du ønsker å omdirigere brukeren din til en annen webside eller kilde ved hjelp av elementer i en listegruppe, i stedet for å lage en uordnet liste, kan du lage en div og tilordne den .listegruppe klasse og hekker alle koblingene som er til stede i ankerkodene i den diven. Dessuten, tilordne .Liste-gruppe-elementer, og .List-Group-Item-Action klasser til ankerkodene som er til stede inne i Div.

Html


Punkt 1
Punkt 2
Punkt 3


Listegruppen som er opprettet når koden ovenfor blir utført, vil være hosofile og hvert element i gruppen vil være koblet til en annen kilde.

Produksjon

Listeartikler ble koblet med suksess.

Hvordan lage en grenseløs listegruppe

Hvis du ønsker å fjerne grensene fra en listegruppe, så bare tilordne .listegruppe-flush klasse til

element sammen med .listegruppe klasse.

Html



• Punkt 1


• Punkt 2


• Punkt 3



Ovennevnte kode vil generere en listegruppe som ikke har noen grenser.

Produksjon

Slik lager du en grenseløs listegruppe.

Hvordan du kan nummerere elementer i en listegruppe

For å nummerere elementene i en listegruppe, bruk .listegruppe-nummerert klasse.

Html



• Punkt 1


• Punkt 2


• Punkt 3



Kodebiten som er angitt ovenfor vil gi tall til hvert av elementene som er til stede inne i DIV.

Produksjon

Listeartiklene ble nummerert.

Hvordan justere en listegruppe horisontalt

En listegruppe som standard justeres vertikalt, men hvis du foretrekker å justere den horisontalt, så bruk .List-Group-Horizontal klasse.

Html



• Punkt 1


• Punkt 2


• Punkt 3



De .listegruppe-horizontal klasse ble tildelt

element sammen med .listegruppeklasse, derfor vil listegruppen generert som et resultat bli justert horisontalt.

Produksjon

Utgangen viser en horisontal listegruppe.

Hvordan fargeliste elementer i en listegruppe

En morsom ting du gjør for å lage listegruppen din stilig er å bruke fargeverktøyklassene for å gi farger for å liste opp elementer fra listegruppen.

Html



• Punkt 1


• Punkt 2


• Punkt 3


• Punkt 4


• Punkt 5



Det er totalt 5 listeelementer som blir generert i koden ovenfor, og hvert av disse elementene har fått tildelt en annen farge ved hjelp av .Liste-gruppe-element-primary, .Listegruppe-varing, .Liste-gruppe-element-info, .Liste-gruppe-element-suksess, og .Liste-gruppe-element-danger henholdsvis klasser.

Produksjon

Utgangen viser fargede listeelementer.

Hvis du ønsker å lage koblede listeelementer og gi dem farger også, så følg kodebiten nedenfor.

Html


Punkt 1
Punkt 2
Punkt 3
Punkt 4
Punkt 5


For å koble listeelementene lager vi ganske enkelt en DIV -beholder og hekker forskjellige ankerkoder inne i den containeren som vil koble listeelementene. Dessuten har hver lenke fått en annen farge.

Produksjon

Listegruppen vist ovenfor har fargede og koblede listeelementer.

Konklusjon

En listegruppe kan for eksempel styles ved hjelp av forskjellige Bootstrap 5 -klasser .listegruppe-flush Oppretter grenseløs listegruppe, .listegruppe-nummerert gir nummer til elementene i listegruppen, og .List-Group-Horizontal justerer en listegruppe horisontalt. For å gi farger til elementene i en listegruppe, bruk dessuten fargeklasser tilknyttet listegrupper som for eksempel .Liste-gruppe-element-primary, .Liste-gruppe-element-info, .Liste-gruppe-element-danger, etc. Dette og mye mer om listegruppeoppretting og styling har blitt diskutert i denne bloggen.