Latest web development tutorials

Fundación comenzó

¿Qué es la Fundación?

  • Fundación es un marco frontal libre para un rápido desarrollo.
  • Fundación contiene plantillas de diseño HTML y CSS, ofrece una variedad de componentes de interfaz de usuario en la Web, como formularios, botones, etiquetas, y así sucesivamente. JavaScript también proporciona una variedad de plug-ins.
  • Fundación móvil en primer lugar, puede crear páginas web adaptable.
  • Fundación para principiantes y profesionales.
  • Fundación se ha utilizado en Facebook, eBay, Samsung, Amazon, Disney y así sucesivamente.

notaQué es el diseño web adaptable?
Responsive Web Design (diseño web adaptable) filosofía es: el diseño y desarrollo de la página debe ser una respuesta apropiada y ajuste basado en el comportamiento del usuario y el entorno del dispositivo (plataforma, tamaño de pantalla, orientación de la pantalla, etc.).

Descarga Fundación Dónde?

Puede haber dos maneras de conseguir la Fundación:

1. Descarga la última versión desde el sitio web oficial: http://foundation.zurb.com/ .

2, utiliza este sitio web oficial tutorial proporciona CDN (recomendado): 

<!-- css 文件 -->
<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-5.5.3/foundation.min.css">

<!-- jQuery 库 -->
<script src="http://static.w3big.com/assets/jquery/2.0.3/jquery.min.js"></script>

<!-- JavaScript 文件 -->
<script src="http://static.w3big.com/assets/foundation-5.5.3/js/foundation.min.js"></script>

<!-- modernizr 文件 -->
<script src="http://static.w3big.com/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>

Ali basado en la nube de servicios CDN sitio estático.

notaFundación utiliza ventajas de CDN:
Fundación utiliza CDN mejorar el sitio de las empresas (en particular, contiene una gran cantidad de imágenes y páginas estáticas sitio) la velocidad de acceso, y mejorar en gran medida la estabilidad de la naturaleza por encima del sitio

¿Por Modernizr?
Algunos componentes Fundación utiliza características de HTML5 y CSS3 de vanguardia en comparación antes, pero admite que no todos los navegadores. Modernizr se utiliza para detectar el navegador de un usuario HTML5 y CSS3 de bibliotecas de JavaScript - permite que los componentes se ejecutan correctamente en todos los navegadores.

Creación de páginas utilizando Fundación

1. Agregar el tipo de documento HTML 5

Elementos de cimentación utilizando atributos HTML y CSS, por lo que es necesario agregar HTML5 declaración DOCTYPE tipo de documento.

Mientras tanto, podemos definir el idioma y la codificación de caracteres atributos lang documento:

<! DOCTYPE html>
<Html lang = "zh-cn ">
<Head>
<Charset Meta = "UTF-8 ">
</ Head>
</ Html>

2. Fundación 5 móvil primera

Fundación 5 para los dispositivos móviles de diseño sensible. La prioridad es para mover el marco básico.

Para asegurar las páginas libres para hacer un zoom <head> añadir los siguientes elementos en el <meta> etiqueta:

<Meta name = "viewport" content = "width = dispositivo de ancho, inicial escala = 1">
  • anchura: controlar el tamaño de la ventana, un valor se puede especificar, si 600, o el valor especial, tal como el dispositivo de anchura de la anchura del dispositivo (en píxeles CSS a escala en 100% de las veces).
  • inicial a gran escala: la escala inicial, es decir, cuando la primera carga de la página escala de tiempo.

3. Componentes Inicializar

Algunos componentes se basan en la Fundación jQuery abierta, tales como: cajas modales, menús desplegables. Puede utilizar la siguiente secuencia de comandos para inicializar componentes:

<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>

La página de fundamento básico

Cómo crear una página básica fundación: 

<!DOCTYPE html>
<html>
<head>
  <title>Foundation Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- css 文件 -->
  <link rel="stylesheet" href="http://static.w3big.com/assets/foundation-5.5.3/foundation.min.css">

  <!-- jQuery 库 -->
  <script src="http://static.w3big.com/assets/jquery/2.0.3/jquery.min.js"></script>

  <!-- JavaScript 文件 -->
  <script src="http://static.w3big.com/assets/foundation-5.5.3/js/foundation.min.js"></script>

  <!-- modernizr 文件 -->
  <script src="http://static.w3big.com/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
 
<div class="row">
  <div class="medium-12 columns">
    <div class="panel">
      <h1>Foundation 页面</h1>
      <p>重置窗口大小，查看效果！</p>
      <button type="button" class="button small">I Like It!</button>
    </div>
  </div>
</div>

<div class="row">
  <div class="medium-4 columns">
    <h3>Column 1</h3>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p>
  </div>
  <div class="medium-4 columns">
    <h3>Column 2</h3>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p>
  </div>
  <div class="medium-4 columns">
    <h3>Column 3</h3>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p>
  </div>
</div>

</body>
</html>

Trate »