Fundación CSSes un marco de front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que hace que sea muy fácil diseñar hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. 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. 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.
The Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. Kitchen Sink Thumbnail es un componente simple disponible en Foundation CSS para utilizar imágenes como miniaturas en etiquetas de anclaje . El componente de miniatura aplica estilo a las imágenes en forma de miniatura y proporciona un borde a la imagen. La clase .thumbnail se puede aplicar directamente a un elemento de imagen ( <img> ) o una etiqueta de anclaje ( <a> ) que lo cubre. Sin embargo, se debe agregar el atributo alt que describe el contenido de la imagen.
Foundation CSS Kitchen Sink Clase en miniatura:
- miniatura: se utiliza para hacer uso de imágenes como miniaturas en etiquetas de anclaje
Sintaxis:
<img class="thumbnail"
src="#" alt="...>
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Kitchen Sink Thumbnail</title>
<!-- 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/jquery/3.2.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
</head>
<body style="padding-top: 2rem;">
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Foundation CSS Kitchen Sink Thumbnail</h3>
<h5>{Image}</h5>
<br />
<img class="thumbnail"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png"
alt="GeeksForGeeksLogo">
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
Producción:
Miniatura de fregadero de cocina Foundation CSS
Ejemplo: el siguiente código muestra el componente de miniatura utilizado con la etiqueta de anclaje.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Kitchen Sink Thumbnail</title>
<!-- 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/jquery/3.2.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
</head>
<body style="padding-top: 2rem;">
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Foundation CSS Kitchen Sink Thumbnail</h3>
<h5>{Image as Link}</h5>
<br />
<a href="#" alt="GeeksForGeeksLogo"
class="thumbnail">
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6.png" />
</a>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
Producción:
Miniatura de fregadero de cocina Foundation CSS
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#thumbnail
Publicación traducida automáticamente
Artículo escrito por vividhpandey13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA