Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
Bulma admite muchos tipos de tablas, como una tabla bordeada, una tabla despojada, una tabla flotante, una tabla desplazable, etc. Con solo agregar algunas clases de Bulma al HTML, podemos lograr tablas muy interactivas.
Sintaxis para usar variables:
$property-name: Property-value;
Variable utilizada:
| Nombre | Descripción | Escribe | Valor | Valor calculado | Tipo calculado |
|---|---|---|---|---|---|
| $tabla-color | Esta propiedad se utiliza para dar color a la tabla. | variable | $texto fuerte | hsl(0, 0%, 21%) | color |
| $tabla-fondo-color | Esta propiedad se utiliza para proporcionar color de fondo a la tabla. | variable | $esquema-principal | hsl(0, 0%, 100%) | color |
| $table-cell-border | Esta propiedad se utiliza para proporcionar una celda de borde a la tabla. | Talla | 1px borde $sólido | ||
| $table-cell-border-with | Esta propiedad se utiliza para definir el ancho del borde de la tabla. | Talla | 0 0 1px | ||
| $table-cell-padding | Esta propiedad se utiliza para definir el relleno de la celda en la tabla. | Talla | 0.5em 0.75em | ||
| $table-cell-heading-color | Esta propiedad se utiliza para proporcionar color a la celda de encabezado de la tabla. | variable | $texto fuerte | hsl(0, 0%, 21%) | color |
| $table-cell-text-align | Esta propiedad se utiliza para alinear el texto en el centro de la celda de la tabla. | cuerda | izquierda | ||
| $table-head-cell-border-with | Esta propiedad se utiliza para definir el ancho del borde de la celda principal. | Talla | 0 0 2 píxeles | ||
| $table-head-cell-color | Esta propiedad se utiliza para definir el color de la celda principal de la tabla. | variable | $texto fuerte | hsl(0, 0%, 21%) | color |
| $table-foot-cell-border-with | Esta propiedad se utiliza para definir el ancho de la celda de pie en la tabla. | Talla | 2 píxeles 0 0 | ||
| $pie-de-mesa-celda-color | Esta propiedad se utiliza para definir el color del pie de la celda. | variable | $texto fuerte | hsl(0, 0%, 21%) | color |
| $table-head-background-color | Esta propiedad se utiliza para proporcionar el color de fondo del encabezado de la tabla. | cuerda | transparente | ||
| $tabla-cuerpo-fondo-color | Esta propiedad se utiliza para proporcionar el color de fondo del cuerpo. | cuerda | transparente | ||
| $pie-de-mesa-color-de-fondo | Esta propiedad se utiliza para proporcionar color de fondo a la tabla de pies. | cuerda | transparente | ||
| $table-row-hover-background-color | Esta propiedad se usa para proporcionar color de fondo a la tabla de filas al pasar el mouse por encima. | variable | $esquema-principal-bis | hsl(0, 0%, 98%) | color |
| $table-row-active-background-color | Esta propiedad se utiliza para proporcionar color de fondo a la fila activa. | variable | $primaria | hsl(171, 100%, 41%) | color |
| $table-row-active-color | Esta propiedad se utiliza para dar color a la fila activa de la tabla. | variable | $primary-invert | #fff | color |
| $table-rayed-row-even-background-color | Esta propiedad se utiliza para proporcionar color de fondo a la fila par. | variable | $esquema-principal-bis | hsl(0, 0%, 98%) | color |
| $table-rayed-row-even-hover-background-color | Esta propiedad se usa para proporcionar color de fondo a las filas pares al pasar el mouse por encima. | variable | $esquema-principal-ter | hsl(0, 0%, 96%) | color |
| $tabla-colores | Esta propiedad se utiliza para dar color a la tabla. | variable | $colores | colores bulma | mapa |
Ejemplo 1: en el siguiente código, utilizaremos la variable anterior para demostrar el uso de la tabla.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Variable</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<link rel="stylesheet" href="style.css">
<style>
.title{
color:green;
}
nav{
margin-left:200px;
margin-right:200px;
}
</style>
</head>
<body>
<h1 class="title has-text-centered">
GeekforGeeks
</h1>
<h3 class="subtitle has-text-centered">
A computer science portal for geeks.
</h3><br>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-8'>
<div>
<h1 class='title'>User Information</h1>
<hr>
</div>
<table class='table'>
<thead>
<tr>
<th>Username</th>
<th>Email</th>
<th>Gender</th>
<th>Address</th>
<th>Phone No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>vinod34</td>
<td>vilod565@gmail.com</td>
<td>Male</td>
<td>West Bengal</td>
<td>9856777809</td>
</tr>
<tr>
<td>deepak13</td>
<td>deepak13@gmail.com</td>
<td>Male</td>
<td>Mumbai</td>
<td>6556455521</td>
</tr>
<tr>
<td>sneha345</td>
<td>sneha345@gmail.com</td>
<td>Female</td>
<td>Dadar</td>
<td>7674544434</td>
</tr>
<tr>
<td>saimi875</td>
<td>saimi875@gmail.com</td>
<td>Male</td>
<td>Borivali</td>
<td>8767543452</td>
</tr>
<tr>
<td>santra765</td>
<td>santra765@gmail.com</td>
<td>Female</td>
<td>Dahisar</td>
<td>9567345237</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Código SCSS:
$table-colors:lightgreen;
.table{
color:$table-colors;
}
Código CSS compilado:
.table {
color: lightgreen; }
Producción:
Ejemplo 2: en el siguiente código, utilizaremos la variable anterior para demostrar el uso de la tabla.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Variable</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<link rel="stylesheet" href="style.css">
<style>
.title{
color:green;
}
nav{
margin-left:200px;
margin-right:200px;
}
</style>
</head>
<body>
<h1 class="title has-text-centered">
GeekforGeeks
</h1>
<h3 class="subtitle has-text-centered">
A computer science portal for geeks.
</h3><br>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-8'>
<div>
<h1 class='title'>User Information</h1>
<hr>
</div>
<table class='table'>
<thead>
<tr>
<th>Username</th>
<th>Email</th>
<th>Gender</th>
<th>Address</th>
<th>Phone No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>vinod34</td>
<td>vilod565@gmail.com</td>
<td>Male</td>
<td>West Bengal</td>
<td>9856777809</td>
</tr>
<tr>
<td>deepak13</td>
<td>deepak13@gmail.com</td>
<td>Male</td>
<td>Mumbai</td>
<td>6556455521</td>
</tr>
<tr>
<td>sneha345</td>
<td>sneha345@gmail.com</td>
<td>Female</td>
<td>Dadar</td>
<td>7674544434</td>
</tr>
<tr>
<td>saimi875</td>
<td>saimi875@gmail.com</td>
<td>Male</td>
<td>Borivali</td>
<td>8767543452</td>
</tr>
<tr>
<td>santra765</td>
<td>santra765@gmail.com</td>
<td>Female</td>
<td>Dahisar</td>
<td>9567345237</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Código SCSS:
$table-background-color:lightgreen;
.table{
background-color:$table-background-color;
}
Código CSS compilado:
.table {
background-color: lightgreen;
}
Producción:
Referencia: https://bulma.io/documentation/elements/table/#variables
Publicación traducida automáticamente
Artículo escrito por bhaluram18 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA