Botón de fregadero de cocina Foundation CSS

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. El botón representa un botón en el que se puede hacer clic, que se puede utilizar para enviar los datos del formulario o para realizar una acción específica con la funcionalidad de botón estándar.

Clases de botón de fregadero de cocina Foundation CSS:

button: esta clase se usa para agregar la funcionalidad del botón a los elementos.
éxito: esta clase se utiliza para mostrar la finalización exitosa de la acción con un color verde.
alerta: esta clase se utiliza para mostrar la acción potencialmente peligrosa o fallida con un color rojo.
advertencia: esta clase se usa para notificar la acción particular que debe realizarse y se representa con el color amarillo.
tiny: Esta clase se usa para hacer que los botones sean de un tamaño muy pequeño.
pequeño: esta clase se usa para hacer que el botón sea de tamaño pequeño pero aún así es más grande que el botón pequeño.
grande: esta clase se usa para hacer que el botón sea más grande.
expandido: Esta clase se utiliza para hacer que el botón se expanda para cubrir todo el ancho de la pantalla en la que se visualiza el sitio web.
grupo de botones : esta clase ayuda a crear un grupo de botones, dispuestos uno al lado del otro en una fila.
hueco: Esta clase ayuda a crear botones de estilo hueco (es decir, tienen bordes de diferentes colores y fondo transparente).
disabled: esta clase se utiliza para desactivar la funcionalidad del botón.

Sintaxis :

<button type="button" 
            class="Kitchen-Sink-Button-Classes button"> 
Button </button>

Ejemplo 1: el siguiente ejemplo describe el botón del fregadero de la cocina en Foundation CSS. Aquí, hemos creado un botón de estilo hueco usando la clase » .hueco » para el elemento, que contiene los diferentes colores usando las clases «.alerta», «.advertencia», «.éxito».

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Kitchen Sink Button</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 Button
    </title>
</head>
  
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>Foundation CSS Kitchen Sink Buttons</h2>
    <button type="button" 
            class="hollow success button">
        Success
    </button>
    <button type="button" 
            class="hollow warning button">
        Warning
    </button>
    <button type="button" 
            class="hollow alert button">
        Alert
    </button>
</body>
</html>

Producción:

Botón de fregadero de cocina Foundation CSS

Ejemplo 2: El siguiente ejemplo describe el botón del fregadero de la cocina en Foundation CSS. Aquí, hemos desactivado un botón utilizando la clase » .disabled » en Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Kitchen Sink Button</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 Button
    </title>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h2>Foundation CSS KitchenSink Buttons</h2>
    <button type="button" 
            class="button">
      Button 1 
    </button>
    <button type="button" 
            class="button disabled">
      Button 2 
    </button>
</body>
</html>

Producción:

Botón de fregadero de cocina Foundation CSS

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

HTML

HTML

Deja una respuesta Cancelar la respuesta