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 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. En este artículo, discutiremos el interruptor del fregadero de cocina en Foundation CSS.
Kitchen Sink es una página en Foundation CSS en la que se enumeran todos los componentes principales con sus códigos. Contiene todas las plantillas básicas de cada componente con su código. Una ruta de navegación ayuda a ver el rastro de navegación del usuario en un sitio web.
Clases básicas de migas de pan CSS:
- ruta de navegación : esta clase se utiliza para representar la ubicación de la página actual dentro de una jerarquía de navegación, separada por una barra inclinada (/).
Sintaxis:
<nav>
<ul class="breadcrumb">
<li> ... </li>
<li class="disabled" > ... </li>
</ul>
</nav>
Ejemplo : este ejemplo describe las migas de pan del fregadero de la cocina en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Kitchen Sink Breadcrumbs</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> <title> Foundation CSS Kitchen Sink Breadcrumbs </title> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h4>Foundation CSS Kitchen Sink Breadcrumbs</h4> <nav aria-label="Current Position: " role="navigation"> <ul class="breadcrumbs" style="font-size: 2em;"> <li> <a href="#0">Home</a> </li> <li> <a href="#0">Articles</a> </li> <li class="disabled">Foundation CSS</li> <li> <span class="show-for-sr">Current: </span> Kitchen Sink </li> </ul> </nav> </body> </html>
Producción:
Ejemplo : este ejemplo describe las migas de pan del fregadero de cocina que redirigen las páginas desde los enlaces de página dados.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Kitchen Sink Breadcrumbs</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> <title> Foundation CSS Kitchen Sink Breadcrumbs </title> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h2>Foundation CSS KitchenSink breadcrumbs</h2> <nav aria-label="You are here:" role="navigation"> <ul class="breadcrumbs" style="font-size: 2em;"> <li> <a href="/home.html">Home</a> </li> <li> <a href="#">Books</a> </li> </ul> <h4>Choose the topics:</h4> <ul> <li> <a href="/programming.html"> Computer Programming </a> </li> <li> <a href="/architecture.html"> Computer Architecture </a> </li> </ul> </nav> </body> </html>
Producción:
Nota: En el ejemplo anterior, debe tener creadas las páginas » home.html «, » programación.html » y » arquitectura.html «.
Referencia : https://get.foundation/sites/docs/kitchen-sink.html
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA