Bulma es un framework CSS de código abierto desarrollado por Jeremy Thomas. Este marco se basa en la propiedad CSS Flexbox. Es altamente receptivo, minimizando el uso de consultas de medios para un comportamiento receptivo. La mejor parte del marco de Bulma es que responde por naturaleza. Es modular, lo que significa que solo necesitamos importar lo que necesitemos y el conocimiento básico de CSS es más que suficiente para usar el marco de Bulma.
Las tablas son una parte esencial de cualquier sitio web para representar los datos de una manera más fácil. El marco de Bulma brinda la posibilidad de crear tablas con facilidad. Hay momentos en los que tenemos que crear tablas de cierta manera, como una tabla con un borde o una tabla de tamaño estrecho, etc. Estos resultados deseados se pueden lograr con la ayuda de modificadores de tablas en el marco de Bulma que se utilizan para modificar las mesas.
Clases de modificador de tabla Bulma:
- is-bordered: esta clase agrega bordes a cada celda de la tabla.
- is-striped: esta clase agrega rayas a la tabla.
- is-narrow: Esta clase estrecha las celdas.
- es-hoverable: esta clase agrega un efecto de desplazamiento en cada fila.
- is-fullwidth: esta clase crea una tabla de ancho completo.
Sintaxis:
<table class="table Table-Modifier-Classes">
Ahora echemos un vistazo a un par de programas que demuestran cómo crear una tabla bordeada y una tabla rayada.
Ejemplo 1: la clase de modificador de tabla is- borded se usa en el siguiente programa.
HTML
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <meta name="viewport" content= "width= device-width, initial-scale=1"> <!--Linking Bulma--> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> <script src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"> </script> </head> <body> <br> <div class="content"> <h1 class="has-text-success">GeeksforGeeks</h1> <strong>Table Modifiers</strong> <section class="section"> <div class="container"> <span class="title"> Bordered Table </span> <br> <!--Using Table Modifier--> <table class="table is-bordered"> <thead> <tr> <!--Table Rows--> <th>Name</th> <th>Sport</th> </tr> </thead> <tbody> <tr> <td>Cristiano</td> <!--Table Data--> <td>Football</td> </tr> <tr> <td>Nadal</td> <td>Tennis</td> </tr> <tr> <td>Jordan</td> <td>Basketball</td> </tr> <tr> <td>Lara</td> <td>Cricket</td> </tr> </tbody> </table> </div> </section> </div> </body> </html>
Producción:
Modificadores de mesa Bulma
Ejemplo 2: la clase de modificador de tabla is-striped se usa en el siguiente programa.
HTML
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <meta name="viewport" content="width= device-width, initial-scale=1"> <!--Linking Bulma--> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> <script src= "https://use.fontawesome.com/releases/v5.1.0/js/all.js"> </script> </head> <body> <br> <div class="content"> <h1 class="has-text-success">GeeksforGeeks</h1> <strong>Table Modifiers</strong> <section class="section"> <div class="container"> <span class="title"> Striped Table </span> <br> <!--Using Table Modifier--> <table class="table is-striped"> <thead> <tr> <!--Table Rows--> <th>Country</th> <th>Capital</th> </tr> </thead> <tbody> <tr> <td>India</td> <!--Table Data--> <td>New Delhi</td> </tr> <tr> <td>Australia</td> <td>Canberra</td> </tr> <tr> <td>France</td> <td>Paris</td> </tr> <tr> <td>England</td> <td>London</td> </tr> </tbody> </table> </div> </section> </div> </body> </html>
Producción:
Modificadores de mesa Bulma
Enlace de referencia: https://bulma.io/documentation/elements/table/
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA