Materializar - Configuración del entorno

En este capítulo, analizaremos los diferentes aspectos de la creación de un entorno agradable para Materialise.

Pruébelo en línea

Hemos configurado el entorno de Materialise Programming en línea, para que pueda compilar y ejecutar todos los ejemplos disponibles en línea. Le da confianza en lo que está leyendo y le permite verificar los programas con diferentes opciones. Siéntase libre de modificar cualquier ejemplo y ejecutarlo en línea.

Pruebe el siguiente ejemplo utilizando nuestro compilador en línea disponible en CodingGround
<!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>
Para la mayoría de los ejemplos dados en este tutorial, encontrará una opción Pruébelo en las secciones de código de nuestro sitio web en la esquina superior derecha que lo llevará al compilador en línea. Así que utilícelo y disfrute de su aprendizaje.

¿Cómo utilizar Materialise?

Hay dos formas de utilizar Materialise:

Local Installation - Puedes descargar el materialize.min.css y materialize.min.js archivos en su máquina local e inclúyalo en su código HTML.

CDN Based Version - Puede incluir el materialize.min.css y materialize.min.js archivos en su código HTML directamente desde Content Delivery Network (CDN).

Instalación local

Ir http://materializecss.com/getting-started.html para descargar la última versión disponible.
Luego, coloque el descargado materialize.min.js archivo en un directorio de su sitio web, por ejemplo, / js y materialize.min.css en / css.

Ejemplo

Incluir la css y js en su archivo HTML de la siguiente manera.

<!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 = "/materialize/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "/materialize/materialize.min.js"></script>             
   </head>
  
   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

Producirá el siguiente resultado.

Versión basada en CDN

Puede incluir el materialize.min.js y materialize.min.css archivos en su código HTML directamente desde Content Delivery Network (CDN). cdnjs.cloudflare.com proporciona contenido para la última versión.

Estamos utilizando la versión CDN cdnjs.cloudflare.com de la biblioteca a lo largo de este tutorial.

Ejemplo

Vuelva a escribir el ejemplo anterior usando materialize.min.css y materialize.min.js de cdnjs.cloudflare.com CDN.

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

Producirá el siguiente resultado: