随着网站的日益普及，用户对于网站的要求也越来越高。在网站的设计方面，UI（User Interface）的重要性不言而喻。一个漂亮、易用的 UI 不仅可以提高用户的满意度，还可以提升用户的使用体验。在这篇文章中，我们将介绍如何使用 MDBootstrap 和 Material Design Lite 为网站创建漂亮的 UI。
MDBootstrap
MDBootstrap 是一款基于 Bootstrap 的 Material Design 风格的 UI 框架。它包含了众多的 UI 组件，可以帮助你快速构建漂亮的网站。下面我们将介绍如何使用 MDBootstrap 构建一个简单的网站。
步骤一：下载 MDBootstrap
首先，我们需要到 MDBootstrap 的官网（https://mdbootstrap.com/）下载 MDBootstrap。在官网首页，我们可以看到 MDBootstrap 提供了两种版本：免费版和付费版。对于一般的网站开发来说，免费版已经足够使用了。我们点击免费版下载按钮，然后选择需要的版本进行下载。
步骤二：引入 MDBootstrap
下载完成后，我们需要在网站中引入 MDBootstrap。在下载的文件中，我们可以看到有一个 dist 目录，里面包含了所有的 CSS 和 JS 文件。我们只需要将这些文件引入到网站中即可使用 MDBootstrap。
<link rel="stylesheet" href="path/to/mdbootstrap.min.css"> <script src="path/to/jquery.min.js"></script> <script src="path/to/popper.min.js"></script> <script src="path/to/bootstrap.min.js"></script> <script src="path/to/mdbootstrap.min.js"></script>
需要注意的是，MDBootstrap 是基于 Bootstrap 的，所以我们还需要引入 Bootstrap 的 CSS 和 JS 文件。
步骤三：使用 MDBootstrap
引入完成后，我们就可以使用 MDBootstrap 提供的各种 UI 组件了。下面我们以一个简单的导航栏为例，介绍如何使用 MDBootstrap。
-- -------------------- ---- -------
---- ------------- ---------------- ------------ ----------
-- -------------------- -----------------
------- ---------------------- ------------- ---------------------- ------------------------ ------------------------- --------------------- ------------------ ------------
----- -----------------------------------
---------
---- --------------- ---------------- ---------------
--- -------------------
--- --------------- --------
-- ---------------- -----------------
-----
--- -----------------
-- ---------------- ------------------
-----
--- -----------------
-- ---------------- --------------------
-----
-----
------
------在上面的代码中，我们使用了 MDBootstrap 提供的 navbar 组件。通过添加不同的 class，我们可以实现不同的样式效果。比如，navbar-expand-lg 表示导航栏在大屏幕下是展开的，navbar-light 表示导航栏的背景色为浅色。
Material Design Lite
Material Design Lite 是由 Google 推出的一款 Material Design 风格的 UI 框架。与 MDBootstrap 不同的是，Material Design Lite 不依赖于 Bootstrap，它是基于纯 CSS 和 JavaScript 实现的。下面我们将介绍如何使用 Material Design Lite 构建一个简单的网站。
步骤一：下载 Material Design Lite
首先，我们需要到 Material Design Lite 的官网（https://getmdl.io/）下载 Material Design Lite。在官网首页，我们可以看到 Material Design Lite 提供了两种版本：标准版和压缩版。对于一般的网站开发来说，标准版已经足够使用了。我们点击标准版下载按钮，然后选择需要的版本进行下载。
步骤二：引入 Material Design Lite
下载完成后，我们需要在网站中引入 Material Design Lite。在下载的文件中，我们可以看到有一个 dist 目录，里面包含了所有的 CSS 和 JS 文件。我们只需要将这些文件引入到网站中即可使用 Material Design Lite。
<link rel="stylesheet" href="path/to/material.min.css"> <script src="path/to/material.min.js"></script>
需要注意的是，Material Design Lite 是基于 Google 的 Material Design 设计风格的，所以我们需要引入 Google 的 Material Icons 字体文件。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
步骤三：使用 Material Design Lite
引入完成后，我们就可以使用 Material Design Lite 提供的各种 UI 组件了。下面我们以一个简单的按钮为例，介绍如何使用 Material Design Lite。
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> Button </button>
在上面的代码中，我们使用了 Material Design Lite 提供的 button 组件。通过添加不同的 class 和属性，我们可以实现不同的样式效果。比如，mdl-button 表示按钮样式，mdl-js-button 表示按钮支持 JavaScript，mdl-button--raised 表示按钮有阴影效果，mdl-button--colored 表示按钮的背景色为主题色。
总结
在本文中，我们介绍了如何使用 MDBootstrap 和 Material Design Lite 为网站创建漂亮的 UI。它们都是优秀的 UI 框架，可以帮助我们快速构建漂亮的网站。需要注意的是，UI 的设计是一个细节活，我们需要根据自己的需求进行调整和优化。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6612df74d10417a22235c4c2