TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag Bootstrap 5 -tabeller?

2

Bootstrap gör det möjligt att skapa vackra tabeller med hjälp av CSS -ramverket. Version 4 har några nya klasser för att vända bordets färg och göra bordet lyhörd. Du kan enkelt olika typer av tabeller med den senaste versionen 5 också. I denna handledning kommer vi att diskutera olika möjligheter att skapa tabeller med Bootstrap 5. Du kan ladda ner filerna som används i den här självstudien här.

taggar. I vårt exempel, låt oss skapa enkla markblad i ett tabellformat med fyra elevnamn (i rader) och fem ämnen med genomsnittlig procentandel (i kolumner). Nedan finns koden för standard Bootstrap -tabell.

Som standard är den enda CSS -klassen som krävs för att skapa en Bootstrap -tabell klassen "tabell" som tillämpas direkt på HTML -tabellelementet. Du behöver inte skapa en

tag för att infoga tabeller i Bootstrap. Standardtaggen ger följande resultat:

Hur skapar jag Bootstrap 5 -tabeller?

Invertera tabellfärgerna

Bootstrap 4 låter dig vända färgen på ditt bord genom att lägga till "tabellinvers" till

märka. Det kommer att vända bakgrunden till mörk och texten till ljusa färger. Koden ska se ut nedan:

<table class="table table-inverse"> All content remains same here similar to default table. <table>

Inversbordet kommer att ha en mycket mörk och attraktiv bakgrund enligt nedan:

Hur skapar jag Bootstrap 5 -tabeller?

Invers Header Table

I tidigare fall tillämpades "tabellinvers" -klassen på hela tabellen. Bootstrap 4 gör det också möjligt att bara invertera rubrikens bakgrund och textfärger. För att invertera rubriken lägger du bara till "thead-inverse" -klassen till

märka.

<table class="table"> <thead class="thead-inverse"> </thead> </table>

Och vårt märkblad kommer att ha en svart rubrikrad som nedan:

Hur skapar jag Bootstrap 5 -tabeller?

Det är inte allt!!! Det finns många fler alternativ med Bootstrap. Låt oss skapa några fler varianter.

Randig Bootstrap 4 Bord

Randigt bord låter dig skapa alternativa färger för raderna. Lägg bara till "tabellrandig" i den befintliga "tabell" -klassen "så kommer bordet att få mönster. Den ljusgrå bakgrundsfärgen tillämpas på alla udda numrerade rader från den första raden.

<table class="table table-striped"> </table>

Randigt bord är mest föredraget för att skilja raderna och visa innehållet för besökare.

Hur skapar jag Bootstrap 5 -tabeller?

Bootstrap kantad tabell

Den här lägger enkelt till gränsen till standardtabellen. Vad du behöver är att lägga till "tabellgränsad" klass till den befintliga "tabell" -klassen.

<table class="table table-bordered"> </table>

Vårt märkblad med kant bör se ut nedan:

Hur skapar jag Bootstrap 5 -tabeller?

Du kan också enkelt skapa det kantade bordet med ränder på rader.

<table class="table table-striped table-bordered"> </table>

Tabell med Hover -effekter på rader

Vad sägs om att lägga till sväveffekter till ditt bord? Klassen "bordsvävare" kommer att göra det åt dig. För musen över bordet för att se motsvarande rad markeras med ljusgrå bakgrundsfärg.

<table class="table table-hover"> </table>

Nedan ser du hur ditt bord ska se ut när du flyttar musen på andra raden.

Hur skapar jag Bootstrap 5 -tabeller?

Responsiv Bootstrap -tabell för mindre än 768 pixelenheter

Att skapa en responsiv tabell i Bootstrap 4 är väldigt enkelt. Du behöver inte lägga till ytterligare

för att lägga till lyhördhet. Lägg bara in "tabellresponsiv" klass, en horisontell rullningslist läggs till automatiskt i tabellen när den visas i webbläsaren under 768 pixlar skärmstorlek.

<table class="table table-responsive"> </table>

Så här kommer vårt responsiva bord att se ut. Kom ihåg att den horisontella rullningsfältet bara visas när tabellen visas med en skärmstorlek som är mindre än 768 pixlar. Annars hittar du ingen skillnad jämfört med vanligt Bootstrap -bord.

Hur skapar jag Bootstrap 5 -tabeller?

Bootstrap -bord med komprimerad text

Ibland är det nödvändigt att komprimera höjden på bordet för att minska det upptagna utrymmet. Bootstrap tillåter detta genom att lägga till "tabell-sm" -klassen till en befintlig "tabell" -klass enligt nedan:

<table class="table table-sm"> </table>

Detta kommer att ta bort vadderingen och göra bordets höjd kompakt.

Hur skapar jag Bootstrap 5 -tabeller?

Skapa Bootstrap -bord med bakgrundsfärg

Från och med nu är det vi har diskuterat att skapa ett enkelt bord eller ha standard ljusgrå bakgrund för rader. Bootstrap gör det också möjligt att färga dina bordceller och rader för att göra det vackert. Du kan markera alla rader eller celler i ditt bord i fem olika färger. Det finns två uppsättningar CSS -klasser som hjälper dig att lägga till bakgrundsfärger – en är kontextuella klasser och en annan är bakgrundsverktygsklasser. Tabellen nedan förklarar olika tillgängliga alternativ:

Tabellkontextklasser
tabellaktiv Ljusgrå svävfärg
bordssuccé Ljusgrön framgång eller positiv handling
tabell-info Ljusblå för informationsmeddelande
tabellvarning Ljusgul för att indikera varning
bord-fara Ljusröd för att indikera fara
tabell-primär Ljusblå för att ange primärfärg i Bootstrap
bordssekundär Ljusröd för att indikera fara
bordsljus Ljusgrå för att indikera ingen färg
bordsmörk Ljus svart för att indikera mörk
Bakgrundsverktyg / kontextuella klasser
bg-primär Mellanblå som primärfärg
bg-framgång Skogsgrönt för framgång
bg-varning

Yttrandefrihet grön färg  för varning

bg-info Ljus havsgrön för information
bg-fara Röd (Cinnabar) för fara
bg-ljus Ensamhet för ljus
bg-mörk Mirage -färg för mörk
bg-sekundär Aluminiumfärg för sekundär

Kom ihåg att dessa klasser kan tillämpas på enskilda rader och celler i Bootstrap -tabellen i valfri kombination.

Färgade rader med kontextuella klasser

Låt oss tillämpa de kontextuella klasserna på vårt märkblad för att se dem i handling. Koden nedan gäller "tabellaktiv" klass på första raden i tabellen för att ändra bakgrundsfärgen till ljusgrå.

<table class="table"> <tr class="table-active"> <td>Thomas</td> <td>80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td>79</td> </tr> <tr> </table>

Nedan ser du hur hela tabellen kommer att se ut när du tillämpar klasserna "bordssuccé", "tabellvarning" och "tabellfara" på andra, tredje och fjärde

element i bordet.

Hur skapar jag Bootstrap 5 -tabeller?

Färgade rader med bakgrundsfärger

I likhet med tabellkontextuella klasser kan du använda bakgrundsfärger på rader med bakgrundskontextklasser.

<table class="table"> <tr class="bg-success"> <td>Thomas</td> <td>80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td>79</td> </tr> <tr> </table>

Nedan visas en iögonfallande tabell med "bg-framgång", "bg-fara", "bg-varning", "bg-info" och andra bakgrundsverktygsklasser som tillämpas på raderna.

Hur skapar jag Bootstrap 5 -tabeller?

Färgade celler med kontextuella klasser

Varje cell i en Bootstrap -tabell kan tillämpas med en av de kontextuella klasserna för att markera den från andra celler. Detta kommer att vara väldigt användbart när du har ett större bord och bara vill markera några få celler. Koden nedan visar tillämpningen av den "tabellaktiva" kontextuella klassen på en tabellcell.

<table class="table"> <tr> <td>Thomas</td> <td class="table-active">80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td>79</td> </tr> <tr> </table>

Tabellen nedan har fyra celler applicerade med olika bakgrundsfärger slumpmässigt.

Hur skapar jag Bootstrap 5 -tabeller?

Färgade rader och celler med bakgrundsfärger och kontextuella klasser

Slutligen kan du tillämpa tabellkontextuell klass och bakgrundskontextklass i valfri kombination för att göra olika bakgrundsfärger för rader och celler.

<table class="table"> <tr class="table-active"> <td>Thomas</td> <td class="table-info">80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td class="bg-success">79</td> </tr> <tr> </table>

Så här kommer exempel tabellen att se ut med olika färger applicerade för rader och celler.

Hur skapar jag Bootstrap 5 -tabeller?


Lär dig Bootstrap 5 (Index )


Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer