Bordklasser i Bootstrap 5 | Forklart

Produksjon

Bordet fikk en enkel stil.

Bord med en grense

For å legge en grense til bordet ditt, må du bruke .Bordskravet klasse.

Hvordan lage et bord med kant

La oss lage et bord med en grense.

Html

Bordet som genereres her er det samme som den som er opprettet ovenfor med den eneste forskjellen som her bortsett fra å gi den en grunnleggende stil vi også legger til grenser ved å bruke .Bordskravet klasse.

Produksjon

Grenser ble lagt til med suksess til bordet.

Bord uten grenser

En annen interessant ting du kan gjøre ved hjelp av Bootstrap 5 er å lage helt grenseløse bord, og for å gjøre det må du bruke .Bord-grenseløs klasse.

Hvordan lage et grenseløst bord i bootstrap 5

Slik genererer du et bord uten grenser.

Html

Koden over vil generere en grenseløs bord med en grunnleggende stil i.e. Det vil ha en viss polstring og horisontale delere, men det vil ikke ha noen grenser.

Produksjon

Klassen fungerer som den skal.

Bord med stripete rader

For å forskjønne bordet ditt ved å generere strippede rader, bruk .Bordstripet klasse.

Hvordan lage et bord med stripete rader

For å forstå arbeidet med denne klassen, konsulter eksemplet nedenfor.

Html

Koden over vil generere en tabell med en grunnleggende stil og stripete rader.

Produksjon

Et bord med stripete rader ble generert med suksess.

Hovelbart bord

Hvis du ønsker å gi radene dine svevetilstand, så bruk .bord-hover klasse. Når brukeren bringer musen over på radene, vil en svevdeffekt med en grå bakgrunnsfarge genereres.

Hvordan lage et hissbar bord

La oss lage et hissbar bord.

Html

Ved hjelp av kodebiten ovenfor kan du enkelt generere et ganske enkelt stylet bord med rader som har en sveveeffekt.

Produksjon

Vi har generert et hisselig bord.

Bord med fargede rader

Du kan også legge til forskjellige farger til flere rader i en tabell ved hjelp av fargeklassene levert av Bootstrap 5.

Hvordan lage en farget raderbord i bootstrap 5

Anta at du vil gi hver rad en annen farge og følg eksemplet nedenfor.

Html

I koden over gir vi først og fremst en mørk bakgrunn til bordhodet, og deretter har hver av de andre radene fått tildelt en annen farge.

Produksjon

Et bord med fargede rader ble generert vellykket.

Alle bordklassene tilknyttet farger i Bootstrap 5 er gitt nedenfor.

Responsive tabeller

For å lage responsive tabeller som tilsvarer skjermbredden og endre størrelsen deretter, bruk .Tabell-responsive klasse.

Hvordan lage et responsivt tabell ved hjelp av bootstrap 5

Anta at du vil bygge et responsivt tabell for websiden din.

Html

I ovennevnte kode, for å demonstrere begrepet lydhørhet har vi lagt til flere rader. Sammen med dette har vi også generert en ekstra div container og tildelt den .Tabell-responsiv klasse. Dessuten har tabellen en grunnleggende stil.

Produksjon

Klassen fungerer som den skal.

Ulike klasser som gir respons på tabellene, avhengig av skjermbredde er gitt nedenfor.

1… Tabell-responsiv-SM

For skjermbredde mindre enn 576px.

2… Tabell-responsive-MD

For skjermbredde lavere enn 768px.

3… Tabell-responsive-LG

For skjermbredde mindre enn 992px.

4… Tabell-responsive-xl

For skjermbredde mindre enn 1200px.

5… Tabell-responsive-xxl

For skjermbredde mindre enn 1400px.

Konklusjon

Bordklasser i Bootstrap 5 lar deg style bord på en veldig enkel og rask måte. Ved hjelp av disse klassene kan du gi tabeller litt polstring, horisontale skiller, farger, grense, svevetilstand osv. Dessuten kan du også gjøre bordene dine responsive ved å bruke klassene tilknyttet tabeller i Bootstrap 5. Alle tabellklassene sammen med relevante eksempler har blitt diskutert i denne rapporten.

• « Tekstfarger og bakgrunnsfarger klasser i Bootstrap 5 | Forklart
• Valgfunksjoner i Sass | Forklart »