MDB 5安装指南

手动安装（zip包）

第1步

下载包

MDB 5下载

第2步

解压下载的软件包并在代码编辑器中将其打开

第三步

浏览我们的文档（左侧菜单）。选择您要的组件例如，将其复制到您的项目中并组成您的网站。是的，这是这么简单！

MDB 5 - Bootstrap 5 & Material Design 2.0

数据库

观看我们的快速入门教程，以发现并使用 MDB 5和MDB CLI的全部潜力

Watch MDB Quick Start

的GitHub

您也可以直接从我们的GitHub下载MDB 5。

如果您愿意-请不要忘了用您的明星来支持我们:)

MDB 5 GitHub

npm

先决条件

在开始项目之前，请确保安装节点LTS （12.x.x 推荐的）。

安装

要在您的项目中安装MDB UI KIT，请在终端：
npm i mdb-ui-kit

导入JS模块

您可以导入整个库或仅导入单个模块：
import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; //module

导入CSS文件

要导入MDB样式表，请使用以下语法：
@import '~mdb-ui-kit/css/mdb.min.css';

导入SCSS模块

您也可以导入单个SCSS模块。为了做到这一点，我们建议从node_modules / mdb-ui-kit / src / scss位置复制它们直接导入到您的项目中，并以与CSS文件相同的方式导入。

Webpack集成

您可以大大加快创建基于新项目的过程在Webpack上使用我们的入门工具。

MDB Webpack Starter

光盘

通过CDN进行安装是集成MDB UI的最简单方法之一套件与您的项目。只需复制最新的已编译JS脚本标记和CSS 链接标签来自 cdnjs 到应用程序。

如果需要，请不要忘记添加Font Awesome和Roboto字体。这是示例代码：

CSS

HTML


        <!-- Font Awesome -->
        <link
          href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
          rel="stylesheet"
        />
        <!-- Google Fonts -->
        <link
          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          rel="stylesheet"
        />
        <!-- MDB -->
        <link
          href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/1.0.0/mdb.min.css"
          rel="stylesheet"
        />

HTML


        <!-- MDB -->
        <script
          type="text/javascript"
          src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/1.0.0/mdb.min.js"
        ></script>