Fundación CSSes un marco de front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que hace que sea muy fácil diseñar hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
The Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. El componente Tabla le permite agregar una gran cantidad de datos y presentarlos de manera clara y ordenada. Se puede implementar fácilmente usando la etiqueta <table> .
Clases de mesa de fregadero de cocina Foundation CSS:
- hover: esta clase se usa para oscurecer ligeramente las filas de la tabla al pasar el mouse.
- unstriped: esta clase se utiliza para hacer una tabla sin rayas, ya que, de forma predeterminada, las filas de la tabla están rayadas.
- stack: esta clase se usa para apilar una tabla en pantallas pequeñas y ahora la tabla se apila en secciones pequeñas.
- desplazamiento de tabla: esta clase le permite habilitar el desplazamiento horizontal en su tabla para que pueda mostrar más datos tabulares
Sintaxis:
<table>
<thead>... </thead>
<tbody> ... </tbody>
</table>
Ejemplo: El siguiente código demuestra el componente Mesa del fregadero de la cocina que se usa con la clase flotante .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Kitchen Sink Table</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <h3>Foundation CSS Kitchen Sink Table</h3> <br /> <table class="hover"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Cell 00</td> <td>Cell 01</td> <td>Cell 02</td> </tr> <tr> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr> <tr> <td>Cell 20</td> <td>Cell 21</td> <td>Cell 22</td> </tr> </tbody> </table> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Mesa de fregadero de cocina Foundation CSS
Ejemplo: el código siguiente muestra el componente Mesa de fregadero de cocina utilizado con la clase sin rayas .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Kitchen Sink Table</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <h3>Foundation CSS Kitchen Sink Table</h3> <br /> <table class="unstriped"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Cell 00</td> <td>Cell 01</td> <td>Cell 02</td> </tr> <tr> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr> <tr> <td>Cell 20</td> <td>Cell 21</td> <td>Cell 22</td> </tr> </tbody> </table> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Mesa de fregadero de cocina Foundation CSS
Ejemplo: El siguiente código demuestra el componente Mesa de fregadero de cocina utilizado con la clase de pila .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Kitchen Sink Table</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <h3>Foundation CSS Kitchen Sink Table</h3> <br /> <table class="stack"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Cell 00</td> <td>Cell 01</td> <td>Cell 02</td> </tr> <tr> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr> <tr> <td>Cell 20</td> <td>Cell 21</td> <td>Cell 22</td> </tr> </tbody> </table> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Mesa de fregadero de cocina Foundation CSS
Ejemplo: el código siguiente muestra el componente de mesa de fregadero de cocina utilizado con la clase de desplazamiento de tabla .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Kitchen Sink Table</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <h3>Foundation CSS Kitchen Sink Table</h3> <br /> <table class="table-scroll"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> <th>Header 5</th> <th>Header 6</th> <th>Header 7</th> <th>Header 8</th> <th>Header 9</th> </tr> </thead> <tbody> <tr> <td>Cell 00</td> <td>Cell 01</td> <td>Cell 02</td> <td>Cell 03</td> <td>Cell 04</td> <td>Cell 05</td> <td>Cell 06</td> <td>Cell 07</td> <td>Cell 08</td> </tr> <tr> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> <td>Cell 13</td> <td>Cell 14</td> <td>Cell 15</td> <td>Cell 16</td> <td>Cell 17</td> <td>Cell 18</td> </tr> <tr> <td>Cell 20</td> <td>Cell 21</td> <td>Cell 22</td> <td>Cell 23</td> <td>Cell 24</td> <td>Cell 25</td> <td>Cell 26</td> <td>Cell 27</td> <td>Cell 28</td> </tr> </tbody> </table> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Mesa de fregadero de cocina Foundation CSS
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#table
Publicación traducida automáticamente
Artículo escrito por vividhpandey13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA