Los complementos de Foundation CSS contienen muchas funciones y cada función tiene un comportamiento único. El desplazamiento suave permite desplazarse a la sección específica dentro de la página web sin actualizar.
La lista completa de complementos CSS de Foundation se enumeran a continuación:
- Fundación CSS Cumplir
- Fundación CSS Abide Estado inicial
- Fundación CSS Respetar el estado de error
- Foundation CSS Respetar las entradas ignoradas
- Foundation CSS Requerido Radio y casilla de verificación
- Oyente de eventos Foundation CSS Abide
- Foundation CSS Respetar patrones incorporados y validadores
- Foundation CSS Respetar la adición de un patrón personalizado y un validador
- Fundación CSS Respetar jQuery Conflicto
- Fundación CSS Abide Accesibilidad
- Fundación CSS Abide Sass Referencia
- Base CSS Respetar la referencia de JavaScript
- Ecualizador básico de CSS
- Anidamiento del ecualizador CSS básico
- Foundation CSS Ecualizador Ecualizar por fila
- Referencia de JavaScript del ecualizador de CSS básico
- Intercambio CSS básico
- Alternador CSS básico
- Fundación CSS Desplazamiento suave
- Instalación de desplazamiento suave de Foundation CSS
- Foundation CSS Smooth Scroll Referencia de JavaScript
- Fundación CSS Sticky
- Fundación CSS Sticky Avanzado
- Fundación CSS Pegar a la parte inferior
- Navegación fija de CSS básico
- Referencia de JavaScript Sticky CSS de Foundation
El siguiente ejemplo le dará una breve idea sobre los complementos de Foundation CSS:
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Foundation CSS Equalizer Equalize By Row
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"
crossorigin="anonymous">
</script>
<style>
body {
padding: 0 100px;
}
</style>
</head>
<body>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h4>Foundation CSS Equalizer Equalize By Row</h4>
<div class="grid-x grid-margin-x" data-equalizer
data-equalize-by-row="true">
<div class="cell medium-8">
<div class="callout" data-equalizer-watch>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220305173028/starts-300x218.png">
</div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<p>
This article in on the Equalizer
Component of Foundation CSS. It
is published in GeeksforGeeks
Platform.
</p>
</div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220302090848/star5.png">
</div>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA