Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen sorprendentes y pueden ser accesibles para cualquier dispositivo. En este artículo, discutiremos las clases de alternancia receptivas del fregadero de cocina en Foundation CSS.
Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. El conmutador de respuesta del fregadero de cocina se usa para agregar la barra superior receptiva con un botón de alternancia que se activa en el dispositivo móvil.
Foundation CSS Kitchen Sink Responsive Toggle Classes:
- title-bar: esta clase se utiliza para especificar el título de la barra de navegación.
- menu-icon: esta clase se utiliza para definir el icono de alternancia de la barra de navegación.
- title-bar-title: esta clase se utiliza para especificar el título del conmutador en la pantalla del móvil.
- top-bar: esta clase se utiliza para definir el contenedor de la barra superior. Tiene dos partes: barra superior izquierda y barra superior derecha. Tenga en cuenta que en la pantalla del móvil, ambos se apilan uno encima del otro.
- top-bar-right: Esta clase se usa para definir el contenido derecho de la barra superior.
- top-bar-left: Esta clase se usa para definir el contenido izquierdo de la barra superior.
Sintaxis:
<div class="title-bar"
data-responsive-toggle="gfg-menu"
data-hide-for="large">
<button class="menu-icon"
type="button" data-toggle>
...
</button>
<div class="title-bar-title">
...
</div>
</div>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de la alternancia receptiva del fregadero de cocina.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Responsive toggle</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css"
crossorigin="anonymous">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css"
crossorigin="anonymous">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<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.7.4/dist/js/foundation.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Responsive toggle</h3>
<div class="title-bar" data-responsive-toggle="gfg-menu"
data-hide-for="large">
<button class="menu-icon" type="button"
data-toggle>
</button>
<div class="title-bar-title">
GfG-Menu
</div>
</div>
<div class="top-bar" id="gfg-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">
GeeksforGeeks
</li>
<li class="has-submenu">
<a href="#">Courses</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">DSA</a></li>
<li><a href="#">OOP's</a></li>
<li><a href="#">DBMS</a></li>
<li><a href="#">OS</a></li>
</ul>
</li>
<li><a href="#0">
Interview Preparation
</a></li>
<li><a href="#0">
Test Series
</a></li>
</ul>
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Foundation CSS Kitchen Sink Responsive alternar
Ejemplo 2: a continuación, se muestra otro ejemplo que ilustra el uso de la palanca de respuesta del fregadero de cocina.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Responsive toggle</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css"
crossorigin="anonymous">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css"
crossorigin="anonymous">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<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.7.4/dist/js/foundation.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Responsive toggle</h3>
<div class="title-bar"
data-responsive-toggle="gfg-menu"
data-hide-for="large">
<button class="menu-icon"
type="button"
data-toggle>
</button>
<div class="title-bar-title">
GfG-Menu
</div>
</div>
<div class="top-bar" id="gfg-menu">
<div class="top-bar-left">
<ul class="menu">
<li><input type="search"
class="rounded bordered shadow"
placeholder="Search any Course">
</li>
<li>
<button type="button"
class="button rounded shadow success">
SEARCH
</button>
</li>
</ul>
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Foundation CSS Kitchen Sink Responsive alternar
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#responsive-toggle
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA