Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen increíbles y pueden ser accesibles para cualquier dispositivo. En este artículo, discutiremos las clases de visualización de utilidades de creación de prototipos en Foundation CSS.
En Foundation CSS, las clases de visualización de utilidades de creación de prototipos se utilizan para modificar la propiedad de visualización de cualquier elemento.
Foundation CSS Prototyping Utilities Clases de visualización:
- display-inline: esta clase se usa para hacer que el bloque actual de elementos esté en la misma línea.
- display-inline-block: esta clase se usa para hacer que el elemento tenga el formato de un elemento en línea, pero puede aplicar valores de alto y ancho.
- display-block: esta clase se utiliza para mostrar un elemento como un elemento de bloque.
- display-table: esta clase se usa para establecer el comportamiento como <table> para todos los elementos.
- display-table-cell: esta clase se usa para establecer el comportamiento como <td> para todos los elementos.
Sintaxis:
<div class="Display-Classes">
...
</div>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de la clase de visualización en línea Prototyping Utilities .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Prototyping Utilities Display-Inline</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" crossorigin="anonymous"> </head> <body> <center> <h2>GeeksforGeeks</h2> <h3>Prototyping Utilities Display-Inline</h3> <div class="button primary display-inline"> GeeksforGeeks-1 </div> <div class="button success display-inline"> GeeksforGeeks-2 </div> </center> </body> </html>
Producción:
Foundation CSS Prototyping Utilities Mostrar clases
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso de la clase de bloque de visualización Prototyping Utilities .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Prototyping Utilities Display-Inline</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" crossorigin="anonymous"> </head> <body style="margin-inline: 10rem;"> <center> <h2>GeeksforGeeks</h2> <h3>Prototyping Utilities Display-block</h3> <div class="button primary display-block"> GeeksforGeeks-1 </div> <div class="button success display-block"> GeeksforGeeks-2 </div> </center> </body> </html>
Producción:
Foundation CSS Prototyping Utilities Mostrar clases
Referencia: https://get.foundation/sites/docs/prototyping-utilities.html#display-classes
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA