Forum | Neueste Web-Entwicklung Tutorials
 

Materialize Lernprogramm



Materialize ist ein UI-Komponenten-Bibliothek mit CSS erstellt, JavaScript und HTML. Materialisieren 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 Sie Materialize Online

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

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

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