css框架和js框架_实现-一种材料设计CSS框架

Google的Material Design旨在在网络以及移动应用程序上都能正常运行。 它在开发人员中越来越受欢迎，如果您也想采用它，则有很多方法可以在您的站点上实现Material Design。 您可以使用Polymer或Angular ，也可以使用Materialize 。

Materialize是一个基于材料设计原则的CSS框架，并带有Sass支持以进行更好的开发。 它具有易于使用的默认样式，并具有详细的文档。

您可以在其中找到许多有用的组件：对话框，模式，日期选择器，材质按钮，视差，卡片等。 它还具有许多导航选项供您选择，例如下拉菜单，菜单和选项卡中的幻灯片。 Materialize还使用12网格系统以及3个默认屏幕尺寸的媒体查询：最大宽度为600px的是移动设备，最大宽度为992px的平板电脑设备，大于992px的桌面设备被视为桌面设备。

入门

有两种方法可以开始使用Materialize：使用标准CSS或Sass 。 这两个资源都可以在这里下载。 您还可以使用以下命令以凉亭方式获得它们：

bower install materialize

获取源代码之后，请确保正确链接它们在项目文件上，或者如果使用的是Sass版本，则编译源代码。

特征

在本节中，我将解释Materialize提供的一些功能。

1. Sass Mixins

该框架带有Sass Mixins，当您编写某些CSS属性时，它会自动添加所有浏览器前缀。 必须确保在所有浏览器之间都具有兼容性，这是一个很棒的功能，并且尽量避免引起大惊小怪。

看一下以下动画属性：

-webkit-animation: 0.5s;
-moz-animation: 0.5s;
-o-animation: 0.5s;
-ms-animation: 0.5s;
animation: 0.5s;

这些代码行可以用一行Sass mixin重写，如下所示：

@include animation(.5s);

大约有19种主要的mixin 。 要查看完整列表，请转到MIXINS选项卡中的Sass类别。

2.流文本

其他前端框架使用固定文本，而Materialize实现真正的响应文本。 文本大小和行高也会相应地缩放以保持可读性。 对于较小的屏幕，行高会缩放较大。

要使用流文本，您只需在所需的文本上添加flow-text类即可。 例如：

<p class="flow-text">This is Flow Text.</p>

结帐的演示这里的流动文字部分。

3.波的波纹效果

材料设计还带有交互式反馈，其中一个著名的例子是波纹效应。 在Materialize中，此效果称为Waves 。 基本上，当用户单击或点击/触摸按钮，卡片或任何其他元素时，就会出现效果。 通过将waves-effect类添加到元素，可以轻松创建waves-effect 。

此代码段为您提供了波浪效果。

<a href="#" class="btn waves-effect">Submit</a>

默认情况下，波纹为灰色。 但是在背景为深色的情况下，您可能需要更改颜色。 要添加其他颜色，只需将waves-(color)添加到元素。 用颜色名称替换“（颜色）”。

<a href="#" class="btn waves-effect waves-light">Submit</a>

您可以选择7种颜色： 浅色，红色，黄色，橙色，紫色，绿色和蓝绿色 。 如果这些颜色不符合您的需求，您可以随时创建或自定义颜色。

4.阴影

为了传递元素之间的关系，材料设计建议在表面上使用高程。 Materialize通过其z-depth-(number)类实现了这一原理。 您可以通过将（数字）从1更改为5来确定阴影深度：

<div class="card">
   <p>Shadow depth 3</p>
   <p class="z-depth-3"></p>
</div>

下图显示了所有阴影深度。

5.按钮和图标

在Material Design中，主要有三种按钮类型： 凸起按钮 ， fab（浮动动作按钮）和平面按钮 。

凸起的按钮是默认按钮。 要创建此按钮，只需将btn类添加到您的元素中。 如果要在单击或按下时赋予波浪效果，请执行以下操作：

<a href="#" class="btn waves-effect waves-light">Button</a>

或者，您也可以在按钮的左侧或右侧为图标提供一个图标。 对于图标，您将需要添加带有图标类名称和位置的自定义<i>标记。 例如：

<a href="#" class="btn waves-effect waves-light"><i class="mdi-file-file-download left"></i>Download</a>

在以上代码段中，我们使用mdi-file-file-download类作为下载图标。 您可以使用大约740个不同的图标 。 要查看它们，请转到“图标”选项卡中的“ Sass”页面。

可以通过添加btn-floating类和所需的图标来创建浮动按钮。 例如：

<a href="#" class="btn-floating waves-effect waves-light"><i class="mdi-content-send"></i></a>

在“材料设计”中，通常在对话框中使用平面按钮。 要创建它，只需将btn-flat添加到您的元素中，如下所示：

<a href="#" class="btn-flat waves-effect waves-red">Decline</a>

此外，可以使用disabled类禁用按钮，并使用btn-large类将其btn-large 。

6.网格

Materialize使用标准的12列响应式网格系统。 响应分为三个部分： 移动设备的小（s） ，平板电脑的中等（m）和台式机的大（l） 。

要创建列，请使用s，m或l指示大小，然后使用网格号。 例如，当您要为移动设备创建一半大小的布局时，应在布局中包含s6类。 s6代表small-6 ，这表示小型设备上的6列。

您还必须在创建的布局中包含col类，并将其放在具有row类的元素中。 这样可以将布局正确地放入列中。 这是一个例子：

<div class="row">
  <div class="col s12">I have 12-columns or full width here</div>
  <div class="col s4">4-columns (one-third) here</div>
  <div class="col s4">4-columns (one-third) here</div>
  <div class="col s4">4-columns (one-third) here</div>
</div>

结果如下：

默认情况下， col s12是固定大小的，并且针对所有屏幕尺寸进行了优化，基本上与col s12 m12 l12相同。 但是，如果要为不同设备的列指定大小。 您需要做的就是列出其他尺寸，如下所示：

<div class="row">
  <div class="col s12">My width always has 12 columns everywhere</div>
  <div class="col s12 m6 l9">I have 12 columns on mobile, 6 on tablet and 9 on desktop</div>
</div>

看起来是这样的：

这些只是Materialize的一些功能。 要了解有关它们其他功能的更多信息，请转到文档页面。

翻译自: https://www.hongkiat.com/blog/materialize-material-design-framework/