Fórum | tutoriais mais recente desenvolvimento web
 

Materialize Tutorial



Materializar é uma biblioteca de componentes de interface do usuário criado com CSS, JavaScript e HTML. Materializam componentes de interface do usuário ajuda na construção atraentes, consistentes e funcionais páginas web e aplicações web, enquanto que aderem aos princípios de web design modernos, como a portabilidade do navegador, a independência do dispositivo e degradação suave. Ele ajuda na criação de mais rápido, bonito, e responsivos websites. É inspirado pela Design Google material.


Público

Este tutorial é destinado a profissionais que gostariam de aprender as noções básicas de material de concepção Lite e como usá-lo para criar mais rápido, bonito e sites responsivos. Este tutorial explica todos os conceitos fundamentais de material de concepção Lite.


Pré-requisitos

Antes de prosseguir com este tutorial, você deve ter um conhecimento básico de HTML, CSS, JavaScript, Document Object Model (DOM), e qualquer editor de texto. Além disso, ele vai ajudar se você sabe como aplicativos baseados na Web funciona.


Executar Materialize on-line

Para a maioria dos exemplos dados neste tutorial, você vai encontrar uma opção Try-lo. Use esta opção para executar seus programas materializar no local e desfrutar da sua aprendizagem.

Tente o seguinte exemplo usando a opção Try-lo disponível no canto superior direito da caixa de código de exemplo a seguir -

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">      
	  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>             
  </head>
  <body>
      <div class="card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>