Foundation CSS es el marco frontend de CSS, creado por la fundación ZURB en septiembre de 2011, que se utiliza para desarrollar sitios web, aplicaciones y correos electrónicos receptivos que funcionan perfectamente en cualquier dispositivo. Está escrito usando HTML, CSS y Javascript y es utilizado por muchas compañías famosas como Amazon, Facebook, eBay, etc. Utiliza paquetes como Grunt y Libsass para una codificación y control rápidos y un compilador Saas para acelerar el desarrollo.
Kitchen Sink tiene los elementos para trabajar en sitios web y aplicaciones. La órbita se usa para crear el control deslizante que desliza los elementos usando la clase de órbita .
Clases Foundation CSS Kitchen Sink Orbit:
- orbit : Se utiliza para crear el control deslizante con algunos elementos.
- orbit-container: Se utiliza para crear un contenedor.
- orbit-previous: Se utiliza para navegar al contenedor anterior.
- orbit-next : Se utiliza para navegar al siguiente contenedor.
- orbit-slide : Se utiliza para crear un portaobjetos de contenedores en órbita.
Sintaxis:
<div class="orbit" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous">Content</button>
<button class="orbit-next">Content</button>
<li class="is-active orbit-slide"> Content </li>
</ul>
</div>
Ejemplo 1: este ejemplo describe la clase de órbita de fregadero de cocina en Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Orbit</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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.7.4/dist/js/foundation.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>
Foundation CSS Kitchen Sink Orbit
</strong>
</center>
<div class="orbit"
role="region"
data-orbit data-use-m-u-i="false">
<ul class="orbit-container">
<button class="orbit-previous"
aria-label="previous">
<span class="show-for-sr">Previous Slide</span>
◀
</button>
<button class="orbit-next"
aria-label="next">
<span class="show-for-sr">Next Slide</span>
▶
</button>
<li class="is-active orbit-slide">
<div>
<h3 class="text-center">First slide</h3>
<p class="text-center">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles
</p>
</div>
</li>
<li class="orbit-slide">
<div>
<h3 class="text-center">Second slide</h3>
<p class="text-center">
GeeksforGeeks.org was created with
a goal in mind to provide well written,
well thought and well explained solutions
for selected questions.
</p>
</div>
</li>
</ul>
<nav class="orbit-bullets">
<button class="is-active"
data-slide="0">
<span class="show-for-sr">First slide</span>
<span class="show-for-sr">Current Slide</span>
</button>
<button data-slide="1">
<span class="show-for-sr">Second slide</span>
</button>
</nav>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Órbita del fregadero de la cocina
Ejemplo 2: Este ejemplo describe la clase de órbita que contiene diferentes contenidos.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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.7.4/dist/js/foundation.min.js">
</script>
<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Foundation CSS Kitchen Sink Orbit</strong>
</center>
<div class="orbit"
role="region"
data-orbit data-use-m-u-i="false">
<ul class="orbit-container">
<button class="orbit-previous"
aria-label="previous">
<span class="show-for-sr">Previous Slide</span>
◀
</button>
<button class="orbit-next"
aria-label="next">
<span class="show-for-sr">Next Slide</span>
▶
</button>
<li class="is-active orbit-slide">
<div>
<h3 class="text-center">First slide</h3>
<p class="text-center">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles. Billions of Users,
Millions of Articles Published, Thousands
Got Hired by Top Companies and the numbers
are still growing. Free Tutorials, Millions
of Articles, Live, Online and Classroom Courses,
Frequent Coding Competitions ,Webinars by
Industry Experts, Internship opportunities
and Job Opportunities.
</p>
</div>
</li>
<li class="orbit-slide">
<div>
<h3 class="text-center">Second slide</h3>
<p class="text-center">
GeeksforGeeks.org was created with
a goal in mind to provide well written,
well thought and well explained solutions
for selected questions. Billions of Users,
Millions of Articles Published,
Thousands Got Hired by Top Companies
and the numbers are still growing.
Free Tutorials, Millions of Articles,
Live, Online and Classroom Courses ,
Frequent Coding Competitions ,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
</p>
</div>
</li>
<li class="orbit-slide">
<div>
<h3 class="text-center">Third slide</h3>
<p class="text-center">
GeeksforGeeks.org was created with
a goal in mind to provide well written,
well thought and well explained solutions
for selected questions. Billions of Users,
Millions of Articles Published,
Thousands Got Hired by Top Companies
and the numbers are still growing.
Free Tutorials, Millions of Articles,
Live, Online and Classroom Courses ,
Frequent Coding Competitions ,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
</p>
</div>
</li>
<li class="orbit-slide">
<div>
<h3 class="text-center">Fourth slide</h3>
<img class="center" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GFG_logo">
</div>
</li>
<li class="orbit-slide">
<div>
<h3 class="text-center">Fifth slide</h3>
<p class="text-center">
GeeksforGeeks.org was created with
a goal in mind to provide well written,
well thought and well explained solutions
for selected questions. Billions of Users,
Millions of Articles Published,
Thousands Got Hired by Top Companies
and the numbers are still growing.
Free Tutorials, Millions of Articles,
Live, Online and Classroom Courses ,
Frequent Coding Competitions ,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
</p>
</div>
</li>
</ul>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0">
<span class="show-for-sr">First slide</span>
<span class="show-for-sr">Current Slide</span>
</button>
<button data-slide="1">
<span class="show-for-sr">Second slide</span>
</button>
<button data-slide="2">
<span class="show-for-sr">Third slide</span>
</button>
<button data-slide="3">
<span class="show-for-sr">Fourth slide</span>
</button>
<button data-slide="4">
<span class="show-for-sr">Fifth slide</span>
</button>
</nav>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Órbita del fregadero de la cocina
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#orbit
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA