利用 Bootstrap 开发桌面应用，Nodejs 助力实现
利用 Bootstrap 开发桌面应用，Nodejs 助力实现
原文：
HTML 一直是桌面软件的重点，各种桌面软件或者多或少都会嵌入一些 HTML 的代码。而自从在了 Nodejs 后，使用 HTML 制作桌面就成为了可能。 这要感谢 node-webkit 引入了对桌面的支持，然后 electron 推动了这个趋势。 由于 node-webkit 的支持力度似乎不够大，而 electron 已经有相应的比较成熟的产品 Atom/VSCode ，所以我倾向了 electron. 今天我要介绍如何使用 electron 与 bootsrap 做一个桌面的应用。
安装 Electron
Electron 的安装是很方便的
npm install -g electron-prebuilt
如果你是在中国大陆的用户，那么你可能需要添加一个环境变量，执行命令变成是：
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install -g electron-prebuilt
通常对于一个资深的开发人员来说，翻译是必备的技能，关于如何翻墙，可以参考公共号文章：你所必须了解的翻墙工具。 一般通常直接翻墙安装就可以了。但是考虑到网速的问题，大陆的用户还是使用淘宝镜像会比较慢。
当你安装完成后，输入命令：
electron --help
得到
Electron 1.3.1 - Build cross platform desktop apps with JavaScript, HTML, and CSS
Usage: electron [options] [path]
A path to an Electron app may be specified. The path must be one of the following:
- index.js file.
- Folder containing a package.json file.
- Folder containing an index.js file.
- .html/.htm file.
- http://, https://, or file:// URL.
Options:
-h, --help Print this usage message.
-i, --interactive Open a REPL to the main process.
-r, --require Module to preload (option can be repeated)
-v, --version Print the version.
–abi Print the application binary interface.
这表示我们的 electron 已经安装完成了。
初试牛刀： Hello Electron!
上面的提示告诉我们：
electron 后面可以接.js 也可以接.html
所以我们任意创建一个 a.html 页面：
<!DOCTYPE html>
<html>
<body>
<h1>
Hello Electron!
</h1>
</body>
</html>
然后打入:
electron a.html
出现如下的图片：
这是最简单的办法，但是控制力量不够，也不方便加入初始化的代码，所以我们通常会偏向于选择使用.js 文件作为入进点。
官方做法
官方提供了做为进入点的 Demo:
# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start
Go into the repository
$ cd electron-quick-start
Install the dependencies and run
$ npm install && npm start
这个时候就会出现一个窗口:
这样我们就完成了一个最基本的 electron 框架。 这个框架的目录结构是这样的：
.
├── index.html
├── LICENSE.md
├── main.js
├── package.json
├── README.md
└── renderer.js
添加 bootstrap
前面我们已经将 electron 的示例项目安装完成，下面我们来安装 bootstrap.
bootstrap 其实是前端的 UI 框架，但是 electron 已经将前后端模糊了。 所以在 electron 里，前端与后端是可以共存的。 即 nodejs 后端与浏览器前端已经融合在一起了。 所有的 js 代码即可以运行于浏览器，也同样可以运行于 nodejs 。
安装 bootstrap
但是我们在这里还是用到了前端的工具 bower ，执行
bower install bootstrap
下载 bootstrap 代码。
如果没有安装 bower 的话，执行一下：
npm install -g bower先安装 bower
执行成功后,就会多出来一个目录 bower_components,结构如下：
bower_components/
├── bootstrap/
└── jquery/
这时表示我们的 bootstrap 下载成功。
引入 bootstrap
现在我们就将 bootstrap 引入到我们的项目中来。
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" crossorigin="anonymous">
注意 href 的路径，就是 bower 安装的包的目标目录。 由于我们暂时不需要动态功能，所以可以不添加 bootstrap 的 js 文件。
添加新代码
现在我们已经将 bootstrap 的 CSS 添加进来了，下面我们放上组件进行测试一下。 添加代码如下。
<div class="text-center">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
</div>
再运行：
npm start
得到如下结果：
这里我们看到了 bootstrap 的按钮， 表示我们的桌面版的 bootstrap 已经调用成功了!!!
下面你就可以随意的添加各个 Bootstrap 组件来编写你的 electron 桌面应用了。
是不是很简单呢？
赶紧试一下吧，也许下一个 google 就属于你的了。
欢迎微信公共号:frontend-guru 了解更多的信息，或者扫描二维码：
两个都是主要的。
大多数人都接触并熟悉 Bootstrap 。
如果使用 Electron ，可以优先考虑基于 Bootstrap 创作桌面。
同时 Bootstrap 作为 UI 框架也是很成熟的，个人比较推荐。
Google trend 说明不了什么
https://www.google.com/trends/explore#q=bootstrap%2C%20semantic%20ui%2C%20foundation%2C%20Skeleton&cmpt=q&tz=Etc%2FGMT-8
像 foundation 这种名字框架还不占够了便宜
bower 也是一个已经死了的项目，还在这里推荐看不到意义
对了， Bootstrap 不是给后端用的么？ ：）
bootstrap 其实是前端的 UI 框架，但是 electron 已经将前后端模糊了。 所以在 electron 里，前端与后端是可以共存的。 即 nodejs 后端与浏览器前端已经融合在一起了。 所有的 js 代码即可以运行于浏览器，也同样可以运行于 nodejs 。
噗，这段我都笑出声了。
其实文章本来就是写给会使用 HTML 的开发者的。
跟 HTML 怎么会没有关系呢？
为什么必须说是 Bootstrap?
下次写的是 Semantic UI 呢？
这不就跟 Bootstrap 没有任何关系了吗？
所以上面的很多喷子们还是没有搞清楚问题的实质。
至少没看到有人可以象样的骂起来。
如果真有什么的错误，我想这些喷子们也发现不了。
开发桌面又有什么不能？
开发一个类似于 GNOME 的桌面也未偿不行。
并没有什么不行的，你不行不代表别人也不行。
只有什么都不懂的人才会发现不了可能性。
就跟几年前一群喷子认为 js 无法开发后台一样。
喷也麻烦喷的有水平点。谢谢合作。
关键是你有没有道理呢？
bootstrap 包括 HTML+CSS+JS 。
所以能基于 Bootstrap 的地方一定可以基于 HTML5+CSS+JS 。
所以相当于利用 HTML+CSS+JS 开发桌面应用。
所以有什么问题吗？
你的 CSS 呢？
呵呵。你的道理从那里来？
希望你还是屏掉我吧。
我伺候不了你这样的。
照楼主的逻辑其实可以说成 jquery 也可以开发桌面、 seajs 也可以开发桌面等等，楼主阿， bootstrap 只是一个 UI 框架，在你说的技术栈里 html-bootstrap-electron electon 是关键，什么叫关键？去掉 bootstrap ，这个桌面应用还是能出来，你去掉 electron ，就只能是个网站了。所以你的标题是很不妥滴。
利用 Bootstrap 开发桌面应用并结合 Node.js 实现，可以通过 Electron 框架来桥接前端和后端技术。Electron 允许你使用 Web 技术（HTML, CSS, 和 JavaScript）来开发跨平台的桌面应用。以下是一个简单的示例，展示如何使用 Bootstrap 进行前端开发，并通过 Node.js 和 Electron 实现后端功能。
前端部分（index.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Electron App</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="mt-5">Hello, Electron with Bootstrap!</h1>
<button id="myButton" class="btn btn-primary">Click Me</button>
</div>
<script src="renderer.js"></script>
</body>
</html>
后端部分（main.js）
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
以上代码展示了如何使用 Bootstrap 构建前端界面，并通过 Electron 和 Node.js 创建一个简单的桌面应用。
