Tabella bootstrap Hover Righe Esempio
Questo articolo descriverà:
- Come creare una tabella bootstrap con righe hovebili?
- Come aggiungere colori personalizzati alle righe del tavolo su mouse in bootstrap?
Come creare una tabella bootstrap con righe hovebili?
Bootstrap "bordo del tavolo" E "tavolo-alberno"Le classi vengono utilizzate per creare una tabella del confine con un effetto hover. IL "tavolo-alberno"La classe ha uno stile di effetto hover predefinito con il": Hover"Classe pseudo e"colore di sfondo"Proprietà con il valore"RGBA (0,0,0,.075)".
Esempio
Implementlo attraverso un esempio:
- Crea una tabella utilizzando HTML "
"Tag. Assegnalo il "tavolo","bordo del tavolo", E "tavolo-alberno" classi.
- IL ""Il tag viene utilizzato per menzionare l'intestazione del tavolo.
- Nell'esempio indicato di seguito, stiamo realizzando il corpo del tavolo utilizzando il ""Elemento.
- IL "
"I tag sono utilizzati per creare le righe della tabella," "I tag sono per le intestazioni e il" "I tag vengono utilizzati per aggiungere i dati della tabella. Html
Nome Jake Margherita Corso Informatica Fisica Paese stati Uniti Cina È osservato dalla GIF seguente, le file della tabella con l'effetto hover sono state create correttamente:
Come aggiungere colori personalizzati alle righe del tavolo su mouse in bootstrap?
Puoi anche specificare un colore hover in base al tuo bisogno. Per fare ciò, implementa il seguente codice nella sezione CSS:
.Table-Hover Tbody TR: Hover
Background-color: RGBA (228, 33, 205, 0.075);
Qui:
- IL ".tavolo-alberno"È la classe.
- "tbody"È l'elemento genitore del"
"Tag. - IL "TR: Hover"Viene utilizzato per applicare l'effetto hover a"
"Elemento. Produzione
In questo modo, viene creata la tabella bootstrap con l'effetto hover.
Conclusione
La tabella bootstrap con l'effetto hover viene creata usando il "tavolo-alberno" classe. Questa classe aggiungerà l'effetto hover sulle righe della tabella con "colore di sfondo"Proprietà con il valore"RGBA (0,0,0,.075)". Tuttavia, puoi personalizzare il colore del mouse usando CSS. Questo post ha descritto come aggiungere l'effetto hover alla tabella bootstrap.
L'effetto hover al tavolo bootstrap.
- IL "TR: Hover"Viene utilizzato per applicare l'effetto hover a"