materialize_使用Materialize快速介绍材料设计

materialize

什么是材料设计？ (What is Material Design?)

Material Design is a design language created by Google. According to material.io, Material Design aims to combine:

Material Design是Google创建的一种设计语言。根据material.io ，Material Design旨在结合：

…classic principles of good design with the innovation and possibility of technology and science. It aims to develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all ﬁrst-class input methods.

…具有创新性和技术与科学可能性的优秀设计经典原则。它旨在开发一个单一的基础系统，以实现跨平台和设备尺寸的统一体验。移动戒律是最基本的，但是触摸，语音，鼠标和键盘都是一流的输入法。

为什么要使用Material Design？ (Why use Material Design?)

Material Design provides a seamless user experience across all devices. Responsive transitions and animation, along with padding and depth effects such as shadows and lightning, make it feel elegant and user-friendly. Google uses Material Design on almost all its apps (like Keep and Calendar).

Material Design在所有设备上提供无缝的用户体验。响应式过渡和动画以及诸如阴影和闪电之类的填充和深度效果，使其感觉优雅且用户友好。 Google几乎在其所有应用程序(例如Keep和Calendar)上都使用Material Design。

如何在Web应用程序中使用Material Design？ (How can you use Material Design in your web apps?)

Materialize is a responsive front-end component library similar to Bootstrap. It offers everything that Bootstrap has to offer, but the difference is that Materialize follows material design principles. Here’s an example template.

Materialize是一个类似于Bootstrap的响应式前端组件库。它提供了Bootstrap必须提供的所有内容，但不同之处在于Materialize遵循材料设计原则。这是一个示例模板。

这是Materialize提供的功能列表： (Here’s a list of features that Materialize offers:)

Grid
格
Tables
桌子
Badges, buttons, breadcrumbs
徽章，纽扣，面包屑
Cards, chips, collections
卡，筹码，收藏
Footer, forms
页脚，表格
Navbar
导航栏
And a lot more!
还有更多！

如何开始 (How to get started)

Unlike Bootstrap, Materialize does not require popper.js. It only requires jQuery. This is all you need to get started. Add this to your HTML and you’ll be good to go!

与Bootstrap不同，Materialize不需要popper.js。它只需要jQuery。这就是您开始所需要的。将此添加到您HTML中，您将一路顺风！

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--Compiled and minifed jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

色彩 (Colors)

Using Materialize, you can change the color of any HTML element by simply giving it a class name of the color you want. For example, if you want to give your paragraph tag the color red, you do the following:

使用Materialize，只需给它提供所需颜色的类名，就可以更改任何HTML元素的颜色。例如，如果要将段落标签的颜色设置为红色，请执行以下操作：

<p class=”red”>Lorem Ipsum</p>

Additionally, you can also lighten or darken a color by giving it another class name lighten-1 or darken-1. For example, <h1 class=”blue lighten-1”>Sample Text</h1>. The 1 can be replaced with numbers up to 5 for lighten and up to 4 for darken. Higher numbers would apply lighter or darker shades of the color.

此外，您还可以通过给颜色另一个类名称lighten-1或darken-1使颜色变暗或darken-1 。例如， <h1 class=”blue lighten-1”>Sample Tex t </ h1>。 1可以用最多5的数字代替变亮，最多4的数字代替。较高的数字将应用较浅或较深的颜色阴影。

纽扣 (Buttons)

To Materialize a button, just give it the class name btn. You can also add a cool animation to it by giving it another class waves-effect. If you need a larger button, btn-large class can be used. For example:

要实现按钮，只需为其指定类名称btn 。您还可以通过给它另一个类waves-effect为其添加一个很酷的动画。如果需要更大的按钮，则可以使用btn-large类。例如：

<button class=”btn”>Click
</button> <!-- Materialized button without click animation -->
<button class="btn waves-effect">Click
</button> <!-- Materialized button with click animation -->
<button class="btn-large">Click
</button> <!-- Large Button -->

阴影 (Shadow)

In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.

在材料设计中，所有内容都应具有一定的z深度，该深度确定元素凸起或靠近页面的距离。

To apply a shadow-effect to an element, the z-depth-2 class can be used (2 can be replaced with numbers 1–5). For example:

要将阴影效果应用于元素，可以使用z-depth-2类(可以将2替换为数字1-5)。例如：

<div class="z-depth-2"><!-- Really cool stuff --></div>

结论 (Conclusion)

I’ve only scratched the surface here. There is a lot more available in Materialize (like transitions, cards, carousel, and modals). You can learn how to use all the components from the docs. Class names are very simple and the grid is really helpful to create responsive columns quickly. I wish you good luck!

我只在这里刮过表面。在Materialize中有很多可用的功能(例如过渡，卡，转盘和模态)。您可以从docs了解如何使用所有组件。类名非常简单，网格对于快速创建响应列非常有帮助。祝你好运！