Forum | Derniers tutoriels de développement web
 

Materialize Tutorial



Matérialiser est une bibliothèque de composants d'interface utilisateur créé avec CSS, JavaScript et HTML. Matérialiser composants d'interface utilisateur aide à la construction de pages Web attrayantes, cohérentes et fonctionnelles et des applications web tout en adhérant aux principes de conception de sites Web modernes comme la portabilité du navigateur, l'indépendance de l'appareil, et la dégradation gracieuse. Il contribue à créer des sites Web plus rapide, belles et sensibles. Il est inspiré de Google Material Design.


Public

Ce tutoriel est destiné aux professionnels qui souhaitent apprendre les rudiments de Material Design Lite et comment l'utiliser pour créer plus rapide, beau et sites sensibles. Ce tutoriel explique tous les concepts fondamentaux de la Material Design Lite.


Conditions préalables

Avant de procéder à ce tutoriel, vous devriez avoir une compréhension de base de HTML, CSS, JavaScript, Modèle de document de l'objet (DOM), et un éditeur de texte. En outre, il vous aidera si vous savez comment les applications basées sur le Web fonctionnent.


Exécuter Materialize en ligne

Pour la plupart des exemples donnés dans ce tutoriel, vous trouverez une option Try-it. Utilisez cette option pour exécuter vos programmes Matérialiser sur place et profiter de votre apprentissage.

Essayez l'exemple suivant en utilisant le Try-il option disponible dans le coin supérieur droit de la boîte de code exemple suivant -

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