Entrada destacada

Como usar enums en Android, kotlin

el
0

Personalizar los estilos de una tabla Bootstrap

el
Bootstrap es una biblioteca que nos ayuda en el diseño de páginas web, la forma más básica de utilizar esta librería es utilizando el conjunto de clases predefinidas que ya trae.
Por ejemplo, si queremos que un elemento ancla (<a></a>) tenga estilo de botón podemos hacer lo siguiente.

<a class="btn btn-primary">Hola</a>

Para documentarte más sobre bootstrap puedes ir a su página oficial https://getbootstrap.com/ o al tutorial https://www.w3schools.com/bootstrap/ .

 En esté tutorial explicaremos como modificar correctamente los estilos de bootstrap para hacer una combinación de estilos exitosa.

Importar bootstrap en html.

Podemos agregar bootstrap a nuestra página bootstrap de la siguiente manera.
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
Pero también podemos descargar los archivos desde https://getbootstrap.com/docs/4.3/getting-started/download/ y remplazar la url del atributo href con la ruta de donde guardemos el archivo de bootstrap.

Implementaremos el diseño de una tabla, para después hacerle unas modificaciones.

Para hacer uso correcto del grid de bootstrap todo elemento html debe estar dentro de un elemento contenedor con clase .container y también se recomienda que todo este dentro de un elemento con clase .row y .col, pero por ahora no se usaran.
<body>
 <div class="container">
  <table class="table table-striped table-hover">
   <thead class="thead-green">
    <tr>
     <th>PAÍS</th>
     <th>CAPITAL</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Argentina</td>
     <td>Buenos Aires</td>
    </tr>
    <tr>
     <td>Brasil</td>
     <td>Brasilia</td>
    </tr>
    <tr>
     <td>Canada</td>
     <td>Ottawa</td>
    </tr>
    <tr>
     <td>Perú</td>
     <td>Lima</td>
    </tr>
    <tr>
     <td>Uruguay</td>
     <td>Montevideo</td>
    </tr>
   </tbody>
  </table>
 </div> 
</body>

Clases de bootstrap para una tabla.

  • .table - estilos para un contenedor de una tabla.
  • .table-striped - estilos para una tabla con distinción de renglones.
  • .table-hover - estilos de tabla para sombrear el renglón sobre el que pasa el puntero del ratón.

El resultado será el siguiente, donde vemos una tabla ya con estilos sin esforzarnos tanto, pero que tal si queremos colores diferente o fuentes diferentes ¿Seria necesario crear todos los estilos desde cero?.

No es necesario reinventar la rueda, sólo hay que saber como hacer de manera correcta las modificaciones de los estilos existentes.

Lo más importante que no puedes olvidar es el ultimo estilo agregado es el que se aplica sobre el elemento, por ejemplo, si a un párrafo queremos cambiar el color de la fuente y tenemos dos reglas que lo hagan pero con diferente color, el último estilo cargado será el que le de el color.
Modificaciones a estilos de la tabla.
<style type="text/css">
  .container{
   text-align: center;
  }
  .table-striped tbody tr:nth-of-type(odd){
   background-color: rgb(237,245,245);
  }
  .table-hover tbody tr:hover{
   background-color: rgba(122,114,81, 0.7);
   color: rgb(112,24,78);
  }
  .thead-green{
   background-color: rgb(0, 99, 71);
   color: white;
  }
</style>

  • El primer cambio que se hace es centrar todo el contenido de los elementos con clase .container.
  • Si queremos cambiar el color de los renglones de la clase .table-striped es un tanto diferente ya que tenemos que usar una pseudo-clase tr:nth-of-type(odd) la cual selecciona los elementos <tr> impares (odd define que se seleccionaran de manera impar). Es una regla más elaborada que sólo puede ser determinada revisando directamente el estilo en el archivo bootstrap.css.
  • Para cambiar el color que de la selección de fila, se utiliza una regla parecida .table-hover tbody tr:hover también tenemos que utilizar un pseudo-clase para definir que para todo elemento con clase .table-hover, cuando el puntero del ratón pase sobre una fila los estilos sean: background-color: rgb(0, 99, 71);,  color: white;
  • Finalmente para cambiar el color del encabezado de la tabla implementamos una nueva clase .thead-green y en el estilo definimos el color del fondo y del texto.
Para que todo funcione correctamente, tenemos que observar en que orden suceden los procesos, la pseudo-clase :hover siempre se dará al final, ya que es algo que acciona el usuario, por lo tanto sus estilos deben estar casi al final de la hoja de estilos, si no se vera afectado, en este ejemplo si cambiamos el orden de los selectores, el color al pasar sobre la tabla nunca se notará.
Otra cosa importante a tomar en cuenta es que casi todas las pseudo-clases suceden después de cargar el documentos html, es por eso que el estilo para la clase .thead-green aún estando antes de las pseudo-clases se vera sobrescrita y también por esa razón en el selector de .table-striped se uso tbody para no afectar el thead.

Prueba cambiar el orden de los estilos para entender mejor lo antes descrito. 

El resultado puede verse a continuación.
See the Pen Tabla personalizada bootstrap by Jesus Tepec (@JesusTepec) on CodePen.


Comenta tus dudas en los comentarios.

Comentarios

Publicar un comentario