Forum | Neueste Web-Entwicklung Tutorials
 

Material Design Lite Lernprogramm


Material Design Lite, MDL ist ein UI-Komponenten-Bibliothek mit CSS erstellt, JavaScript und HTML. MDL-UI-Komponenten hilft bei der Konstruktion attraktiv, konsistente und funktionalen Web-Seiten und Web-Anwendungen, während die moderne Web-Design-Prinzipien wie Browser Portabilität, Geräteunabhängigkeit haftet, und Graceful Degradation. Es hilft bei der Erstellung schneller, schön und ansprechende Websites. Es wird von Google Material Design inspiriert.


Publikum

Dieses Tutorial ist für Profis gedacht, die die Grundlagen der Material Design Lite lernen möchten und wie es zu benutzen, um schneller, schön zu erstellen, und reaktions Websites. Dieses Tutorial erklärt alle grundlegenden Konzepte von Material Design Lite.


Voraussetzungen

Bevor Sie mit dieser Übung fortfahren, sollten Sie ein grundlegendes Verständnis von HTML, CSS, JavaScript, Document Object Model (DOM) haben, und einem beliebigen Texteditor. Darüber hinaus wird es helfen, wenn Sie wissen, wie Web-basierten Anwendungen arbeiten.


Führen Material Design Lite Online

Für die meisten der Beispiele in diesem Tutorial gegeben, erhalten Sie einen Try-it - Option zu finden. Verwenden Sie diese Option, um Ihr Material Design Lite-Programme an Ort und Stelle durchführen und genießen Sie das Lernen.

Versuchen Sie das folgende Beispiel mit der Try-it - Option verfügbar in der oberen rechten Ecke des folgenden Beispielcode box -

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