materialize_使用Materialize CSS框架制作材料设计网站

最新推荐文章于 2024-10-01 14:51:39 发布

culiu9261

最新推荐文章于 2024-10-01 14:51:39 发布

阅读量1.5k

点赞数

文章标签： html python css java js ViewUI

原文链接：https://scotch.io/tutorials/make-material-design-websites-with-the-materialize-css-framework

版权

本文介绍如何使用Materialize，一个基于Google Material Design的响应式前端框架，来构建一个投资组合网站。文章详细讲解了Material Design的概念，与Bootstrap和Foundation的区别，并通过实例展示了如何设置基本模板、应用颜色、构建网格、实现侧边导航、垂直对齐、深度效果、按钮、表格、图标、选项卡、材料框和下拉菜单。最后，作者还创建了一个包含介绍横幅、详细信息、项目展示、联系信息和页脚的完整投资组合网站示例。

摘要由CSDN通过智能技术生成

materialize

Materialize is a Responsive CSS Framework based on Google’s Material Design Language. In this tutorial I will explain what material design is and then we will build a portfolio website using Materialize. I will also compare Materialize with other popular CSS frameworks like Foundation and Bootstrap.

Materialize是基于Google的Material Design语言的自适应CSS框架。在本教程中，我将解释什么是材料设计，然后我们将使用Materialize建立投资组合网站。我还将把Materialize与其他流行CSS框架（如Foundation和Bootstrap）进行比较。

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

Material Design is a Design Language that challenges to create a visual language for users that synthesizes the classic principles of good design with the innovation and possibility of technology and science.

材料设计是一种挑战性的设计语言，旨在为用户创建一种视觉语言，该语言将优质设计的经典原理与技术和科学的创新与可能性相结合。

Other competitive design languages are flat design, metro design, realism design etc. Material differs from them on the basics of color schemes, shapes, patterns, textures, or layouts. Material is the only design language that adds motion and depth to elements.

其他竞争性设计语言是平面设计，地铁设计，现实主义设计等。材料在配色方案，形状，图案，纹理或布局的基础上与它们不同。材料是唯一一种增加元素运动和深度的设计语言。

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

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

As the user interacts with the design, due to motion, the design transforms and reorganizes itself on a continuity fashion.

当用户与设计交互时，由于运动，设计将以连续性方式对其进行变形和重新组织。

什么是实现？ (What is Materialize?)

According to the official website, "Materialize is a modern responsive front-end framework based on Material Design". So it's just one of the many CSS frameworks like Bootstrap, Foundation etc.

根据官方网站的说法，“ Materialize是基于Material Design的现代响应式前端框架”。因此，它只是众多CSS框架之一，例如Bootstrap，Foundation等。

The difference between Materialize, Bootstrap, and Foundation is that Materialize is based on Google's Material Design language where as bootstrap and foundation are based on the mobile first design language and flat design language, respectively.

Materialize，Bootstrap和Foundation之间的区别在于Materialize基于Google的Material Design语言，而bootstrap和Foundation则分别基于移动优先设计语言和平面设计语言。

Materialize provides all CSS and JS components that are provided by bootstrap and foundation.

Materialize提供了引导程序和基础提供的所有CSS和JS组件。

设置基本实现模板 (Setting up the Basic Materialize Template)

You can download Materialize CSS and JS files from Materialize Download Page. Now create index.html and css/style.css files. And finally create an images directory where the images for our project will be kept in.

您可以从Materialize下载页面下载Materialise CSS和JS文件。现在创建index.html和css/style.css文件。最后，创建一个images目录，其中将保留我们项目的图像。

Here is how our project directory will look:

这是我们的项目目录的外观：

----- css/
---------- materialize.min.css
---------- style.css
----- js/
---------- materialize.min.js
----- images/
- index.html

Here is the starting code in our index.html file. Here we are loading the Materialize CSS and JS library and, also, our custom style.css file.

这是我们的index.html文件中的起始代码。在这里，我们正在加载Materialize CSS和JS库，以及我们的自定义style.css文件。

<html>
<head>

  <title>Materialize CSS Framework Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>

  <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
  <link type="text/css" rel="stylesheet" href="css/style.css">

</head>
<body>

  <!-- jQuery is required by Materialize to function -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
  <script type="text/javascript">
    //custom JS code
  </script>

</body>
</html>

实现颜色 (Materialize Colors)

Material Design is based on some predefined colors. Materialize provides classes to provide those colors to font and background.

材料设计基于一些预定义的颜色。 Materialize提供了一些类来为字体和背景提供这些颜色。

Here is an example:

这是一个例子：

BACKGROUND COLOR

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

TEXT COLOR

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

See the Pen yyMjVO by Narayan Prusty (@qnimate) on CodePen.

请参阅CodePen上的Narayan Prusty（ @qnimate ）的Pen yyMjVO 。