Classi di tabelle in bootstrap 5 | Spiegato
Tavoli con uno stile base
Allo scopo di dare tavoli, uno stile di base che ha un certo imbottitura e divisori orizzontali usano il .tavolo classe. Ecco una dimostrazione di una tabella di base.
Come creare una tabella semplice usando bootstrap 5
Supponiamo di voler generare una tabella semplice, quindi è così.
Html
| Nome dell'autore | Categoria | Articoli pubblicati |
|---|---|---|
| Max William | Informatica | 267 |
| Ana James | Fisica | 100 |
| Harry Robertson | Biologia | 150 |
Nel codice sopra, stiamo posizionando la tabella all'interno di un contenitore div e quindi per generare la tabella stiamo usando il
| , | Per creare la tabella. Produzione Alla tabella è stato dato uno stile semplice. Tavolo con un bordo Allo scopo di aggiungere un bordo al tavolo devi usare il .bordo del tavolo classe. Come creare una tabella con bordo Creiamo un tavolo con un bordo. Html
La tabella generata qui è uguale a quella creata sopra con l'unica differenza che qui oltre a dargli uno stile di base che stiamo anche aggiungendo bordi usando il .Classe bordato da tavolo. Produzione I bordi sono stati aggiunti con successo al tavolo. Tavolo senza confini Un'altra cosa interessante che puoi fare usando Bootstrap 5 è fare tavoli completamente senza bordo e per farlo devi usare il .tavolo senza bordo classe. Come creare una tabella senza bordi in bootstrap 5 Ecco come genera un tavolo senza confini. Html
Il codice sopra genererà una tabella senza bordi con uno stile di base i.e. Avrà un certo imbottitura e divisori orizzontali ma non avrà confini. Produzione La classe funziona correttamente. Tavolo con righe a strisce Per abbellire il tavolo generando righe spogliate, usa il .strisce di tavolo classe. Come creare un tavolo con righe a strisce Per capire il funzionamento di questa classe consultare l'esempio di seguito. Html
Il codice sopra genererà una tabella con uno stile di base e righe a strisce. Produzione Un tavolo con righe a strisce è stato generato con successo. Tavolo hovello Se desideri dare alle tue righe, usa lo stato .tavolo-alberno classe. Quando l'utente porta il mouse sulle righe, verrà generato un effetto hover con un colore di sfondo grigio. Come creare una tabella hovebile Creiamo una tabella hovebile. Html
Utilizzando lo snippet di codice sopra è possibile generare facilmente una tabella semplicemente in stile con righe con un effetto hover. Produzione Abbiamo generato una tabella hovebile. Tabella con righe colorate Puoi anche aggiungere vari colori a più righe in una tabella usando le classi di colore fornite da Bootstrap 5. Come creare una tabella delle righe colorate in bootstrap 5 Supponiamo di voler dare a ogni riga un colore diverso, quindi segui l'esempio seguente. Html
Nel codice sopra, stiamo prima di tutto dare uno sfondo scuro alla testa del tavolo e quindi a ciascuna delle altre righe è stato assegnato un colore diverso. Produzione Un tavolo con righe colorate è stato generato con successo. Tutte le classi di tabelle associate ai colori in bootstrap 5 sono riportate di seguito.
Tabelle reattive Allo scopo di creare tabelle reattive che corrispondono alla larghezza dello schermo e alterano le loro dimensioni di conseguenza, utilizzare il .Rispondi al tavolo classe. Come creare una tabella reattiva usando bootstrap 5 Supponiamo di voler creare una tabella reattiva per la tua pagina web. Html
Nel codice sopra, per dimostrare il concetto di reattività abbiamo aggiunto più righe. Insieme a questo abbiamo anche generato un contenitore di div aggiuntivo e assegnato il .Classe di risposta alla tabella. Inoltre, il tavolo ha uno stile di base. Produzione La classe funziona correttamente. Di seguito sono riportate varie classi che aggiungono reattività alle tabelle a seconda della larghezza dello schermo. 1 ... Table-rispondi-SM Per larghezza dello schermo inferiore a 576px. 2… Table-rispondi-MD Per la larghezza dello schermo inferiore a 768px. 3… Table-rispondi-LG Per larghezza dello schermo inferiore a 992px. 4 ... Table-rispondi-XL Per larghezza dello schermo inferiore a 1200px. 5 ... Table-rispondi-xxl Per larghezza dello schermo inferiore a 1400px. Conclusione Le lezioni di tavolo in bootstrap 5 consentono di modellare i tavoli in modo molto semplice e veloce. Usando queste classi puoi dare a tabelle un po 'di imbottitura, divisori orizzontali, colori, bordo, stato al banco, ecc. Inoltre, puoi anche rendere le tue tabelle reattive usando le classi associate alle tabelle in bootstrap 5. In questo rapporto sono state discusse tutte le classi di tabelle insieme a esempi pertinenti.
|
|---|