Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. El marco se basa en bootstrap, que es similar a SaaS. 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.
El cuadro de borde de Utilidades de creación de prototipos se utiliza para agregar el contenido, el relleno y el borde al elemento. No dará el margen dentro de las propiedades de ancho y alto de CSS . En este artículo, analizaremos el cuadro de borde de la utilidad de creación de prototipos en Foundation CSS.
Foundation CSS Prototyping Utility Cuadro de borde Clase:
- border-box: Esta clase se utiliza para crear el cuadro con el borde.
Sintaxis:
<div class="border-box"> ... </div>
Ejemplo: El siguiente código muestra el cuadro de borde de la utilidad de creación de prototipos CSS de Foundation.
HTML
<!DOCTYPE html> <html> <head> <title> Foundation CSS Prototyping Utilities Border box </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 style="color:green;"> GeeksforGeeks </h2> <h3> Foundation CSS Prototyping Utilities Border box </h3> <div class="callout border-box"> A Computer Science portal for geeks. </div> </center> </body> </html>
Producción:
Cuadro de borde de utilidades de creación de prototipos de CSS de Foundation
Referencia: https://get.foundation/sites/docs/prototyping-utilities.html#border-box
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA