颜色 - Materialize 中文

以下是一个基于 Material Design 基础颜色的调色板。每种颜色都使用基础颜色类和可选的变亮或变暗类进行定义。

若要应用背景颜色，只需将颜色名称和明暗度作为类添加到元素中即可。

这是一个带有 teal lighten-2 类的卡片面板


  <div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>

若要应用文本颜色，只需像这样将 -text 附加到颜色类

这是一个带有深蓝色文本的卡片面板


  <div class="card-panel">
    <span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
  </div>

对于背景颜色，你可以通过扩展类来应用颜色，如下例所示。


  .ilike-blue-container {
    @extend .blue, .lighten-4;
  }

对于更改文本颜色，你可以通过扩展类来应用颜色，如下例所示。


  .ilike-blue-container {
    @extend .blue-text, .text-lighten-4;
  }