简介
ncbi-web-standards是NCBI（National Center for Biotechnology Information）出品的前端规范库集合，她提供了一系列的组件、资源以及工具，能够帮助开发者快捷、高效、一致地构建 Web 应用程序。ncbi-web-standards提供了一整套的基础CSS、JS组件以及UI组件，用来简单的构建美观并易于使用的Web应用程序。
安装
你需要先安装Node.js和npm可通过官方网站下载。
ncbi-web-standards是一个 npm 包，安装可以通过 npm 进行，执行以下命令：
npm install ncbi-web-standards
这条命令会在你的项目中添加一个 ncbi-web-standards 文件夹，文件夹下包含了所有的 NCBI 前端规范库。
使用
ncbi-web-standards 包含了丰富的工具、组件以及 CSS 样式，你可以根据你的需要进行使用，ncbi-web-standards可以用来构建Web应用程序中的前端风格指南。
CSS
ncbi-web-standards 的 CSS 文件在 node_modules/ncbi-web-standards/css 目录下, 你需要在HTML文件中引用该文件以在应用中使用：
<link rel="stylesheet" href="./node_modules/ncbi-web-standards/css/ncbi-style.css">
然后你就可以在HTML标记中使用NCBI Web Standards的CSS样式了：
<button class="btn btn-primary">Primary Button</button>
JS
ncbi-web-standards 的 JavaScript 文件位于 node_modules/ncbi-web-standards/js 目录下，你可以选择需要的JS文件，在你的应用中引用该JS文件即可。
<script src="./node_modules/ncbi-web-standards/js/ncbi-header.js"></script>
UI 组件
ncbi-web-standards 还提供了一些常用的UI组件，如表格、导航栏、分页、折叠面板等等。使用起来十分方便。你可以将HTML代码与CSS相结合以创建 NCBI 风格的 UI 组件。
下面是一个例子，演示了如何使用 ncbi-web-standards 的样式与 ui- 前缀来构建一个NCBI风格的导航栏。
-- -------------------- ---- -------
---- ------------- ----------------
---- ------------------------
---- ----------------------
------- ------------- -------------------- ---------- ---------------------- ------------------------------ ----------------------
----- ---------------------- -----------------
----- ------------------------
----- ------------------------
----- ------------------------
---------
-- -------------------- ------------------
------
---- --------------- ---------------- ---------------------
--- ---------- ------------
--- ----------------- --------------------
------ --------------------
------ --------------------
------ --------------------
------ --------------------
-----
------
------
------响应式设计
ncbi-web-standards提供了许多支持响应式设计的模板，例如响应式导航栏、响应式表格等，可以帮助你轻松地构建适应设备宽度和屏幕尺寸的应用程序。
下面是一个使用 ncbi-web-standards 响应式表格的示例代码：
-- -------------------- ---- -------
---- -------------------------
------ ------------ -------------- -------------
-------
----
-------------
-----------
-----------
-----------
-----
--------
-------
----
--------- ------ - ---------
--------- ------
----------
--------- ------
-----
----
----------- ------ -- -------------
--------- ------
----------
--------- ------
-----
----
---------- --- ---- ----------
--------- ------
----------
---------- ------
-----
--------
-------
----
--- ------------
------------
---------- ------
-----
--------
--------
------总结
使用 ncbi-web-standards 你可以有效地创建一致且高效的 Web 应用程序，减少了开发人员的工作量同时可以增加应用的易用性。在开发过程中，这个 npm 包可以让你的应用轻松地呈现出美丽的 UI，同时保证了代码的可靠性和安全性。学会使用这个 npm 包，你的应用的质量也会得到不断的提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005579181e8991b448d48fa