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 sorprendentes y pueden ser accesibles para cualquier dispositivo. En este artículo, discutiremos las clases auxiliares de margen de utilidades de creación de prototipos en Foundation CSS.
En Foundation CSS, Prototyping Utilities Border none se utiliza para establecer la propiedad border de cualquier elemento en none.
Foundation CSS Prototyping Utilities Borde ninguna clase:
- borde: esta clase se utiliza para aplicar la propiedad de borde en cualquier elemento.
- border-none: esta clase se utiliza para eliminar el borde de cualquier elemento.
Sintaxis:
<div class="callout border-none">
...
</div>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de Border none de Prototyping Utilities utilizando la clase de borde .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Prototyping Utilities Border None</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 Border none</h3> <div class="callout success border"> GeeksforGeeks is a Computer Science Portal. </div> </center> </body> </html>
Producción:
Foundation CSS Prototyping Utilities Borde ninguno
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso de Border none de Prototyping Utilities utilizando la clase border-none .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Prototyping Utilities Border None</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 Border none</h3> <div class="callout success border-none"> GeeksforGeeks is a Computer Science Portal. </div> </center> </body> </html>
Producción:
Foundation CSS Prototyping Utilities Borde ninguno
Referencia: https://get.foundation/sites/docs/prototyping-utilities.html#border-none
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA