Latest web development tutorials

Fundação começou

O que é a Fundação?

  • Fundação é uma estrutura de front-end livre para o desenvolvimento rápido.
  • Fundação contém modelos de design de HTML e CSS, oferece uma variedade de componentes de interface do usuário na Web, tais como formulários, botões, abas, e assim por diante. JavaScript também fornece uma variedade de plug-ins.
  • Fundação móvel em primeiro lugar, você pode criar páginas Web responsivos.
  • Fundação para iniciantes e profissionais.
  • Fundação tem sido utilizada em Facebook, eBay, Samsung, Amazon, Disney e assim por diante.

notaO que é web design ágil?
Web Design Responsive (Web design responsivo) filosofia é: a concepção e desenvolvimento da página deve ser uma resposta apropriada e ajustar com base no comportamento do usuário e ambiente do dispositivo (plataforma, tamanho da tela, a orientação da tela, etc.).

Baixar Foundation Onde?

Você pode ser duas maneiras de obter a Fundação:

1. Faça o download da versão mais recente do site oficial: http://foundation.zurb.com/ .

2, use este site oficial tutorial fornece 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>

CDN Ali nuvem baseada em serviços site estático.

notaFundação usa vantagens CDN:
Fundação usa CDN melhorar o site corporativo (em particular, contém um monte de fotos e páginas estáticas do site) velocidade de acesso, e melhorar muito a estabilidade da natureza acima do local

Por Modernizr?
Algum componente Foundation utiliza HTML5 e CSS3 recursos de ponta em comparação antes, mas nem todos os navegadores suportam. Modernizr é usado para detectar o navegador do usuário HTML5 e CSS3 de bibliotecas JavaScript - permite que os componentes para funcionar adequadamente em todos os navegadores.

Criação de páginas usando Foundation

1. Adicione o doctype HTML5

elementos de fundação usando atributos HTML e CSS, então você precisa adicionar HTML5 declaração doctype tipo de documento.

Enquanto isso, podemos definir o idioma e atributos de codificação de caracteres do documento lang:

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

2. Fundação 5 móvel primeira

Fundação 5 para dispositivos móveis de design responsivo. A prioridade é para mover a estrutura central.

Para garantir que as páginas livres para fazer zoom e <head> adicionar os seguintes elementos no <meta> tag:

<Meta name = "viewport" content = "width = device-width, initial-scale = 1">
  • largura: controlar o tamanho da janela de visualização, um valor pode ser especificado, se a 600, ou o valor especial, tal como o dispositivo de largura da largura do dispositivo (em pixels CSS dimensionado para 100% do tempo).
  • inicial escala: a escala inicial, isto é, quando a primeira escala de tempo de carregamento da página.

3. Componentes Inicializar

Alguns componentes são baseados no jQuery Foundation aberta, tais como: caixas de modais, menus pull-down. Você pode usar o seguinte script para inicializar componentes:

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

Página Foundation Basic

Como criar uma página básica fundação: 

<!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>

tente »