Material Design Lite-环境设置

📌 相关文章

📜 Material Design Lite-环境设置

📅 最后修改于: 2020-10-22 05:46:23 🧑 作者: Mango

有两种方法可以使用Material Design Lite-

本地安装-您可以在本地计算机上下载material。{primary}-{accent} .min.css和material.min.js文件，并将其包含在HTML代码中。
基于CDN的版本-您可以直接从内容交付网络（CDN）将material。{primary}-{accent} .min.css和material.min.js文件包含到HTML代码中。

本地安装

请按照以下步骤安装MDL-

转到https://www.getmdl.io/started/index.html下载可用的最新版本。
然后，将下载的material.min.js文件放在您网站的目录中，例如/ js和/ css中的material.min.css 。

例

现在，您可以在HTML文件中包含css和js文件，如下所示-

现场演示

The Material Design Lite Example
      
      
      
      
   
   
   
      
         
            Material Design
            
               Home
               Features
               About Us
               Log Out
            
         
         
         
            Hello World!

上面的程序将产生以下结果-

基于CDN的版本

您可以直接从Content Delivery Network（CDN）将js和css文件包含到HTML代码中。 storage.googleapis.com提供最新版本的内容。

在本教程中，我们一直使用该库的storage.googleapis.com CDN版本。

例

现在，让我们使用Google CDN中的material.css和material.js重写以上示例。

现场演示

The Material Design Lite Example
      
      
      
      
   
   
   
      
         
            Material Design
            
               Home
               Features
               About Us
               Log Out
            
         
         
         
            Hello World!

上面的程序将产生以下结果-