Materialise CSS安装 _MaterializeCSS

本文概述

如何使用本地安装
如何使用基于CDN的版本

有两种安装和使用Materialize CSS的方法。
本地安装：你可以通过在本地系统上下载materialize.min.css和materialize.min.js文件并将其包含在HTML代码中来使用Materialize CSS。
基于CDN的版本：你可以通过直接从内容交付网络(CDN)将materialize.min.css和materialize.min.js文件包含到HTML代码中来使用Materialize CSS。
如何使用本地安装第1步：转到http://materializecss.com/getting-started.html下载可用的最新版本。

文章图片

文章图片
步骤2：将下载的materialize.min.js文件放在你网站的目录中, 例如/ js和/ css中的materialize.min.css。
【Materialise CSS安装】例：

< !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 = "http://www.srcmini.com/materialize/materialize.min.css"> < script type = "text/javascript"src = "https://code.jquery.com/jquery-2.1.1.min.js"> < /script> < script src = "http://www.srcmini.com/materialize/materialize.min.js"> < /script> < /head> < body> < div class = "card-panel teal lighten-2"> < h3> Hello srcmini!< /h3> < /div> < /body> < /html>

立即测试
如何使用基于CDN的版本直接从内容交付网络(CDN)将materialize.min.js和materialize.min.css文件包含到HTML代码中。 cdnjs.cloudflare.com提供最新版本的内容。
例子
让我们使用cdnjs.cloudflare.com CDN中的materialize.min.css和materialize.min.js重写以上示例。

< !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 srcmini!< /h3> < /div> < /body> < /html>

立即测试
它将显示相同的结果。