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.
Foundation CSS Kitchen Sink Kitchen Sink Switch se usa para agregar los interruptores de palanca para cambiar sus estados.
- a
<div class="switch tiny"> .... </div>
Ejemplo 1: El siguiente ejemplo ilustra el uso del interruptor del fregadero de la cocina con el interruptor tinyclass.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
<style>
.switch-paddle {
background-color: green;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<div class="grid-container">
<h6>Kitchen Sink tiny switch</h6>
<div class="switch tiny"
style="margin-left: 50px;">
<input class="switch-input"
id="switch-1"
type="checkbox">
<label class="switch-paddle"
for="switch-1">
</label>
</div>
</div>
</body>
</html>
Producción:
Pequeño interruptor de fregadero de cocina
Ejemplo 2: El siguiente ejemplo ilustra el uso del interruptor del fregadero de la cocina con un interruptor de clase pequeña.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
<style>
.switch-paddle {
background-color: green;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<div class="grid-container">
<h6>Kitchen Sink small switch</h6>
<div class="switch small"
style="margin-left: 50px;">
<input class="switch-input"
id="switch-2"
type="checkbox">
<label class="switch-paddle"
for="switch-2">
</label>
</div>
</div>
</body>
</html>
Producción:
Pequeño interruptor de fregadero de cocina
Ejemplo 3: El siguiente ejemplo ilustra el uso del interruptor del fregadero de la cocina con un interruptor de clase grande.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
<style>
.switch-paddle {
background-color: green;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<div class="grid-container">
<h6>Kitchen Sink large switch</h6>
<div class="switch large">
<input class="switch-input"
id="switch-3"
type="checkbox">
<label class="switch-paddle"
for="switch-3">
</label>
</div>
</div>
</body>
</html>
Producción:
Interruptor grande para fregadero de cocina
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#switch
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA