Material Design 是由 Google 推出的一种设计语言，它旨在提供一种基于纸张的视觉语言，通过使用平面和印刷设计的理念，使移动和桌面应用程序具有一致的外观和感觉。
在本文中，我们将学习如何在 ASP.NET Core MVC 应用程序中使用 Material Design，以提高应用程序的外观和用户体验。
步骤 1：安装 Material Design 包
我们将使用 Material Design for Bootstrap（MDB）来实现 Material Design。在 ASP.NET Core MVC 应用程序中使用 MDB 需要安装以下两个包：
可以使用 NuGet 程序包管理器或命令行来安装这些包。
Install-Package Mdbootstrap Install-Package Mdbootstrap.Extensions
步骤 2：添加 CSS 和 JavaScript 文件
在 ASP.NET Core MVC 应用程序中使用 MDB 需要添加以下 CSS 和 JavaScript 文件：
-- -------------------- ---- ------- ---- ---- ------- --- ----- ---------------- --------------------------------------------------------------- ---- ------ ----- --- ----- ---------------- ----------------------------------------------------------------------------------- ---- --- --- ----- ---------------- --------------------------------- ---- --- ---------- --- ----- ---------------- -------------------------------------------- ---- ------ --- ------- ---------------------- ----------------------------------------------------------- ---- --------- --- ------- ---------------------- ----------------------------------------------------------------------------------------- ---- --------- ---- ---------- --- ------- ---------------------- -------------------------------------------------------------------------------------------------- ---- --- ---- ---------- --- ------- ---------------------- --------------------------------------- ---- --- ---------- ---------- --- ------- ---------------------- --------------------------------------------------
这些文件可以在 MDB 的官方网站上下载。在 ASP.NET Core MVC 应用程序中，我们可以将这些文件放在 wwwroot/lib/mdb 目录下。
步骤 3：使用 Material Design 组件
在 ASP.NET Core MVC 应用程序中使用 MDB 可以通过 HTML 标签来引用 Material Design 组件，如按钮、表单、卡片等。
以下是一个使用 Material Design 按钮的示例：
<button type="button" class="btn btn-primary waves-effect waves-light">Primary</button>
以下是一个使用 Material Design 表格的示例：
-- -------------------- ---- -------
------ --------------
------ ---------------- -----------
----
----------
--------- ---------
-------- ---------
-----------------
-----
--------
-------
----
--- ------------------
-------------
-------------
-------------
-----
----
--- ------------------
--------------
-----------------
-------------
-----
----
--- ------------------
--------------
------- ---------
-----------------
-----
--------
--------步骤 4：使用 Material Design 样式
MDB 提供了许多 Material Design 样式，可以通过 CSS 类来使用。以下是一些常用的样式：
text-primary：设置文本颜色为主要颜色bg-primary：设置背景颜色为主要颜色waves-effect：设置鼠标悬停时的波浪效果waves-light：设置波浪效果颜色为白色
以下是一个使用 Material Design 样式的示例：
<div class="card">
<div class="card-header bg-primary text-white">Header</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary waves-effect waves-light">Button</a>
</div>
</div>结论
在本文中，我们学习了如何在 ASP.NET Core MVC 应用程序中使用 Material Design，以提高应用程序的外观和用户体验。我们安装了 MDB 包，添加了所需的 CSS 和 JavaScript 文件，并使用 Material Design 组件和样式。这些技术可以帮助我们创建具有现代外观和感觉的应用程序。
示例代码可在以下 GitHub 存储库中找到：https://github.com/mdbootstrap/bootstrap-material-design-aspnetcore。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6762a0ec856ee0c1d407ea83