前端开发学习-UI库MDB

前言

目前我在工作之余，会对自己进行一些能力的提升和加强，除了对自己硬实力有提升的网课，我始终还是没有放弃自学前端开发，毕竟开发一个自己的个人网站，是我一直都想做的事。

前端开发，我一路都是自学看书过来的，从最基础的HTML+CSS+JavaScript，在之前的文章也都有提到过，包括后面的JQuery和Bootstrap，以及重量级框架Vue和React，目前业余时间正在进行React的学习，在这一路自学过来，我还是觉得Boostrap更符合我的喜好。

事半功倍

我知道学习前端的途径有很多，对于自学的小白来说，视频无疑是最友好的；而对于我这种喜欢看书籍的，常常会去寻找一些高效率的网站和案例，例如Github找个现成的项目直接开撸。

在偶然的搜寻当中，我找到了一个网站，它就是MDBootstrap. 他并不是单单的一个UI库，而是一个自带教程的强大网站，不会前端的小白，甚至可以在这个网站上自学前端开发（除了加载速度有些捉急）

主页面

这就是MDBootstrap的主页了，他涵盖了jQuery、Angular、React、Vue的教程，我最近正在学习React，我想抓紧提升我React的能力，这点MDBootstrap做得很不错，他的教程会让你很快的做出一个东西。

教程

在这里推荐使用Chrome浏览器，使用浏览器的翻译功能。

-React教程

MDBootstrap的教程很新手向，而且是免费的奥，这就很人性化了

WX20191027-163832.png

React教程从下载资源库开始讲，以及React的使用、React如何应用、React的渐进式应用，一步到位。

addNewEvent.gif

这个就是当你学完React教程时要实现的效果，它可以让你获得暂时的成就感，已经更好的去使用React以及MDBootstrap去做你想要做的。

学以致用

当你进行完你感兴趣的框架的教程以后，你就可以使用丰富的MDBootstrap的工具库了，他提供了大量的好看的UI，当然这些风格都比较适合国外的审美，看个人喜好，就比如我，我是蛮喜欢这种风格的。

侧边栏

可以看到当你学完入门的课程以后，左边还有很多功能可以探索。

示例

点击Demo，我们可以看到现有的效果，选择一个自己喜欢的效果，比如这个按钮。

代码

在左侧选择Buttons，我们就可以看到自己喜欢的按钮的代码，MDBootstrap很友好，我们只需要把现成的代码点击一下复制代码，就可以在项目中应用了。

结束

其实我原本想把这个过程一步步的截图下来的，但是发现，一是自己的网站还有bug，二是量有点大，所以，还是简单的介绍一个这个网站，让大家进行探索吧。

目前我正在开发我自己的个人网页，如果不出意外它应该是用React开发的，我也是正在学习的阶段，当我学习完毕后，我会整理出相应的文章，我敢向你保证，这个个人主页绝对要比Hexo+Github酷炫多了。