srcminiMaterialise支持多种颜色类别。这些颜色类别的启发和发展是考虑到市场营销, 路标和便签中使用的颜色。
- 红色
- 粉
- 紫色
- 深紫色
- 靛青
- 蓝色
- 浅蓝
- 青色
- 蓝绿色
- 绿色
- 浅绿色
- 酸橙
- 黄色
- 琥珀色
- 橙子
- 深橙色
- 棕色
- 灰色
- 蓝灰色
- 黑色
- 白色
- 透明
用法
以下是明度/暗度类别的列表, 可用于更改所应用的颜色。
- 减轻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>立即测试
评论前必须登录！
注册