Neueste Web-Entwicklung Tutorials
 

Materialize Lernprogramm



Materialize ist eine UI - Komponenten - Bibliothek mit CSS erstellt, JavaScript und HTML. Materialize UI - Komponenten helfen bei der Konstruktion attraktiv, konsistente und funktionale Web - Seiten und Web - Anwendungen , während den modernen Web - Design - Prinzipien wie Browser Portabilität, Geräteunabhängigkeit haftet, und Graceful Degradation. Es hilft bei der Schaffung schneller, schöner und reaktions Websites. Es wird von Google Material Design inspiriert.


Publikum

Dieses Tutorial ist für Profis gedacht, die die Grundlagen des Material Design Lite lernen möchten und wie es verwenden, 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 haben (DOM) und einem beliebigen Texteditor. Darüber hinaus wird es helfen, wenn Sie wissen, wie Web-basierten Anwendungen arbeiten.


Execute Materialize Online

Für die meisten der Beispiele in diesem Tutorial gegeben, werden Sie einen finden Try-it - Option. Verwenden Sie diese Option , um auszuführen Materialize Programme vor Ort und Ihren Lern 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>