手动安装(zip包)
第1步
下载包
MDB 5下载第2步
解压下载的软件包并在代码编辑器中将其打开
第三步
浏览我们的文档(左侧菜单)。选择您要的组件 例如,将其复制到您的项目中并组成您的网站。是的,这是 这么简单!
数据库
观看我们的快速入门教程,以发现并使用 MDB 5和MDB CLI的全部潜力
Watch MDB Quick Start的GitHub
您也可以直接从我们的GitHub下载MDB 5。
如果您愿意-请不要忘了用您的明星来支持我们:)
MDB 5 GitHubnpm
先决条件
在开始项目之前,请确保安装 节点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>