Tamaño de llamada de CSS básico

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 hermosos sitios web, aplicaciones y correos electrónicos receptivos para que se vean increíbles y puedan ser accesibles para cualquier dispositivo. 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.

Las llamadas combinan paneles y alertas de Foundation 5 en un componente de contenedor genérico. Foundation CSS usa la clase de llamada en el elemento <div> para crear llamadas. Para cambiar el tamaño de la llamada, usamos clases grandes y pequeñas junto con la clase de llamada .

Clase de tamaño de llamada de Foundation CSS:

grande: la clase grande aumenta el relleno en la llamada para que sea más grande que el tamaño predeterminado.
pequeño: la clase pequeña reduce el relleno en la llamada para que sea más pequeño que el tamaño predeterminado.

Sintaxis:

<div class="callout large">...</div>

Ejemplo: este ejemplo demuestra todas las variaciones de tamaño de la llamada usando Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Callout</title>
  
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous">
  
    <!-- Compressed JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
        crossorigin="anonymous"></script>
</head>
  
<body style="padding: 30px;">
    <center>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <strong>Foundation CSS Callout</strong><br/><br/>
    </center>
    <div class="callout small">
        Small size <br/>
        This is a basic callout.
    </div>
    <div class="callout">
        Default <br/>
        This is a basic callout.
    </div>
    <div class="callout large">
        Large Size <br/>
        This is a basic callout.
    </div>
</body>
  
</html>

Producción:

Producción

Enlace de referencia: https://get.foundation/sites/docs/callout.html#sizing

Publicación traducida automáticamente

Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta