前言
pingy-scaffold-bootstrap-jumbotron 是一款适用于前端开发的 npm 包，它基于 Bootstrap 框架，提供了初始的样式和架构，帮助你快速搭建一个漂亮的网站 Jumbotron 页面。使用这个包相当于快速获得了一个初始版本的 Jumbotron 页面，在这个基础上，你可以通过另外的 npm 包或者原生代码进行修改和完善。
在本篇文章中，我们将对 pingy-scaffold-bootstrap-jumbotron 进行详尽的说明和指导，让你可以尽快上手并能够灵活运用这个 npm 包。
安装
在使用 pingy-scaffold-bootstrap-jumbotron 之前，你需要先安装 Node.js 环境， Node.js 环境可在 Node.js 官网（https://nodejs.org/en/）上下载，下载完成并安装好 Node.js 环境后，即可通过 npm 命令安装 pingy-scaffold-bootstrap-jumbotron 包。
在命令行窗口（Windows 系统下是 cmd，Linux 或 Mac 系统下是终端）中，输入如下命令：
npm install -g pingy-scaffold-bootstrap-jumbotron
等待安装完成后，即可在全局环境下使用 pingy-scaffold-bootstrap-jumbotron 命令。
使用
使用 pingy-scaffold-bootstrap-jumbotron 包生成 Jumbotron 页面有两种方式：通过 pingy 命令行工具和通过创建模板文件夹。
通过 pingy 命令行工具
pingy 命令行工具是一款基于 Node.js 的命令行工具，可以帮助我们自动化地创建网站项目和部署项目，还可以方便地使用 pingy-scaffold-bootstrap-jumbotron 包来生成 Jumbotron 页面。
要使用 pingy 命令行工具，首先需要全局安装 pingy 包。在命令行窗口中输入如下命令：
npm install -g pingy
等待安装完成后，即可通过 pingy 命令行工具使用 pingy-scaffold-bootstrap-jumbotron 包。
在命令行窗口中输入如下命令：
pingy init my-site --scaffold=bootstrap-jumbotron
执行完上述命令后，pingy 命令行工具会在当前目录下创建一个名为 my-site 的文件夹，并在该文件夹中生成一个默认的 Jumbotron 页面。
通过创建模板文件夹
另一种使用 pingy-scaffold-bootstrap-jumbotron 包的方式是通过创建模板文件夹，并在该文件夹中存放相关的模板代码，然后使用该文件夹来生成 Jumbotron 页面。
首先，在命令行窗口中输入如下命令，创建一个名为 my-jumbotron 的文件夹：
mkdir my-jumbotron
然后，在 my-jumbotron 文件夹中创建一个名为 index.html 的文件，并在该文件中添加如下内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------
---- -- --------- ---- ---
----- ---------------- ---------------------------------------------------------------------------------------
-------
------
---- ------------------
---- ------------------
---------- -----------
------- -- - ------ ---- ----- - ------ --------------- --------- --- ------- ----- --------- -- -------- ------- -- ----------------
----- ---------- ----------- ------- -------- ------------------- ------------
------
------
---- -- --------- ---------- -- ---
------- ---------------------------------------------------------------------------------------------
-------
-------在命令行窗口中输入如下命令，生成 Jumbotron 页面：
pingy scaffold my-site bootstrap-jumbotron my-jumbotron
执行完上述命令后，pingy-scaffold-bootstrap-jumbotron 包会生成一个名为 my-site 的文件夹，并将 my-jumbotron 文件夹中的内容复制到 my-site 文件夹中，此时 my-site 文件夹就是你的 Jumbotron 页面项目了。
示例代码
以下是一个非常简单的示例代码，用于演示如何在 Jumbotron 页面中添加轮播效果：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- --------- ------------
---- -- --------- --------- --- -- ---
----- ---------------- ---------------------------------------------------------------------------------------
----- ---------------- ------------------------------------------------------------------------------------------------
-------
------
---- ------------------
---- ------------------
---- ------ ---
---- --------------- --------------- ------ ------------------------
--- ----------------------------
--- ---------------------------- -------------------- --------------------
--- ---------------------------- --------------------------
--- ---------------------------- --------------------------
-----
---- -----------------------
---- -------------------- --------
---- -------------------------------------------- -------------- ------ ----------
---- ----------------------- ------ ------------
--------- ----- ----------
------- -------------- ----------- ------- --- --- ----- ----------
------
------
---- ----------------------
---- -------------------------------------------- -------------- ------ ----------
---- ----------------------- ------ ------------
---------- ----- ----------
------- -------------- ----------- ------- --- --- ------ ----------
------
------
---- ----------------------
---- -------------------------------------------- -------------- ------ ----------
---- ----------------------- ------ ------------
--------- ----- ----------
------- -------------- ----------- ------- --- --- ----- ----------
------
------
------
-- ----------------------------- ------------------ ------------- ---------------------
----- ---------------------------------- --------------------------
----- ---------------------------------------
----
-- ----------------------------- ------------------ ------------- ---------------------
----- ---------------------------------- --------------------------
----- -----------------------------------
----
------
------
------
---- -- --------- ---------- ------- -- -- ---
------- ---------------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------------
-------
-------总结
通过本篇文章的阅读，你应该已经了解如何安装和使用 pingy-scaffold-bootstrap-jumbotron npm 包来生成 Jumbotron 页面，并也许已经学习了如何在 Jumbotron 页面中添加轮播等动态效果。希望本文能够帮助你更快地掌握这个 npm 包的使用方法，同时也能够为你的前端开发带来更多的灵活性和方便性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5681e8991b448e5d7a