Foundation Inicio
¿Qué es Foundation?
- Foundation es un framework front-end gratuito para desarrollo rápido.
- Foundation incluye plantillas de diseño HTML y CSS, proporciona varios componentes de UI para Web, como formularios, botones, Tabs, etc. También proporciona varios complementos de JavaScript.
- Foundation es mobile-first, permite crear páginas web responsivas.
- Foundation es adecuado para principiantes y profesionales.
- Foundation se utiliza en Facebook, eBay, Samsung, Amazon, Disney, etc.
 |
¿Qué es el diseño web responsivo? El concepto del diseño web responsivo (Responsive Web design) es: el diseño y desarrollo de la página debe responder y ajustarse según el comportamiento del usuario y el entorno del dispositivo (plataforma del sistema, tamaño de pantalla, orientación de pantalla, etc.). |
|---|
¿Dónde descargar Foundation?
Puedes obtener Foundation de las siguientes dos formas:
1. Descarga la última versión desde el sitio web oficial:http://foundation.zurb.com/。
2. Usa el CDN proporcionado por Staticfile (recomendado):
<!-- css 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.net/foundation/5.5.3/css/foundation.min.css"> <!-- jQuery 库 --> <script src="https://cdn.staticfile.net/foundation/5.5.3/js/vendor/jquery.js"></script> <!-- JavaScript 文件 --> <script src="https://cdn.staticfile.net/foundation/5.5.3/js/foundation.min.js"></script> <!-- modernizr.js 文件 --> <script src="https://cdn.staticfile.net/foundation/5.5.3/js/vendor/modernizr.js"></script>
El CDN estático de este sitio se basa en los servicios de Alibaba Cloud.
|
Ventajas de usar CDN con Foundation: El uso de CDN con Foundation mejora la velocidad de acceso de los sitios empresariales (especialmente sitios con muchas imágenes y páginas estáticas), y aumenta en gran medida la estabilidad de los sitios con estas características. ¿Por qué usar modernizr? Algunos componentes de Foundation utilizan características avanzadas de HTML5 y CSS3, pero no todos los navegadores las admiten. Modernizr es una biblioteca de JavaScript que detecta las características de HTML5 y CSS3 del navegador del usuario, lo que permite que los componentes funcionen correctamente en todos los navegadores. |
|---|
Crear páginas con Foundation
1. Añade el doctype de HTML5
Foundation utiliza elementos HTML y propiedades CSS, por lo que es necesario añadir la declaración de tipo de documento doctype de HTML5.
También podemos configurar el atributo de idioma lang del documento y la codificación de caracteres:
<html lang="zh-cn">
<head>
<meta charset="utf-8">
</head>
</html>
2. Foundation 5 es mobile-first
Foundation 5 está diseñado para ser responsivo en dispositivos móviles. El núcleo del framework es mobile-first.
Para garantizar que la página se pueda escalar libremente, se puede<head>agregar lo siguiente al elemento<meta>etiqueta:
- width: controla el tamaño del viewport; puede especificar un valor, como 600, o un valor especial, como device-width, que es el ancho del dispositivo (la unidad son píxeles CSS cuando la escala es del 100%).
- initial-scale: la escala inicial, es decir, la escala cuando la página se carga por primera vez.
3. Inicializar componentes
Algunos componentes de Foundation se desarrollan con jQuery, como: modales, menús desplegables, etc. Puedes usar el siguiente script para inicializar los componentes:
$(document).ready(function() {
$(document).foundation();
})
</script>
Página básica de Foundation
Cómo crear una página básica de Foundation:
Ejemplo de Foundation
Pruébalo »