srcmini本文概述
有两种安装和使用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。
例：
<!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 = "/materialize/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "/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>立即测试
它将显示相同的结果。
评论前必须登录！
注册