Foundation CSS es el marco frontend de CSS que se utiliza para crear 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. Las pestañas de fregadero de cocina son las pestañas de navegación que se utilizan para mostrar contenido en paneles sin salir de la página.
Clases usadas:
- tabs : Se utiliza para crear pestañas.
- tabs-title: Para dar el título de la pestaña.
- tabs-content: Se utiliza para proporcionar el contenido de la pestaña.
- tabs-panel: Se utiliza para crear el panel de la pestaña.
Sintaxis:
<ul class="tabs" data-tabs id="example-tabs">
...
</ul>
or
<div class="tabs-content"
data-tabs-content="example-tabs">
...
</div>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de las lengüetas para fregaderos de cocina.
HTML
<!DOCTYPE html>
<html>
<head>
<link crossorigin="anonymous" rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script crossorigin="anonymous" src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Foundation CSS Kitchen Sink Tabs
</h3>
<ul class="tabs" data-tabs id="tabs_example">
<li class="tabs-title is-active"><a href="#tab1">Tab 1</a></li>
<li class="tabs-title"><a href="#tab2">Tab 2</a></li>
<li class="tabs-title"><a href="#tab3">Tab 3</a></li>
</ul>
<div class="tabs-content" data-tabs-content="tabs_example">
<div class="tabs-panel is-active" id="tab1">
<p>Tab 1</p>
<p>This is first tab</p>
</div>
<div class="tabs-panel" id="tab2">
<p>Tab 2</p>
<p>This is second tab</p>
</div>
<div class="tabs-panel" id="tab3">
<p>Tab 3</p>
<p>This is third tab</p>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Ejemplo 2: A continuación se muestra otro ejemplo que ilustra el uso de Kitchen Sink Tabs utilizando algunas imágenes.
HTML
<!DOCTYPE html>
<html>
<head>
<link crossorigin="anonymous" rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script crossorigin="anonymous" src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Tabs</h3>
<ul class="tabs" data-tabs id="tabs_example">
<li class="tabs-title is-active"><a href="#tab1">Tab 1</a></li>
<li class="tabs-title"><a href="#tab2">Tab 2</a></li>
<li class="tabs-title"><a href="#tab3">Tab 3</a></li>
<li class="tabs-title"><a href="#tab4">Tab 4</a></li>
<li class="tabs-title"><a href="#tab5">Tab 5</a></li>
<li class="tabs-title"><a href="#tab6">Tab 6</a></li>
</ul>
<div class="tabs-content" data-tabs-content="tabs_example">
<div class="tabs-panel is-active" id="tab1">
<p>Tab 1</p>
<p>This is first tab</p>
</div>
<div class="tabs-panel" id="tab2">
<p>Tab 2</p>
<img class="thumbnail" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png">
</div>
<div class="tabs-panel" id="tab3">
<p>Tab 3</p>
<p>This is third tab</p>
</div>
<div class="tabs-panel" id="tab4">
<p>Tab 4 image</p>
<img class="thumbnail" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</div>
<div class="tabs-panel" id="tab5">
<p>Tab 5</p>
<p>This is fifth tab</p>
</div>
<div class="tabs-panel" id="tab6">
<p>Tab 6</p>
<p>This is sixth tab</p>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Enlace de referencia : https://get.foundation/sites/docs/kitchen-sink.html#tabs
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA