Materialise CSS 介绍与安装

介绍：
Materialise 是一种设计语言，它结合了成功设计的经典原则以及创新和技术。 Materialise 由 Google 创建和设计。谷歌的目标是开发一个设计系统，允许其所有产品在任何平台上的统一用户体验。

特征：

• 它更易于使用。
• 它使网页动态和响应。
• 它使网页也兼容手机、平板电脑、笔记本电脑。
• 在 materializecss.com 上免费提供

安装Materialize：有以下两种安装Materialize的方法。

方法一：到 Materialise CSS 的官方文档 https://materializecss.com/getting-started.html 下载可用的最新版本。之后将下载的materialize.min.js和materialize.min.css文件放在项目的目录中。

方法二：也可以使用CDN版本安装。在脚本标签中包含以下 CDN 链接。

现在让我们通过一个示例来了解 Materialise 的工作原理。

示例：下面的示例显示了 Materialize CSS 中对话框的实现。

HTML

  

    
    
    
    
    
  
    
        function Toast1(string, timeLength) {
            Materialize.toast(
                '<em>' + string + '</em>', timeLength
            );
        }
        function Toast2(string, timeLength) {
            Materialize.toast(
                '<b>' + string + '</b>', timeLength, 'rounded'
            );
        }
        function Toast3(string, timeLength) {
            Materialize.toast(
                '<u>' + string + '<u>', timeLength
            );
        }
    

  

    
        Toasts
        
            Emphasized Alert!!
        
  
        
            Bold N rounded Alert!!
        
  
        
            Underlined Alert!!
        
    

  

输出：