Materialise CSS颜色 _MaterializeCSS

Materialise支持多种颜色类别。这些颜色类别的启发和发展是考虑到市场营销, 路标和便签中使用的颜色。

红色
粉
紫色
深紫色
靛青
蓝色
浅蓝
青色
蓝绿色
绿色
浅绿色
酸橙
黄色
琥珀色
橙子
深橙色
棕色
灰色
蓝灰色
黑色
白色
透明

用法
以下是明度/暗度类别的列表, 可用于更改所应用的颜色。

减轻1
减轻2
减轻3
减轻4
减轻5
变暗1
变暗2
变暗3
变暗4
口音1
口音2
口音3
口音4

例子
下面的示例演示如何使用上述类来渲染背景或更改文本的颜色。如果是背景, 则添加类, 如果是文本, 则将” -text” 添加到颜色类, 并将” text-“ 添加到闪电类。

< !DOCTYPE html> < html> < head> < title> The Materialize Colors 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> < h2> Color Theme Demo< /h2> < hr/> < div class = "card-panel"> < div class = "card-panel red lighten-2"> < h1> Red Colored Theme< /h1> < /div> < span class = "red-text text-darken-2"> < h2> Red Colored Text< /h2> < /span> < ul> < li class = "red lighten-5"> < p> Using red lighten-5< /p> < /li> < li class = "red lighten-4"> < p> Using red lighten-4< /p> < /li> < li class = "red lighten-3"> < p> Using red lighten-3< /p> < /li> < li class = "red lighten-2"> < p> Using red lighten-2< /p> < /li> < li class = "red lighten-1"> < p> Using red lighten-1< /p> < /li> < li class = "red"> < p> Using red< /p> < /li> < li class = "red darken-1"> < p> Using red darken-1< /p> < /li> < li class = "red darken-2"> < p> Using red darken-2< /p> < /li> < li class = "red darken-3"> < p> Using red darken-3< /p> < /li> < li class = "red darken-4"> < p> Using red darken-4< /p> < /li> < li class = "red accent-1"> < p> Using red accent-1< /p> < /li> < li class = "red accent-2"> < p> Using red accent-2< /p> < /li> < li class = "red accent-3"> < p> Using red accent-3< /p> < /li> < li class = "red accent-4"> < p> Using red accent-4< /p> < /li> < /ul> < /div> < /body> < /html>

【Materialise CSS颜色】立即测试