Artículos
Bootstrap

Resaltar filas de una tabla con Bootstrap

12/Ago/2015

Uno de los efectos que podemos asignar a una tabla es el de resaltar las filas cuando pasemos con el cursor sobre ellas, realizando una iluminación de las mismas. Así que aquí vamos a ver como podemos resaltar filas de una tabla con Bootstrap.

Lo primero que necesitamos es definir una tabla. Para ello utilizamos el siguiente código HTML:


...
País Capital Superficie Habitantes Descripción
España Madrid 504.645 km2 46,6 M

Vemos que utilizamos los elementos table, tr y td típicos de las tablas en HTML.

Lo siguiente es conocer el elemento que convierte una tabla HTML en una tabla Bootstrap. Esto lo conseguimos mediante la clase table. Esta clase se la asignamos al atributo class de la tabla


...
País Capital Superficie Habitantes Descripción
España Madrid 504.645 km2 46,6 M

Lo último que vamos a ver es como poder resaltar filas de una tabla con Bootstrap. Esto lo conseguimos mediante la clase table-hover. Lo que tenemos que hacer es incluir esta clase además de la anterior clase table ya añadida:


...
País Capital Superficie Habitantes Descripción
España Madrid 504.645 km2 46,6 M

El efecto que conseguiremos para resaltar filas de una tabla con Bootstrap será algo parecido a lo siguiente…

País Capital Superficie Habitantes Descripción
España Madrid 504.645 km2 46,6 M España, también denominado Reino de España, es un país soberano, miembro de la Unión Europea, constituido en Estado social y democrático de derecho y cuya forma de gobierno es la monarquía parlamentaria. Su territorio está organizado en diecisiete comunidades autónomas y dos ciudades autónomas, además de cincuenta provincias. Su capital es la villa de Madrid.
Italia Roma 301.338 km2 60,7 M Italia, oficialmente la República Italiana (en italiano: Repubblica Italiana), es un país soberano miembro de la Unión Europea. Es un país bicontinental; su territorio está en Europa del Sur y en el norte de África; su territorio europeo (99,97%) lo conforma la península itálica, el valle del Po y dos grandes islas en el mar Mediterráneo: Sicilia y Cerdeña; el territorio africano (0.03%) lo conforman las islas de Lampedusa, Lampione y Pantelaria.
Francia París 675.417 km2 66 M Francia, oficialmente República Francesa, es un país soberano, miembro de la Unión Europea, constituido en Estado social y democrático de derecho y cuya forma de gobierno es la república semipresidencialista. Su territorio, con capital en París, se extiende sobre una superficie total de 675 417 km² y el 1 de enero de 2015 contaba con 66.3 millones de habitantes, 64.2 millones en la Francia metropolitana y 2.1 millones en los cinco departamentos de ultramar.
Grecia Atenas 131.990 km2 10,7 M Grecia, oficialmente República Helénica, es un país soberano, miembro de la Unión Europea. En el país viven alrededor de once millones de habitantes que conforman una sociedad muy homogénea, donde la mayoría habla el idioma griego y practica el cristianismo ortodoxo. Atenas, la capital, es la ciudad más poblada del país. Otras ciudades como Salónica, El Pireo, Patras, Heraclión y Lárisa, son centros políticos, económicos y culturales a nivel regional.
Alemania Berlin 357.168 km2 81,2 M Alemania, oficialmente la República Federal de Alemania, es un país soberano centroeuropeo y miembro de la Unión Europea; se organiza como una república parlamentaria federal y su capital es Berlín. Su territorio, formado por dieciséis Bundesländer, limita al norte con el mar del Norte, Dinamarca y el mar Báltico; al este con Polonia y la República Checa; al sur con Austria y Suiza, y al oeste con Francia, Luxemburgo, Bélgica y los Países Bajos.

Código Fuente

Descárgate el código fuente de Resaltar filas de una tabla con Bootstrap
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Bootstrap

Disfruta también de nuestros artículos sobre Bootstrap en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Bootstrap

¿Te atreves a probar tus habilidades y conocimiento en Bootstrap con nuestro test?

Test Bootstrap
Suscribir
Notificar de
guest
0 Comentarios
Opiniones integradas
Ver todos los comentarios