Materializar Tutorial

Materialise es una biblioteca de componentes de UI creada con CSS, JavaScript y HTML. Los componentes de Materialise UI ayudan a construir páginas web y aplicaciones web atractivas, consistentes y funcionales, al tiempo que se adhieren a los principios de diseño web moderno, como la portabilidad del navegador, la independencia del dispositivo y la degradación elegante. Ayuda a crear sitios web más rápidos, hermosos y receptivos. Está inspirado en Google Material Design.

Este tutorial está destinado a profesionales que deseen aprender los conceptos básicos de Materialise y cómo usarlo para crear páginas web y aplicaciones más rápidas, hermosas y receptivas. Este tutorial explica todos los conceptos fundamentales de Materialise.

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

Para la mayoría de los ejemplos dados en este tutorial, encontrará un Try-itopción. Utilice esta opción para ejecutar sus programas Materialise en el lugar y disfrute de su aprendizaje. Pruebe el siguiente ejemplo utilizando elTry-it opción disponible en la esquina superior derecha del siguiente cuadro de código de muestra.

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

Next page ↱