它是用HTML、CSS和JavaScript创建的，由谷歌设计。原生设计是一种结合了成功设计的经典原则以及创新和技术的设计语言。
颜色：这是基于原生设计基色的调色板。这些颜色中的每一个都由基本颜色类别和可选的变亮或变暗类别定义。
要应用背景色，只需添加颜色名称和明暗作为元素的类。
<!DOCTYPE html>
< html >
< head >
<!--Import Google Icon Font-->
< link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel = "stylesheet" >
<!-- Compiled and minified CSS -->
< link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" >
<!--Let browser know website is
optimized for mobile-->
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
</ head >
< body >
< div class = "card-panel green" >
lsbin
</ div >
<!-- Compiled and minified JavaScript -->
< script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" >
</ script >
</ body >
</ html >输出如下：
要应用文字颜色，只需像以前一样将-text附加到颜色类即可。
<!DOCTYPE html>
< html >
< head >
<!--Import Google Icon Font-->
< link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel = "stylesheet" >
<!-- Compiled and minified CSS -->
< link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" >
<!--Let browser know website is
optimized for mobile-->
< meta name = "viewport" content=
" width = device -width, initial-scale = 1 .0" />
</ head >
< body >
< div class = "card-panel" >
< span class = "green-text text-darken-2" >
lsbin
</ span >
</ div >
<!-- Compiled and minified JavaScript -->
< script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" >
</ script >
</ body >
</ html >输出如下：
以下是一些彩色调色板：
| 名称 | 十六进制 | 颜色 |
|---|---|---|
| 红色减光2 | #e57373 | |
| 红色变暗4 | #b71c1c | |
| 粉色减光3 | #f48fb1 | |
| 粉红变暗4 | #880e4f | |
| 紫色减3 | #ce93d8 | |
| 紫色口音2 | #e040fb | |
| 深紫色 | #673ab7 | |
| 靛青 | #3f51b5 | |
| 蓝色口音1 | #82b1ff | |
| 深青色3 | #00695c | |
| 绿色 | #4caf50 | |
| 浅绿色 | #8bc34a | |
| 浅绿色darken-4 | #33691e | |
| 黄色变暗4 | #f57f17 | |
| 棕色变暗1 | #6d4c41 |
你可以参考https://materializecss.com/color.html用于不同的调色板。
