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. 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.
Foundation CSS Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. Magellan se utiliza para saltar al objetivo dado cuando se hace clic en el enlace. Se utiliza cuando queremos saltar a alguna sección específica directamente sin desplazarnos hacia abajo en la página web.
Atributos del fregadero de cocina Foundation CSS Magellan:
- data-magellan : Se utiliza para crear el enlace de la sección.
- data-magellan-target: se utiliza para crear la sección objetivo cuando se hace clic en el enlace.
Sintaxis:
<ul class="horizontal menu" data-magellan> .... </ul> <div class="sections"> .... </div>
Ejemplo 1: El siguiente código demuestra los enlaces de menú horizontales .
HTML
<!DOCTYPE html>
<html>
<head>
<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://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"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Foundation CSS Kitchen Sink Magellan
</h3>
<ul class="horizontal menu" data-magellan>
<li>
<a href="#first-section">
Section 1
</a>
</li>
<li>
<a href="#second-section">
Section 2
</a>
</li>
<li>
<a href="#third-section">
Section 3
</a>
</li>
</ul>
<div class="sections">
<section id="first-section"
data-magellan-target="first-section">
<strong>
Section 1
</strong>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles.A Computer Science
portal for geeks.
</p>
</section>
<section id="second-section"
data-magellan-target="second-section">
<strong>
Section 2
</strong>
<p>
With the idea of imparting programming
knowledge, Mr. Sandeep Jain,an IIT Roorkee
alumnus started a dream, GeeksforGeeks.
</p>
</section>
<section id="third-section"
data-magellan-target="third-section">
<strong>
Section 3
</strong>
<p>
With the idea of imparting programming knowledge,
Mr. Sandeep Jain, an IIT Roorkee alumnus started
a dream, GeeksforGeeks.
</p>
</section>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Cimentación CSS Fregadero Magellan
Ejemplo 2: El siguiente código demuestra los enlaces de menú verticales .
HTML
<!DOCTYPE html>
<html>
<head>
<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://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"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Foundation CSS Kitchen Sink Magellan
</h3>
<ul class="vertical menu" data-magellan>
<li>
<a href="#first-section">
Section 1
</a>
</li>
<li>
<a href="#second-section">
About GeeksforGeeks
</a>
</li>
<li>
<a href="#third-section">
GeeksforGeeks Image
</a>
</li>
</ul>
<div class="sections">
<section id="first-section"
data-magellan-target="first-section">
<strong>
Section 1
</strong>
<p>
A Computer Science portal for geeks.
It contains well written, well
thought and well explained computer
science and programming articles.
</p>
</section>
<section id="second-section"
data-magellan-target="second-section">
<strong>
About GeeksforGeeks
</strong>
<p>
A Computer Science portal for geeks.
It contains well written, well
thought and well explained computer
science and programming articles.
</p>
</section>
<section id="third-section"
data-magellan-target="third-section">
<strong>
GeeksforGeeks Image
</strong> <br>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GFG image">
</section>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Cimentación CSS Fregadero Magellan
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#magellan
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