Foro | Los últimos tutoriales de desarrollo web
 

Materialize Tutorial



Materializar es una biblioteca de componentes de interfaz de usuario creado con CSS, JavaScript y HTML. Materializarse componentes de interfaz de usuario ayuda en la construcción de atractivos, coherentes y funcionales páginas web y aplicaciones web modernas, mientras que se adhieren a los principios de diseño web como la portabilidad del navegador, la independencia de dispositivo, y una degradación elegante. Esto ayuda en la creación de sitios web más rápido, bellos y sensibles. Se inspira de Google Diseño de materiales.


Audiencia

Este tutorial está dirigido a profesionales que deseen aprender las bases de diseño de materiales Lite y cómo utilizarlo para crear más rápido, hermoso y sitios web sensibles. Este tutorial explica todos los conceptos fundamentales de diseño de materiales Lite.


Requisitos previos

Antes de continuar con este tutorial, usted debe tener un conocimiento básico de HTML, CSS, JavaScript, Document Object Model (DOM), y cualquier editor de texto. Además, le ayudará si usted sabe cómo funcionan las aplicaciones basadas en web.


Ejecutar Materialize Online

Para la mayoría de los ejemplos dados en este tutorial, encontrará una opción Try-it. Utilice esta opción para ejecutar sus programas de materializarse en el lugar y disfrutar de su aprendizaje.

El siguiente ejemplo muestra el uso de la opción Try-a disposición en la esquina superior derecha de la siguiente ventana de código de ejemplo -

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