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 hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. 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.
Top Bar es esencial para todos los sitios web. Nos permite navegar entre varias páginas. Foundation CSS ofrece una barra superior estilo base. De forma predeterminada, los elementos de la barra superior se apilan unos sobre otros, ya que la información no se puede acomodar en pantallas más pequeñas. Foundation CSS nos permite cambiar la funcionalidad de apilamiento de la barra superior para varios otros tamaños de pantalla usando las clases reservadas.
Clases de apilamiento de la barra superior de Foundation CSS:
- stacked-for-medium: apila los elementos de la barra superior unos sobre otros para pantallas medianas y pequeñas.
- stacked-for-large: apila los elementos de la barra superior unos sobre otros en pantallas grandes, medianas y pequeñas.
Sintaxis:
<div class="top-bar Top-Bar-Stacking-Class"> ... </div>
Ejemplo 1: En el siguiente ejemplo, hemos creado una barra superior básica que se apila en pantallas grandes, medianas y pequeñas.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Top Bar Stacking</title>
<!-- Compressed CSS -->
<link
rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"/>
<link
rel="stylesheet"
href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
<!-- 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">
</script>
</head>
<body style="height: 95vh; width: 100vw">
<div>
<h2 style="color: green">GeekforGeeks</h2>
<h4>Foundation CSS Top Bar Stacking</h4>
<div class="top-bar stacked-for-large">
<div class="top-bar-left">
<ul class="menu">
<li style="color: green"
class="menu-text">GeekforGeeks</li>
<li><a href="#">Python</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Java</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="#">Blockchain</a></li>
<li><a href="#">Data Mining</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search"
placeholder="Search" /></li>
<li><button type="button"
class="button">Search</button></li>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Apilamiento de la barra superior Foundation CSS
Ejemplo 2: En el siguiente ejemplo, hemos creado una barra superior básica que se apila en pantallas medianas y pequeñas.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Top Bar Stacking</title>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"/>
<link rel="stylesheet"
href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
<!-- 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">
</script>
</head>
<body style="height: 95vh; width: 100vw">
<div>
<h2 style="color: green">GeekforGeeks</h2>
<h4>Foundation CSS Top Bar Stacking</h4>
<div class="top-bar stacked-for-medium">
<div class="top-bar-left">
<ul class="menu">
<li><input type="search"
placeholder="Search" /></li>
<li><button type="button"
class="button">Search</button></li>
</ul>
</div>
<div class="top-bar-left">
<ul class="menu">
<li><a href="#">Blockchain</a></li>
<li><a href="#">Data Mining</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="#">Python</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Java</a></li>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Apilamiento de la barra superior Foundation CSS
Referencia: https://get.foundation/sites/docs/top-bar.html#stacking
Publicación traducida automáticamente
Artículo escrito por tejsidda34 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA