TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare tabelle Bootstrap 5?

159

Bootstrap permette di creare bellissime tabelle utilizzando il framework CSS. La versione 4 ha alcune nuove classi per invertire il colore della tabella e rendere la tabella reattiva. Puoi facilmente diversi tipi di tabelle anche con l’ultima versione 5. In questo tutorial discuteremo varie possibilità di creare tabelle con Bootstrap 5. Puoi scaricare i file utilizzati in questo tutorial qui.

tag. Nel nostro esempio, creiamo un semplice foglio di voto in formato tabella con quattro nomi di studenti (in righe) e cinque materie con percentuale media (in colonne). Di seguito è riportato il codice per la tabella Bootstrap predefinita.

Per impostazione predefinita, l’unica classe CSS richiesta per creare una tabella Bootstrap è la classe "table" applicata direttamente all’elemento della tabella HTML. Non è necessario creare un

tag per l’inserimento di tabelle in Bootstrap. Il tag predefinito produrrà il seguente risultato:

Come creare tabelle Bootstrap 5?

Invertire i colori della tabella

Bootstrap 4 ti permette di invertire il colore della tua tabella aggiungendo “table-inverse" al

etichetta. Invertirà lo sfondo in scuro e il testo in colori chiari. Il codice dovrebbe essere simile al seguente:

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

La tabella inversa avrà uno sfondo molto scuro e attraente come mostrato di seguito:

Come creare tabelle Bootstrap 5?

Tabella di intestazione inversa

Nel caso precedente la classe “table-inverse” era applicata all’intera tabella. Bootstrap 4 consente anche di invertire solo lo sfondo dell’intestazione e i colori del testo. Per invertire l’intestazione basta aggiungere la classe "thead-inverse" al

etichetta.

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

E la nostra tabella del foglio dei segni avrà una riga di intestazione nera come di seguito:

Come creare tabelle Bootstrap 5?

Non è tutto!!! Ci sono molte più opzioni con Bootstrap. Creiamo altre varianti.

Tabella Bootstrap 4 a righe

La tabella a righe consente di creare colori alternativi per le righe. Basta aggiungere "tabella a strisce" alla classe "tabella" esistente e la tabella avrà un motivo a strisce. Il colore di sfondo grigio chiaro verrà applicato a tutte le righe dispari a partire dalla prima riga.

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

La tabella a strisce è per lo più preferita per differenziare le righe e mostrare il contenuto ai visitatori.

Come creare tabelle Bootstrap 5?

Tabella con bordi bootstrap

Questo aggiungerà semplicemente il bordo alla tabella predefinita. Ciò di cui hai bisogno è aggiungere la classe "table-bordered" alla classe "table" esistente.

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

La nostra tabella dei fogli di contrassegno con bordo dovrebbe apparire come di seguito:

Come creare tabelle Bootstrap 5?

Puoi anche creare facilmente la tabella bordata con strisce sulle righe.

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

Tabella con effetti al passaggio del mouse sulle righe

Che ne dici di aggiungere effetti al passaggio del mouse al tuo tavolo? La classe "table-hover" lo farà per te. Passa il mouse sulla tabella per vedere la riga corrispondente evidenziata con un colore di sfondo grigio chiaro.

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

Di seguito è riportato come dovrebbe apparire la tua tabella quando sposti il ​​mouse sulla seconda riga.

Come creare tabelle Bootstrap 5?

Tabella bootstrap reattiva per dispositivi inferiori a 768 pixel

Creare una tabella reattiva in Bootstrap 4 è molto semplice. Non è necessario aggiungere altro

per aggiungere reattività. Basta inserire la classe "table-responsive", una barra di scorrimento orizzontale verrà automaticamente aggiunta alla tabella quando visualizzata sul browser con una dimensione dello schermo inferiore a 768 pixel.

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

Ecco come sarà il nostro tavolo responsive. Ricorda che la barra di scorrimento orizzontale apparirà solo quando la tabella viene visualizzata con una dimensione dello schermo inferiore a 768 pixel. Altrimenti non troverai alcuna differenza rispetto alla normale tabella Bootstrap.

Come creare tabelle Bootstrap 5?

Tabella Bootstrap con testo compresso

A volte è necessario comprimere l’altezza del tavolo per ridurre lo spazio occupato. Bootstrap consente di farlo aggiungendo la classe "table-sm" a una classe "table" esistente come mostrato di seguito:

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

Questo rimuoverà l’imbottitura e renderà compatta l’altezza del tavolo.

Come creare tabelle Bootstrap 5?

Creazione di una tabella bootstrap con colore di sfondo

A partire da ora, ciò di cui abbiamo discusso è creare una tabella semplice o avere uno sfondo grigio chiaro predefinito per le righe. Bootstrap consente anche di colorare le celle e le righe della tabella per renderlo bello. Puoi evidenziare qualsiasi riga o cella della tabella in cinque colori diversi. Esistono due serie di classi CSS che ti aiutano ad aggiungere i colori di sfondo: una sono le classi contestuali e l’altra sono le classi di utilità di sfondo. La tabella seguente spiega le diverse opzioni disponibili:

Classi contestuali della tabella
tabella-attivo Colore al passaggio del mouse grigio chiaro
successo al tavolo Successo verde chiaro o azione positiva
info-tabella Azzurro per messaggio informativo
tabella-avvertimento Giallo chiaro per indicare l’avvertimento
pericolo-tavola Rosso chiaro per indicare il pericolo
tabella-primaria Azzurro per indicare il colore primario in Bootstrap
tabella-secondaria Rosso chiaro per indicare il pericolo
lampada da tavolo Grigio chiaro per indicare nessun colore
tavolo-scuro Nero chiaro per indicare il buio
Utilità in background / Classi contestuali
bg-primario Blu medio come colore primario
bg-successo Verde bosco per il successo
bg-avvertimento

Colore verde libero di parola  per l’avvertimento

bg-info Verde mare chiaro per informazioni
bg-pericolo Rosso (cinabro) per pericolo
bg-luce Solitudine per la luce
bg-dark Colore miraggio per il buio
bg-secondario Colore alluminio per il secondario

Ricorda che queste classi possono essere applicate a singole righe e celle della tabella Bootstrap in qualsiasi combinazione.

Righe colorate con classi contestuali

Applichiamo le classi contestuali sulla nostra tabella dei fogli di valutazione per vederle in azione. Il codice seguente applica la classe "table-active" alla prima riga della tabella per cambiare il colore di sfondo in grigio chiaro.

<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>

Di seguito è riportato come apparirà la tabella completa quando applicherai le classi "table-success", "table-warning" e "table-pericolo" alla seconda, terza e quarta

elementi della tavola.

Come creare tabelle Bootstrap 5?

Righe colorate con colori di sfondo

Analogamente alle classi contestuali di tabella, puoi applicare i colori di sfondo alle righe utilizzando le classi contestuali di sfondo.

<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>

Di seguito è riportata una tabella accattivante con "bg-success", "bg-danger", "bg-warning", "bg-info" e altre classi di utilità in background applicate alle righe.

Come creare tabelle Bootstrap 5?

Celle colorate con classi contestuali

Ogni cella di una tabella Bootstrap può essere applicata con una delle classi contestuali per evidenziarla da altre celle. Questo sarà davvero utile quando hai una tabella più grande e vuoi evidenziare solo poche celle. Il codice seguente mostra l’applicazione della classe contestuale "table-active" a una cella di tabella.

<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>

La tabella sottostante ha quattro celle applicate casualmente con diversi colori di sfondo.

Come creare tabelle Bootstrap 5?

Righe e celle colorate con colori di sfondo e classi contestuali

Infine puoi applicare la classe contestuale della tabella e la classe contestuale dello sfondo in qualsiasi combinazione per creare colori di sfondo diversi per righe e celle.

<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>

Ecco come apparirà la tabella di esempio con vari colori applicati a righe e celle.

Come creare tabelle Bootstrap 5?


Impara Bootstrap 5 (Indice )


Fonte di registrazione: www.webnots.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More