npm包ncbi-web-standards使用教程

简介

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 进行，执行以下命令：

--- ------- ------------------

这条命令会在你的项目中添加一个 ncbi-web-standards 文件夹，文件夹下包含了所有的 NCBI 前端规范库。

使用

ncbi-web-standards 包含了丰富的工具、组件以及 CSS 样式，你可以根据你的需要进行使用，ncbi-web-standards可以用来构建Web应用程序中的前端风格指南。

CSS

ncbi-web-standards 的 CSS 文件在 node_modules/ncbi-web-standards/css 目录下, 你需要在HTML文件中引用该文件以在应用中使用：

----- ---------------- ------------------------------------------------------------

然后你就可以在HTML标记中使用NCBI Web Standards的CSS样式了：

------- ---------- -------------------- ---------------

JS

ncbi-web-standards 的 JavaScript 文件位于 node_modules/ncbi-web-standards/js 目录下，你可以选择需要的JS文件，在你的应用中引用该JS文件即可。

------- -------------------------------------------------------------------

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

阅读全文

猜你喜欢

  • npm 包 terminal-textticker 使用教程

    npm 包 terminal-textticker 使用教程 介绍 terminal-textticker 是一个能够在终端中展示跑马灯文字的 npm 包。它可以帮助开发者在终端中展示重要的信息并引起...

    2 年前
  • npm 包 glob-ignore 使用教程

    npm 包 glob-ignore 使用教程 在前端开发中，我们通常需要处理多个文件。而在处理这些文件时，往往会遇到需要忽略某些文件的情况。这时，npm 包 glob-ignore 就能派上用场了。

    2 年前
  • npm包dreamscape的使用教程

    Dreamscape简介 Dreamscape是一款基于React设计的UI框架，提供了一系列美观、易用的组件，如表单、导航、对话框等。使用Dreamscape可以快速地进行前端页面的布局，提高开发效...

    2 年前
  • npm 包 react-native-vso-weibo 使用教程

    如果你正在开发 React Native 应用，并想要接入微博第三方登录功能，那么 react-native-vso-weibo 包是一个不错的选择。它可以帮助你快速集成微博登录，同时提供了一些方便的...

    2 年前
  • npm 包 react-native-vso-wx 使用教程

    什么是 react-native-vso-wx react-native-vso-wx 是一个基于 React Native 框架的 npm 包，它可以让开发者轻松使用微信小程序的原生组件，为开发佳佳...

    2 年前
  • npm 包 sprity-customless 使用教程

    前言 在前端开发中，图片压缩和雪碧图合成是经常遇到的问题。虽然有人工合成和使用在线工具的方式，但是这些方式都存在着一些问题。例如，人工合成效率低下，而在线工具安全性和可靠性无法保障。

    2 年前
  • npm 包 prevent-publish 使用教程

    在开发 npm 包时，我们通常需要发布版本更新，但有时我们可能并不想发布某个特定版本，比如该版本还在测试阶段，可能会导致不良影响。这时我们就需要用到 prevent-publish 包来避免意外发布。

    2 年前
  • npm 包 angular-library-name 使用教程

    前言 angular-library-name 是一个 Angular 的开源库。库中包含了一些基础的组件和功能，可以帮助 Angular 开发者快速构建应用。该库在 npm 上是高度可配置的，也容易...

    2 年前
  • npm 包 monad-id 使用教程

    前言 在前端开发中，使用一些高质量的 npm 包是必要的。今天我们要介绍的是 monad-id 这个 npm 包，它是一个允许你在 TypeScript 项目中使用单子 ID 的包。

    2 年前
  • npm 包 cache-out 使用教程

    在前端开发中，我们常常使用 npm 来管理JavaScript包。然而，由于每个包都需要从网络上下载和安装，为了提高包装载的速度和性能，我们需要使用缓存来存储它们。

    2 年前
  • npm包mongoose-sequence-id使用教程

    在前端开发中，使用mongoose连接MongoDB数据库非常常见。同时，在一些实际的应用场景中，我们会需要为每个文档或记录定义一个唯一的序列号或ID。而npm包mongoose-sequence-i...

    2 年前
  • npm 包 rest-url-builder 使用教程

    前言 随着 Web 应用的发展，前端工程师们需要不断地从事着网络请求的工作。相较于简单的 GET 请求，POST、PUT、DELETE 请求等更为复杂的请求方式的处理也变得更加重要。

    2 年前
  • npm 包 uncertain 使用教程

    前言 在前端开发的过程中，我们经常需要对一些数据进行不确定性处理，例如：在处理业务逻辑时，不同的条件可能会导致程序的执行路径不同。此时，我们需要一种工具，能够帮助我们快速、简单地实现这些不确定性处理的...

    2 年前
  • npm 包 uncertain-boolean 使用教程

    在前端开发中，有时候我们需要处理不确定性的布尔值，即有些变量的取值不仅仅是 true 或 false，还可以是 undefined、null、'' 等等。这时候，我们可以使用 uncertain-bo...

    2 年前
  • npm 包 tap-notify-termux 使用教程

    如果你是一名前端工程师，那么你一定离不开 npm。npm 是前端最常用的包管理工具，通过 npm 我们可以方便地获取各种第三方库，也可以将自己编写的代码分享给其他开发者。

    2 年前
  • npm 包 uncertain-bool 使用教程

    在前端开发中，我们经常需要处理布尔类型的值。不过有时候，我们并不能确定一个布尔值的真假性，而只能得到一个不确定的值。这种情况下，我们就需要用到 uncertain-bool 这个 npm 包。

    2 年前
  • npm 包 gulp-amplify 使用教程

    前言 在前端开发中，我们常常需要处理网页代码的压缩、合并、转换等工作。除手动处理外，我们可以使用自动化构建工具来达到这一目的。gulp-amplify 是一款基于 gulp 的插件，可以帮助我们处理网...

    2 年前
  • npm 包 matsy-src 使用教程

    前言 随着前端技术的不断发展，我们可能会遇到一些棘手的问题。如何在代码中正确处理图片？如何尽可能快地加载网站？如何在代码中优雅地使用 SVG 图标？这些问题不容易解决，但很多时候，我们可以依赖第三方库...

    2 年前
  • npm 包 transfr 使用教程

    在前端开发中，常常需要将对象或数组转换为特定的格式进行传输。npm 上提供了一个名为 transfr 的包，可以方便地实现这一过程。本文将详细介绍 transfr 的使用方法。

    2 年前
  • npm 包 github-issues-crawler 使用教程

    1.背景 随着 Github 的广泛使用， GitHub Issue 已成为一个重要的项目管理工具。而在前端项目开发中，经常需要从 GitHub 上获取一些 Issue 相关信息，如分类统计、关键词搜...

    2 年前

相关推荐

    暂无文章