安装指南

手动安装(zip包)

第1步

下载包

MDB 5下载

第2步

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

第三步

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


数据库

观看我们的快速入门教程,以发现并使用 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


        <!-- 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"
        />
      

JS


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