Форум | Последние учебники веб-разработки
 

Материал Design Lite Учебник


Материал Design Lite, MDL является библиотека компонентов пользовательского интерфейса, созданные с помощью CSS, JavaScript и HTML. компоненты MDL UI помогает в построении привлекательных, последовательные и функциональные веб-страниц и веб-приложений, придерживаясь современных принципов веб-дизайна, как браузер мобильности, независимости устройств и грациозной деградации. Это помогает в создании быстрее, красивые и адаптивные веб-сайты. Он вдохновлен от Google Material Design.


Аудитория

Данное учебное пособие предназначено для специалистов, которые хотели бы изучить основы Material Design Lite и как использовать его для создания быстрее, красивый, отзывчивый веб-сайтов. Этот учебник объясняет все основные понятия Material Design Lite.


Предпосылки

Прежде чем приступить к этой обучающей программе, вы должны иметь базовое понимание HTML, CSS, JavaScript, Document Object Model (DOM), и в любом текстовом редакторе. Кроме того, это поможет, если вы знаете, как работают веб-приложения.


Выполнить Material Design Lite Online

Для большинства из примеров , приведенных в данном руководстве, вы найдете опциюTry-его.Используйте эту опцию для выполнения ваших программ Material Design Lite на месте и наслаждаться обучения.

Попробуйте следующий пример , используя опциюПримерьте его доступным в правом верхнем углу следующего блока образца кода -

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