Revelación básica de CSS – Barcelona Geeks

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. Este marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas. Revelares la ventana modal o emergente que se utiliza para mostrar información cuando hacemos clic en el botón. Podemos mostrar el contenido en la ventana emergente sin navegar a otra página.

Fundamentos CSS Revelar temas:

Conceptos básicos : Veremos cómo crear el modal simple.
Dimensionamiento : Crearemos diferentes tamaños de modales.
Modal anidado: Crearemos los modales anidados.
Pantalla completa: Crearemos el modal de pantalla completa.

Clases de revelación de CSS de la fundación:

revelar: esta clase se utiliza para crear el modal.
tiny: esta clase se usa para crear un modal de 30% de ancho.
pequeño: esta clase se usa para crear un modal de 50% de ancho.
grande: esta clase se usa para crear un modal de 90% de ancho.
full: esta clase se usa para crear un modal de pantalla completa.

Sintaxis:

<div class="reveal" id="revealThis" data-reveal>
    .....
</div>
<button class="button" data-open="revealThis">
    .....
</button>

Ejemplo 1: el siguiente código demuestra los conceptos básicos y el tamaño de Foundation CSS Reveal .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
  
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
</head>
  
<body>
  <center>
    <h2 style="color: green;">
      GeeksforGeeks
    </h2>
    <h3>Foundation CSS Reveal</h3>
  
    <strong>
      Reveal Basics:
    </strong> <br>
    <div class="reveal" id="reveal1" data-reveal>
      <strong>
        GeeksforGeeks
      </strong>
      <p>
        A Computer Science portal for geeks.
      </p>
  
    </div>
    <button class="button" data-open="reveal1">
      Reveal Basics
    </button> <br> <br>
  
    <strong>
      Reveal Sizing:
    </strong> <br>
    <div class="tiny reveal" id="reveal2" data-reveal>
      <p>
        A Computer Science portal for geeks.
      </p>
  
    </div>
    <button class="button" data-open="reveal2">
      Reveal Tiny
    </button>
  
    <div class="small reveal" id="reveal3" data-reveal>
      <p>
        A Computer Science portal for geeks.
      </p>
  
    </div>
    <button class="button" data-open="reveal3">
      Reveal Small
    </button>
  
    <div class="large reveal" id="reveal4" data-reveal>
      <p>
        A Computer Science portal for geeks.
      </p>
  
    </div>
    <button class="button" data-open="reveal4">
      Reveal Large
    </button>
  </center>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

Producción:

Ejemplo 2: El siguiente código demuestra Foundation CSS Reveal Nested Modal y Full-screen Modal .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!-- Compressed CSS -->
  <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
  
    <!-- Compressed JavaScript -->
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
  </script>
  <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
  </script>
</head>
  
<body>
  <center>
    <h2 style="color: green;">
      GeeksforGeeks
    </h2>
    <h3>Foundation CSS Reveal</h3>
  
    <strong>
      Reveal Nested Modal:
    </strong> <br>
    <div class="reveal" id="reveal1" data-reveal>
      <strong>
        GeeksforGeeks
      </strong>
      <p>
        A Computer Science portal for geeks.
      </p>
  
  
      <button class="button" 
              data-open="reveal2">
        Reveal second modal
      </button>
    </div>
    <button class="button" data-open="reveal1">
      Reveal Nested
    </button> <br> <br>
  
    <div class="reveal" id="reveal2" data-reveal>
      <p>
        A Computer Science portal for geeks.
      </p>
  
  
      <button class="close-button" 
              data-close
              type="button">
        <span aria-hidden="true">×</span>
      </button>
    </div>
  
    <strong>
      Reveal Full-screen:
    </strong> <br>
    <div class="full reveal" id="reveal3" data-reveal>
      <strong>
        Reveal Full-screen
      </strong>
      <p>
        A Computer Science portal for geeks.
        It contains well written, well thought
        and well explained computer science and
        programming articles
      </p>
  
  
      <button class="close-button" 
              data-close 
              type="button">
        <span aria-hidden="true">×</span>
      </button>
    </div>
  
    <button class="button" data-open="reveal3">
      Reveal Full-screen
    </button>
      
  </center>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

Producción:

Referencia: https://get.foundation/sites/docs/reveal.html

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

HTML

HTML

Deja una respuesta Cancelar la respuesta