MDBootstrap 简介与教程

最近发现了一个国内比较冷门，但是在国外比较流行的 UI 库 mdbootstrap，这是他们的官网 https://mdbootstrap.com。然后稍微花了一点时间体验了一番。先放展示一下他们的 demo 组件。

Button
表单
博客组件（其实就是评论列表）

优点：

1. 组件素材非常非常多，如果嫌不够可以升级成 Pro 版本😂。
2. 官网里面的教程对新手考虑的非常周到，就连安装都会有视频教程。
3. 默认支持 jQuery，同时也支持 React，Vue，Angular。
4. 用惯了一些搭建后台的组件库，看到 mdbootstrap 这种 Google式的设计风格会有一种耳目一新的感觉。
5. 自带一个 MDB-CLI 脚手架，可以快速生成项目
6. 自带的动画体验非常棒

缺点：

1. 文档看起来比较杂乱，而且完全不像Ant Design，Element安装->使用这样无脑。
2. 不是完全免费的，可能会有一些使用上的顾虑。
3. 没有中文版，对英文不好的同学可能是硬伤。

一、关于 Material Design

强烈推荐阅读一下这篇文章http://colachan.com/post/3416，非常详细的介绍了Material Design 的设计细节。谷歌自家的产品基本上都在用这套设计，包括 Gmail，YouTube。废话不多说，下面我们可以直接上手体验一下。

二、安装 Material Design

这里以 React 为例来启动我们的项目

create-react-app mdb-react-demo //生成一个 react 项目
cd mdb-react-demo
yarn add mdbreact //安装 React 版的 mdb 依赖
yarn start

如果不出什么意外的话我们的浏览器会自动打开 http://localhost:3000/这个网址，接下来我们写几个简单的例子来看看效果。
注意：React 版本的组件文档在 https://mdbootstrap.com/docs/react/components/demo/ 这里，稍微有点难找。

示例

三、体验 Material Design

1. Button 组件

src/index.js

import ReactDOM from 'react-dom';
 // 引入 mdb 相关 css
import "@fortawesome/fontawesome-free/css/all.min.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";

src/component/ButtonDemo.jsx

import React from "react";
import { MDBBtn } from "mdbreact";

const ButtonDemo = () => {
  return (
    <>
      <MDBBtn color="primary">Primary</MDBBtn>
      <MDBBtn>Default</MDBBtn>
      <MDBBtn color="secondary">Secondary</MDBBtn>
      <MDBBtn color="success">Success</MDBBtn>
      <MDBBtn color="info">Info</MDBBtn>
      <MDBBtn color="warning">Warning</MDBBtn>
      <MDBBtn color="danger">Danger</MDBBtn>
    </>
  );
}

export default ButtonDemo;

src/App.js

import React from 'react';
import ButtonDemo from './component/ButtonDemo';
function App() {
  return (
    <div className="App">
      <ButtonDemo/>
    </div>
  );
}

export default App;

这时候 我们就可以在 localhost:3000 中看到

Button
好的，我们第一个组件已经成功开始使用了。

2. Form 组件

接下来体验一个比较复杂的组件，登录注册一定会用到的表单组件 mdb-forms

其实很方便，文档里面已经把代码基本写好了
src/component/ButtonDemo.jsx

import React from "react";
import { MDBContainer, MDBRow, MDBCol, MDBInput, MDBBtn } from 'mdbreact';

const FormDemo = () => {
  return (
    <MDBContainer>
      <MDBRow>
        <MDBCol md="6">
          <form>
            <p className="h5 text-center mb-4">Sign in</p>
            <div className="grey-text">
              <MDBInput
                label="Type your email"
                icon="envelope"
                group
                type="email"
                validate
                error="wrong"
                success="right"
              />
              <MDBInput
                label="Type your password"
                icon="lock"
                group
                type="password"
                validate
              />
            </div>
            <div className="text-center">
              <MDBBtn>登录</MDBBtn>
            </div>
          </form>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  );
};

export default FormDemo;

Form

效果如上图所示，我特意截取了一张点击按钮时的图片，可以看到按钮上有一层特效，不得不说，细节做得很不错。

接下来在展示一些我比较喜欢，认为比较好的组件

杂志封面
日历组件

四、总结

个人认为这个 UI 库用在个人项目，或者自己搭的博客上无疑是一个好的选择。用于后台管理系统可能稍微有些花哨（可能是我习惯了 Ant Design 的风格），用于公司前台项目也会稍有些顾虑，毕竟周围还没有第一个吃螃蟹的人。

仓库地址 https://github.com/Zegendary/mdb-react-demo
完~