📅  最后修改于: 2020-10-22 05:58:44        🧑  作者: Mango

Materialize是使用CSS，JavaScript和HTML创建的UI组件库。物化UI组件有助于构建引人注目的，一致且功能正常的网页和Web应用程序，同时坚持现代的网页设计原则，例如浏览器的可移植性，设备独立性和正常降级。它有助于创建更快，更美观，响应速度更快的网站。它的灵感来自Google Material Design。听众本教程适用于希望学习Materialize的基础知识以及如何使用...

📅  最后修改于: 2020-10-22 05:59:03        🧑  作者: Mango

Materialize是使用CSS，JavaScript和HTML创建的UI组件库。物化可重用的UI组件有助于构建有吸引力，一致且功能正常的网页和Web应用程序，同时遵循现代Web设计原则，例如浏览器的可移植性，设备独立性和正常降级。它的一些主要特征如下-内置响应式设计。标准CSS，占用空间最小。新版本的通用用户界面控件，例如按钮，复选框和文本字段，均适应了材料设计概念。增强和专门的功能，例如卡片...

📅  最后修改于: 2020-10-22 05:59:30        🧑  作者: Mango

在本章中，我们将讨论为Materialise建立合适的环境的不同方面。在线试用我们已经在线设置了Materialise编程环境，因此您可以在线编译和执行所有可用的示例。它使您对正在阅读的内容充满信心，并可以使用不同的选项来验证程序。随意修改任何示例并在线执行。使用CodingGround上可用的在线编译器尝试以下示例对于本教程中给出的大多数示例，您将在我们的网站代码部分的右上角找到一个Try it...

📅  最后修改于: 2020-10-22 05:59:52        🧑  作者: Mango

Materialise支持多种颜色类别。这些颜色类别的启发和发展是考虑到市场营销，路标和便签中使用的颜色。红粉紫色深紫色靛青蓝色浅蓝青色蓝绿色绿色浅绿色酸橙黄色琥珀色橙子深橙色棕色灰色蓝灰色黑色白色透明用法以下是明度/暗度类别的列表，可用于更改所应用的颜色。减轻1减轻2减轻3减轻4减轻5变暗1变暗2变暗3变暗4口音1口音2口音3口音4例下面的示例演示如何使用上述类来渲染背景或更改文本的颜色。如果是...

📅  最后修改于: 2020-10-22 06:00:23        🧑  作者: Mango

Materialize提供了一个12列流体响应网格。它使用行和列样式类分别定义行和列。Sr.No.Class Name & Description1rowSpecifies a padding-less container to be used for responsive columns. This class is mandatory for responsive classes to be ...

📅  最后修改于: 2020-10-22 06:00:44        🧑  作者: Mango

Materialise具有一些实用程序类，可用于日常设计需求。颜色实用程序类-例如，.red，.green，.grey等对齐实用程序类-例如，.valign-wrapper，.left-align，.rightalign，.center-align，.left，.right根据设备大小隐藏Content实用程序类-例如，.hide，.hideon-small-only，.hide-on-med-o...

📅  最后修改于: 2020-10-22 06:01:01        🧑  作者: Mango

Materialize具有多个类别，可根据不同的尺寸制作图像和视频。响应img-它使图像根据屏幕大小调整自身大小。video-container-用于具有嵌入式视频的响应式容器。响应视频-使HTML5视频具有响应能力。例materialize_media.htm结果验证结果。...

📅  最后修改于: 2020-10-22 06:01:19        🧑  作者: Mango

Materialise具有几个特殊的类，可将容器显示为带有阴影的纸质卡片。Sr.No.Class Name & Description1z-depth-0Removes the shadow of elements having z-depth by default.2z-depth-1Styles a container for any HTML content with 1px bordere...

📅  最后修改于: 2020-10-22 06:01:52        🧑  作者: Mango

Materialize可用于在表格上使用各种样式来显示不同类型的表格。Sr.No.Class Name & Description1NoneRepresents a basic table without any border.2strippedDisplays a stripped table.3borderedDraws a table with a border across rows.4h...

📅  最后修改于: 2020-10-22 06:02:09        🧑  作者: Mango

Materialize使用Roboto 2.0作为标准字体。可以使用以下CSS样式覆盖它。以下是标题，块引用和自由流动但响应文本的示例。例materialize_typography.htm结果验证结果。...

📅  最后修改于: 2020-10-22 06:02:28        🧑  作者: Mango

物化徽章组件是屏幕上的通知，可以是数字或图标。通常用于强调项数。Sr.No.Class Name & Description1badgeIdentifies an element as an MDL badge component. Required for span element.2newAdds a “new” class to a badge component gives it a ba...

📅  最后修改于: 2020-10-22 06:02:50        🧑  作者: Mango

Materialize提供了不同的CSS类，以对按钮应用各种预定义的视觉和行为增强。下表列出了可用的类及其效果。Sr.No.Class Name & Description1btnSets button or anchor as a Materialize button, required. Sets raised display effect to a button.2btn-floatingC...

📅  最后修改于: 2020-10-22 06:03:07        🧑  作者: Mango

Materialize提供了各种CSS类，可以轻松地创建漂亮的面包屑。下表列出了可用的类及其效果。Sr.No.Class Name & Description1nav-wrapperSets the nav component as breadcrumb/nav bar wrapper.2breadcrumbSets the anchor element as breadcrumb. Last a...

📅  最后修改于: 2020-10-22 06:03:22        🧑  作者: Mango

Materialize提供了一个称为Chip的特殊组件，可用于表示一小部分信息。例如，联系人，标签等。Sr.No.Class Name & Description1chipSet the div container as a chip.例以下示例演示了如何使用芯片类来展示如何创建各种类型的标签。materialize_chips.htm结果验证结果。...

📅  最后修改于: 2020-10-22 06:03:50        🧑  作者: Mango

Materialize提供了特殊的类来表示各种类型的集合，其中一个集合表示一组相关的信息项。Sr.No.Class Name & Description1collectionSets the div or ul container as a collection.2collection-itemSets the a or li item as a collection item.3activeSh...