Material Design Lite 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00888/article/details/146530259

Material Design Lite 项目教程

material-design-lite Material Design Components in HTML/CSS/JS 项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite

1. 项目目录结构及介绍

Material Design Lite (MDL) 的目录结构如下所示：

material-design-lite/
├── .github/                # GitHub 专用的配置文件
├── docs/                   # 项目文档
├── src/                    # 源代码目录，包含 HTML、CSS 和 JS 文件
│   ├── components/         # MDL 组件的源代码
│   ├── css/                # MDL 的 CSS 文件
│   └── js/                 # MDL 的 JavaScript 文件
├── templates/             # 页面模板
├── test/                   # 测试文件和目录
├── utils/                  # 工具类库
├── .drone.sec/             # Drone CI/CD 配置
├── .editorconfig/          # 编辑器配置文件
├── .gitattributes/         # Git 属性配置文件
├── .gitignore/             # Git 忽略文件
├── .jscsrc/                # JSCSRC 配置文件
├── .jshintrc/              # JSHint 配置文件
├── CONTRIBUTING.md         # 贡献指南
├── LICENSE                 # 项目许可证
├── README.md               # 项目说明文件
├── bower.json              # Bower 依赖配置文件
├── gulpfile.babel.js       # Gulp 任务配置文件
└── package.json            # npm 依赖配置文件

.github/：包含 GitHub 使用的配置文件，如 .github/workflows/ 中的 CI/CD 工作流文件。
docs/：存放项目的文档。
src/：包含项目的源代码，是开发的核心目录。
templates/：包含页面模板文件。
test/：包含单元测试和集成测试代码。
utils/：包含项目中使用的工具类库。
其他文件：包含项目配置和许可证文件。

2. 项目的启动文件介绍

项目的启动文件主要是 index.html，通常位于 src/ 目录下。这个文件是项目的入口点，展示了 MDL 的基本使用方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Material Design Lite Example</title>
    <!-- 引入 MDL CSS -->
    <link rel="stylesheet" href="src/css/material.min.css">
</head>
<body>

    <!-- 使用 MDL 组件 -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
        <header class="mdl-layout__header">
            <div class="mdl-layout__header-row">
                <span class="mdl-layout-title">Title</span>
            </div>
        </header>
        <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">Navigation</span>
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link" href="#">Link</a>
            </nav>
        </div>
        <main class="mdl-layout__content">
            <div class="page-content">
                <!-- Your content goes here -->
            </div>
        </main>
    </div>

    <!-- 引入 MDL JS -->
    <script src="src/js/material.min.js"></script>
</body>
</html>