Bordklasser i Bootstrap 5 | Forklart
Tabeller med en grunnleggende stil
For å gi tabeller bruker en grunnleggende stil som har en viss polstring og horisontale delere .bord klasse. Her er en demonstrasjon av en grunnleggende tabell.
Hvordan lage en enkel tabell ved hjelp av Bootstrap 5
Anta at du vil generere et enkelt bord, så er det slik det gjøres.
Html
| Forfatternavn | Kategori | Artikler publisert |
|---|---|---|
| Max William | Informatikk | 267 |
| Ana James | Fysikk | 100 |
| Harry Robertson | Biologi | 150 |
I koden ovenfor plasserer vi bordet inne i en DIV -beholder og deretter for å generere tabellen bruker vi
| , | For å lage tabellen. 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.
|
|---|