A Foundation es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Este marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.
Foundation CSS Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. La barra de título del fregadero de cocina se usa para mostrar los elementos del menú en el lado izquierdo o en el lado derecho como la barra de título.
Clases de fregaderos de cocina Foundation CSS:
- title-bar: Se utiliza para crear la barra de título.
- title-bar-left: Se utiliza para crear la barra de título en el lado izquierdo.
- title-bar-right: Se utiliza para crear la barra de título en el lado derecho.
- title-bar-title: Se utiliza para dar el título.
Sintaxis:
<div class="title-bar"> .... </div>
Ejemplo 1: el código siguiente muestra la barra de título del fregadero de la cocina en el lado izquierdo de la barra.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Kitchen Sink Title bar</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <strong>Foundation CSS Kitchen Sink Title bar</strong> </center> <div class="title-bar"> <div class="title-bar-left"> <button class="menu-icon" type="button"></button> <span class="title-bar-title">GFGTitleBarLeft1</span> <span class="title-bar-title">GFGTitleBarLeft2</span> </div> </div> </body> </html>
Producción:
Barra de título en el lado izquierdo
Ejemplo 2: El siguiente código muestra la barra de título del fregadero de la cocina izquierda y derecha.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Kitchen Sink Title bar</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks </h1> <strong>Foundation CSS Kitchen Sink Title bar</strong> </center> <div class="title-bar"> <div class="title-bar-left"> <button class="menu-icon" type="button"></button> <span class="title-bar-title">GFGTitleBarLeft</span> </div> <div class="title-bar-right"> <span class="title-bar-title">GFGTitleBarRight</span> </div> </div> </body> </html>
Producción:
Barra de título en ambos lados
Enlace de referencia: https://get.foundation/sites/docs/kitchen-sink.html
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA