在现代web开发中，使用样式库和框架来简化开发的过程已经是一种基本的做法。其中最流行的之一就是bootstrap，一个基于HTML、CSS、JS的开源前端框架，拥有大量的组件和样式库来为开发者提供快速的建模和设计。
bootstrap-material-design-community是一个基于bootstrap的npm包，它提供了一组MD风格的扁平化界面以及一系列小部件和工具。相比于官方版的bootstrap，这个包提供了更好看的UI，并且更加适用于移动端开发。
本文将为你介绍如何使用bootstrap-material-design-community，以及如何在你的项目中使用它来提高开发效率。
1. 安装bootstrap-material-design-community
首先，在你的项目中安装bootstrap-material-design-community，只需在终端或者命令提示符中输入如下命令：
npm install bootstrap-material-design-community --save
在安装过程中，npm会将这个包下载到你的项目中，并自动添加条目到你的package.json文件中。
这样就完成了安装过程，接下来让我们来看看如何在你的项目中引用这个包。
2. 引用bootstrap-material-design-community
引用bootstrap-material-design-community非常容易，只需要简单的在HTML文件中添加如下代码段：
-- -------------------- ---- -------
--------- -----
----- ----------
------
---- -------- ---- ---- ---
----- ----------------
----- --------------- ---------------------------- ---------------- ------------------
---- --------- --- ---
----- ---------------- ---------------------------------------------------------
---- -------- ------ --- ---
----- ---------------- ---------------------------------------------------------------------------------------------------
---- ------ ---
------- ------------------------------------------------------
---- --------- ---------- ---
------- ---------------------------------------------------------------
---- -------- ------ ---------- ---
------- ----------------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------
---- ---- --- --- ---
----- ---------------- -------------------------------
------------- --------------
-------
------
---------- -----------
---- ---- --- ---- ---
---- ------------------
---- --- ---
------
---- ------ ------------- ---
--------
--------------------------------- -
-----------------------
---
---------
-------
-------在上述示例中，我们包含了以下文件：
- bootstrap.min.css: 官方bootstrap的CSS文件；
- bootstrap-material-design.min.css: bootstrap-material-design-community的CSS文件；
- jquery.min.js: jquery的JavaScript文件；
- bootstrap.min.js: 官方bootstrap的JavaScript文件；
- material.min.js 和 ripples.min.js: bootstrap-material-design-community的JavaScript文件。
这是一个最小化的Bootstrap-material-design-community的示例。在你的实际项目中，你需要根据你的具体情况进行必要的调整。
3. 使用bootstrap-material-design-community
一旦你完成了引用bootstrap-material-design-community的过程，下一步就是开始使用这个库来完成开发了。
这个库的用法与官方版的bootstrap基本一致，你可以自由地在你的项目中选择一个或多个UI组件来实现你想要的功能。例如，如果你想添加一个带有MD风格的按钮，请使用以下代码段：
<button class="btn btn-primary btn-raised">Button</button>
上述代码将创建一个MD风格的带有阴影效果的按钮，同时颜色为蓝色。
在本例中，我们使用了btn-primary和btn-raised这两个CSS类来设置按钮的外观，这些是bootstrap-material-design-community提供的样式，你也可以自己定义你想要的样式。
例如，你可能想将一个标准的表格转化为带有MD风格的数据表，请使用以下代码段：
-- -------------------- ---- -------
------ ------------ ---------------- ------------- -------------
-------
----
----------
-------------
-----------------
-----
--------
-------
----
----------
-------------
-------------
-----
----
----------
--------------
-------------
-----
----
----------
--------------
-----------------
-----
--------
--------上述代码将创建一个MD风格的带有阴影效果的数据表。
4. 总结
使用npm包bootstrap-material-design-community，你可以很方便的使用MD风格的UI来提高你的项目效率。使用bootstrap的开发者也将很容易地上手这个库。
总的来说，bootstrap-material-design-community的好处如下：
- 丰富的UI组件和小部件；
- 更美观的MD风格UI；
- 友好的开发者体验。
现在开始你的bootstrap-material-design-community之旅吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60769