Foundation CSS 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. El marco se basa en bootst , 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. El control deslizante se usa para especificar el rango de valores cuando arrastramos el control deslizante. Se usa cuando queremos establecer el rango y el usuario puede elegir el rango desde el control deslizante.
Clases usadas:
- slider : Se utiliza para crear el slider.
- slider-handle : Se utiliza para crear el control deslizante.
- slider-fill : Se utiliza para rellenar el slider.
Syntax: <div class="slider" data-slider data-initial-start="1" data-end="100"> <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span> <span class="slider-fill" data-slider-fill></span> <input type="hidden"> </div>
Ejemplo 1: el código siguiente muestra el control deslizante del fregadero de cocina horizontal .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink</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>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<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"
integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs=sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw=="
crossorigin="anonymous"
></script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Foundation CSS Kitchen Sink Slider</h3>
<div class="slider" data-slider data-initial-start="1" data-end="100">
<span
class="slider-handle"
data-slider-handle
role="slider"
tabindex="1"
></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden" />
</div>
<div class="slider" data-slider data-initial-start="20" data-end="150">
<span
class="slider-handle"
data-slider-handle
role="slider"
tabindex="1"
></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden" />
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra el control deslizante vertical del fregadero de la cocina.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink</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>
<link
rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<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"
integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs=sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw=="
crossorigin="anonymous"
></script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Foundation CSS Kitchen Sink Slider</h3>
<div
class="slider vertical"
data-slider
data-initial-start="1"
data-end="100"
data-vertical="true"
>
<span
class="slider-handle"
data-slider-handle
role="slider"
tabindex="1"
></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden" />
</div>
<div
class="slider vertical"
data-slider
data-initial-start="15"
data-end="150"
data-vertical="true"
>
<span
class="slider-handle"
data-slider-handle
role="slider"
tabindex="1"
></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden" />
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Enlace de referencia: https://get.foundation/sites/docs/kitchen-sink.html#slider
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