Materializar - Configuração do ambiente

Neste capítulo, discutiremos os diferentes aspectos da configuração de um ambiente adequado para o Materialize.

Experimente a opção online

Montamos online o ambiente Materializar Programação, para que você possa compilar e executar online todos os exemplos disponíveis. Dá a você confiança no que está lendo e permite que você verifique os programas com diferentes opções. Sinta-se à vontade para modificar qualquer exemplo e executá-lo online.

Experimente o seguinte exemplo usando nosso compilador online disponível em 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 a maioria dos exemplos fornecidos neste tutorial, você encontrará uma opção Experimente nas seções de código do nosso site no canto superior direito que o levará ao compilador online. Portanto, faça uso dele e aproveite seu aprendizado.

Como usar o Materialize?

Existem duas maneiras de usar Materializar -

Local Installation - Você pode baixar o materialize.min.css e materialize.min.js arquivos em sua máquina local e inclua-os em seu código HTML.

CDN Based Version - Você pode incluir o materialize.min.css e materialize.min.js arquivos em seu código HTML diretamente da Content Delivery Network (CDN).

Instalação Local

Vamos para http://materializecss.com/getting-started.html para baixar a versão mais recente disponível.
Em seguida, coloque o download materialize.min.js arquivo em um diretório do seu site, por exemplo, / js e materialize.min.css em / css.

Exemplo

Inclui o css e js arquivo em seu arquivo HTML da seguinte forma.

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

Isso produzirá o seguinte resultado.

Versão baseada em CDN

Você pode incluir o materialize.min.js e materialize.min.css arquivos em seu código HTML diretamente da Content Delivery Network (CDN). cdnjs.cloudflare.com fornece conteúdo para a versão mais recente.

Estamos usando a versão CDN cdnjs.cloudflare.com da biblioteca em todo este tutorial.

Exemplo

Reescreva o exemplo acima usando materialize.min.css e materialize.min.js do CDN cdnjs.cloudflare.com.

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

Isso produzirá o seguinte resultado -