Forum | Derniers tutoriels de développement web
 

Material Design Lite Tutorial


Material Design Lite, MDL est une bibliothèque de composants d'interface utilisateur créé avec CSS, JavaScript et HTML. composants MDL 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 Material Design Lite 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 Material Design Lite 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 -

<html>
   <head>
      <title>The Material Design Lite Example</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
      <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">Material Design</span>
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="">Home</a>
               <a class="mdl-navigation__link" href="">Features</a>
               <a class="mdl-navigation__link" href="">About Us</a>
               <a class="mdl-navigation__link" href="">Log Out</a>
            </nav>
         </div>
         <main class="mdl-layout__content">
            <div class="page-content" style="padding-left:100px;">Hello World!</div>
         </main>
      </div>
   </body>
</html>