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 auxiliares de relleno de utilidades de creación de prototipos en Foundation CSS.
En Foundation CSS, los ayudantes de relleno de Prototyping Utilities se utilizan para crear algo de espacio alrededor del contenido del elemento.
Foundation CSS Prototyping Utilities padding Helpers clases:
- relleno (todos los lados): esta clase se puede usar para aplicar relleno a lo largo de todos los lados del contenido.
- padding top: esta clase se puede usar para aplicar relleno en la parte superior del contenido.
- parte inferior del relleno: esta clase se puede usar para aplicar al relleno en la parte inferior del contenido.
- relleno a la izquierda: esta clase se puede usar para aplicar relleno en el lado izquierdo del contenido.
- relleno a la derecha: esta clase se puede usar para aplicar relleno en el lado derecho del contenido.
- padding-horizontal: esta clase se puede usar para aplicar relleno en la dirección horizontal del contenido.
- padding-vertical: esta clase se puede usar para aplicar relleno en la dirección vertical del contenido.
Sintaxis:
<div class="Utilities-padding-Helpers-classes">
...
</div>
Nota: Aquí todo significa (0, 1, 2, 3). Son unidades relativas con respecto a 8px, significa 0 = 0px, 1= 8px, 2 = 16px y 3 = 24px.
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de ayudantes de relleno utilizando la clase padding-all .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Prototyping Utilities Padding Helpers</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: 30rem;"> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h3>Prototyping Utilities Padding Helpers</h3> <div class="callout clearfix alert"> <div class="padding-0 callout"> 0 padding all around </div> </div> <br><br> <div class="callout clearfix warning"> <div class="padding-1 callout"> 8px padding all around </div> </div> <br><br> <div class="callout clearfix primary"> <div class="padding-2 callout"> 16px padding all around </div> </div> <br><br> <div class="callout clearfix success"> <div class="padding-3 callout"> 24px padding all around </div> </div> </center> </body> </html>
Producción:
Foundation CSS Prototyping Utilidades Ayudantes de relleno
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso de ayudantes de relleno utilizando la clase padding-top-all .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Prototyping Utilities Padding Helpers</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: 30rem;"> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h3>Prototyping Utilities Padding Helpers</h3> <div class="callout clearfix alert"> <div class="padding-top-0 callout"> 0 padding-top </div> </div> <br><br> <div class="callout clearfix warning"> <div class="padding-top-1 callout"> 8px padding-top </div> </div> <br><br> <div class="callout clearfix primary"> <div class="padding-top-2 callout"> 16px padding-top </div> </div> <br><br> <div class="callout clearfix success"> <div class="padding-top-3 callout"> 24px padding-top </div> </div> </center> </body> </html>
Producción:
Foundation CSS Prototyping Utilidades Ayudantes de relleno
Ejemplo 3: a continuación se muestra el ejemplo que ilustra el uso de ayudantes de relleno utilizando la clase padding-vertical-all .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Prototyping Utilities Padding Helpers</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: 30rem;"> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h3>Prototyping Utilities Padding Helpers</h3> <div class="callout clearfix alert"> <div class="padding-vertical-0 callout"> 0 padding-vertical </div> </div> <br><br> <div class="callout clearfix warning"> <div class="padding-vertical-1 callout"> 8px padding-vertical </div> </div> <br><br> <div class="callout clearfix primary"> <div class="padding-vertical-2 callout"> 16px padding-vertical </div> </div> <br><br> <div class="callout clearfix success"> <div class="padding-vertical-3 callout"> 24px padding-vertical </div> </div> </center> </body> </html>
Producción:
Foundation CSS Prototyping Utilidades Ayudantes de relleno
Referencia: https://get.foundation/sites/docs/prototyping-utilities.html#padding-helpers