本文共 15359 字，大约阅读时间需要 51 分钟。
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 . 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.
您可以从下载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文件。
Materialize CSS Framework Demo
实现颜色 (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 COLORThis is a card panel with a teal lighten-2 classTEXT COLORThis is a card panel with dark blue text
See the Pen by Narayan Prusty () on .
请参阅的Narayan Prusty（ ）的Pen 。
实体化网格 (Materialize Grid)
Materialize uses the standard 12 column fluid responsive grid system.
Materialise使用标准的12列流体响应网格系统。
The .container class is not strictly part of the grid, but it is important in laying out content. It allows you to center your page content. The container class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to contain our body content.
.container类并非严格属于网格的一部分，但在布局内容时很重要。 它使您可以将页面内容居中。 容器类别设置为窗口宽度的〜70％。 它可以帮助您居中并包含页面内容。 我们使用容器来容纳我们的身体内容。
.row class holds the grid. The .s, .m and .l classes are used to define the width of columns for small, medium, and large screens.
.row类保存网格。 .s ， .m和.l类用于定义小，中和大屏幕的列宽。
Here is an example:
这是一个例子：
111222
See the Pen by Narayan Prusty () on .
请参阅的Narayan Prusty（ ）提供的 。
材质SideNav (Material SideNav)
SideNav is a navigation that works on all widths. It toggles from the left/right side of viewport.
SideNav是一种可在所有宽度上使用的导航。 它从视口的左侧/右侧切换。
Here is an example:
这是一个例子：
See the Pen by Narayan Prusty () on .
请参阅的Narayan Prusty（ ）的Pen 。
使用Materialize进行垂直对齐 (Vertical Aligning using Materialize)
You can easily, vertically center things by adding the class valign-wrapper to the container, holding the items you want to vertically align.
通过将valign-wrapper类添加到容器中，并保持要垂直对齐的项目，可以轻松地使内容垂直居中。
Vertical
See the Pen by Narayan Prusty () on .
请参阅的Narayan Prusty（ ）的Pen 。
使用Materialize的深度 (Depth using Materialize)
In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.
在材料设计中，所有内容都应具有一定的z深度，该深度确定元素凸起或靠近页面的距离。
You can easily apply this shadow effect by adding a class="z-depth-n" to an HTML tag.
您可以通过将class =“ z-depth-n”添加到HTML标签来轻松应用此阴影效果。
z-depth-1
z-depth-2
z-depth-3
z-depth-4
z-depth-5
See the Pen by Narayan Prusty () on .
请参阅的Narayan Prusty（ ）提供的 。
实现按钮 (Materialize Buttons)
There are two main button types described in material design. The raised button is a standard button that signify actions and seeks to give depth to a mostly flat page. The floating, circular action button is meant for very important functions.
材料设计中描述了两种主要的按钮类型。 凸起的按钮是一个标准按钮，它表示操作并试图为平整的页面提供深度。 浮动的圆形动作按钮用于非常重要的功能。
Stuffbuttonbutton
See the Pen by Narayan Prusty () on .
请参阅的Narayan Prusty（ ）提供的 。
物化表格 (Materialize Forms)
Forms are the standard way to receive user inputted data. The transitions and smoothness of these elements are very important because of the inherent user interaction associated with forms.
表单是接收用户输入数据的标准方法。 这些元素的过渡和平滑度非常重要，因为与表单关联的固有用户交互作用。
Text fields allow user input. The border should light up simply and clearly indicating which field the user is currently editing. You must have an .input-field div wrapping your input and label. This helps our jQuery animate the label. This is only used in our Input and Textarea to form elements.
文本字段允许用户输入。 边框应简单，清晰地亮起，指示用户当前正在编辑哪个字段。 您必须有一个.input-field div来包装您的输入和标签。 这可以帮助我们的jQuery动画化标签。 仅在我们的Input和Textarea中使用它来形成元素。
If you don't want the Green and Red validation states, just remove the validate class from your inputs.
如果您不希望绿色和红色验证状态，只需从输入中删除validate类。
See the Pen by Narayan Prusty () on .
请参阅的Narayan Prusty（ ）提供的 。
实现图标 (Materialize Icons)
Materialize has included 740 Material Design Icons, courtesy of Google. The icons font file is embedded into the Materialize CSS file in form of Data URI. Icon classes use pseudo elements to select the HTML element and use generated content to populate it with icons using the icon's UNICODE.
Materialize包含740个由Google提供的Material Design图标。 图标字体文件以Data URI的形式嵌入到Materialise CSS文件中。 图标类使用伪元素选择HTML元素，并使用生成的内容使用图标的UNICODE用图标填充它。
To use these icons, just place the name of the icon into the class of an HTML tag
要使用这些图标，只需将图标名称放入HTML标签的类中
To control the size of the icon, change the font-size property of your icon. Optionally, you can use small, large and medium.
要控制图标的大小，请更改图标的font-size属性。 （可选）您可以使用small ， large和medium 。
See the Pen by Narayan Prusty () on .
请参阅的Narayan Prusty（ ）提供的 。
实现选项卡 (Materialize Tabs)
The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then, when you click on each tab, only the container with the corresponding tab id will become visible.
选项卡结构由选项卡的无序列表组成，这些列表的哈希值与选项卡ID相对应。 然后，当您单击每个选项卡时，只有具有相应选项卡ID的容器将变为可见。
See the Pen by Narayan Prusty () on .
请参阅的Narayan Prusty（ ）提供的 。
物化的材料箱 (Materialize's Material Box)
Material box is a material design implementation of the Lightbox plugin, when a user clicks on an image that can be enlarged. Material box centers the image and enlarges it in a smooth, non-jarring manner. To dismiss the image, the user can either click on the image again, scroll away, or press the ESC key.
材质框是灯箱插件的材质设计实现，当用户单击可以放大的图像时。 材质框使图像居中并以平滑，无震颤的方式放大。 要关闭图像，用户可以再次单击图像，滚动或按下ESC键。
It is very easy to add a short caption to your photo. Just add the caption as a data-caption attribute.
在您的照片中添加简短标题非常容易。 只需将标题添加为数据标题属性即可。
See the Pen by Narayan Prusty () on .
请参阅的Narayan Prusty（ ）提供的 。
实现下拉 (Materialize Dropdown)
Add a dropdown list to any button. Make sure that the data-activates attribute matches the id in the <ul> tag.
将下拉列表添加到任何按钮。 确保data-activates属性与<ul>标记中的id匹配。
You can add a divider with the <li class="divider"></li> tag.
您可以使用<li class="divider"></li>标记添加分隔线。
Drop Me!
See the Pen by Narayan Prusty () on .
请参阅的Narayan Prusty（ ）提供的 。
创建投资组合网站 (Creating a Portfolio Site)
We covered some of the most important components of Materialize CSS Framework. Its time to put them together and create a portfolio site. of the portfolio site which we will be creating in this tutorial.
我们介绍了Materialize CSS Framework的一些最重要的组件。 是时候将它们放在一起并创建投资组合网站了。 我们将在本教程中创建的投资组合站点的 。
简介横幅 (Introduction Banner)
In our portfolio site, first, we will have a big horizontal banner which displays your name and profession. We can create this using Materialize text formatting tags and little CSS.
首先，在我们的投资组合站点中，我们将有一个大的水平横幅，上面显示了您的姓名和职业。 我们可以使用Materialize文本格式标记和少量CSS创建此代码。
narayan prusty
web and mobile developer
See the Pen by Narayan Prusty () on .
请参阅的Narayan Prusty（ ）提供的 。
详细信息 (Detail Information)
We need to display bio, profile, and current job statuses in our portfolio. For this, we can create a 3 column grid. This grid is 3 column is medium and large screen, but on mobile phones it's stacked.
我们需要在投资组合中显示简历，个人档案和当前工作状态。 为此，我们可以创建一个三列网格。 这个网格是3列，是中型和大型屏幕，但在手机上是堆叠的。
about me
let me introduce my self
Story
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Profile
current jobs
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
See the Pen by Narayan Prusty () on .
请参阅的Narayan Prusty（ ）提供的 。
We used Materialize cards in Middle column. Cards are a convenient means of displaying content composed of different types of objects. They're also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length.
我们在中间列中使用了Materialise卡。 卡是显示由不同类型的对象组成的内容的便捷方式。 它们也非常适合呈现大小或支持动作可能相差很大的类似对象，例如带有可变长度标题的照片。
Here we used Material Collapsible in the last column. Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.
在这里，我们在最后一栏中使用了Material Collapsible。 可折叠是单击时会扩展的手风琴元素。 它们使您可以隐藏与用户不立即相关的内容。
显示项目 (Displaying Projects)
You need to also display some of your awesome work on your portfolio. You'll need a image of your work and a title/link.
您还需要在投资组合中显示一些出色的工作。 您需要一张工作图像和一个标题/链接。
We will display projects via floated material boxes.
我们将通过浮动的物料箱显示项目。
portfolio
MY LATEST PROJECTS
See the Pen by Narayan Prusty () on .
请参阅的Narayan Prusty（ ）的Pen 。
显示联系信息 (Displaying Contact Information)
We need to display a contact form in case the user wants to contact us. We have the capacity to display a phone number, an address, and an email address for other ways to communicate.
如果用户想与我们联系，我们需要显示联系表格。 我们可以显示电话号码，地址和电子邮件地址，以进行其他通信方式。
We can build the form using Material form classes.
我们可以使用Material表单类来构建表单。
contact
get in touch with me
Address
Nr. 6, 21 Awesome Street, London, UK
Phone Number
+91 9912776151
Website
qnimate.com
See the Pen by Narayan Prusty () on .
请参阅的Narayan Prusty（ ）提供的 。
显示页脚 (Displaying Footer)
At the bottom of the site we will keep a footer which displays a copyright text and a link. Materialize provides classes to create a footer in no time.
在网站底部，我们将保留一个页脚，其中显示了版权文本和链接。 Materialize提供了可立即创建页脚的类。
See the Pen by Narayan Prusty () on .
请参阅的Narayan Prusty（ ）提供的 。
最后的想法 (Final Thoughts)
We saw some of the features and components of Material Design. There are lot more components offered by Materialize so that you can build any kind of website frontend.
我们看到了“材料设计”的某些功能和组件。 Materialize提供了更多组件，因此您可以构建任何类型的网站前端。
If you're planning to create a new website or redesign your site, then I recommend to choose Materialize Framework, because there are very few sites which are material designed and your site will stand out of the crowd. You can also use Materialize in designing hybrid mobile apps. Please share your experiences with Materialize below.
如果您打算创建一个新网站或重新设计您的网站，那么我建议选择Materialize Framework，因为很少有经过精心设计的网站，并且您的网站会脱颖而出。 您还可以在设计混合移动应用程序时使用Materialize。 请在下面与Materialise分享您的经验。
翻译自:
materialize
转载地址：http://vnywd.baihongyu.com/