Forum | Gli ultimi tutorial di sviluppo web
 

Material Design Lite lezione


Materiale Design Lite, MDL è una libreria di componenti di interfaccia utente creato con i CSS, JavaScript e HTML. componenti dell'interfaccia utente MDL aiuta nella costruzione di pagine web interessanti, coerenti e funzionali e applicazioni web nel rispetto moderni principi di web design come la portabilità del browser, l'indipendenza dal dispositivo, e il degrado grazioso. Essa aiuta a creare più velocemente, belle, e reattivi siti web. E 'ispirato da Google Material Design.


Pubblico

Questo tutorial è pensato per i professionisti che desiderano imparare le basi di materiale Design Lite e come utilizzarlo per creare più veloce, bello, e siti web sensibili. Questo tutorial spiega tutti i concetti fondamentali di materiale Design Lite.


Prerequisiti

Prima di procedere con questo tutorial, si dovrebbe avere una conoscenza di base di HTML, CSS, JavaScript, Document Object Model (DOM), e qualsiasi editor di testo. Inoltre, vi aiuterà se si sa come funzionano le applicazioni web-based.


Esegui Material Design Lite in linea

Per la maggior parte degli esempi forniti in questo tutorial, si trova un Try-it opzione. Utilizzare questa opzione per eseguire i programmi Material Design Lite sul posto e godetevi il vostro apprendimento.

Provate il seguente esempio utilizzando l'opzione Try-it disponibile nell'angolo in alto a destra della casella seguente codice di esempio -

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