这是一个创建于 3047 天前的主题，其中的信息可能已经有所发展或是发生改变。
原文：
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 了解更多的信息，或者扫描二维码：
 |
1
Vanilla 2016-07-31 23:09:54 +08:00  5
这不主要说的是 Electron 么，和 Bootstrap 有很大关系吗
|
 |
2
calidion OP @Vanilla
两个都是主要的。 大多数人都接触并熟悉 Bootstrap 。 如果使用 Electron ，可以优先考虑基于 Bootstrap 创作桌面。 同时 Bootstrap 作为 UI 框架也是很成熟的，个人比较推荐。 |
 |
6
menc 2016-07-31 23:25:22 +08:00 1
确实，你这样写， electron 很不开心
|
 |
7
zhujinliang 2016-08-01 00:09:34 +08:00 via iPhone 4
利用 leftpad 也可以开发桌面了
|
 |
8
Perry 2016-08-01 00:12:05 +08:00
真的不算桌面应用，还是在浏览器里面啊
|
 |
9
WittBulter 2016-08-01 00:14:31 +08:00
吃相太难看 block
|
 |
10
viko16 2016-08-01 00:44:31 +08:00 via Android
倒是开发个“桌面”来看看哦…
|
 |
11
superalsrk 2016-08-01 00:59:53 +08:00
歧义太大了
|
|
12
calidion OP |
 |
13
Ahri 2016-08-01 05:34:10 +08:00
“大多数人都接触并熟悉 Bootstrap 。”是统计过还是看看周围小圈子还是拍脑袋？
|
|
14
calidion OP |
|
15
Ahri 2016-08-01 06:12:34 +08:00
楼主 Google Trends 比较的关键词是：
bootstrap atom shell github atom electron 高！实在是高！ |
 |
17
mzsongyan 2016-08-01 07:03:26 +08:00 via Android
图片呢，还有最后的二维码呢，不专业啊
|
 |
19
Symars 2016-08-01 07:49:27 +08:00 via iPhone
这个还是要浏览器支撑 还不是纯粹的桌面应用
|
 |
21
warDoggie 2016-08-01 08:21:19 +08:00
即不桌面，也不应用。这样写 bootstrap 很不开心＋ 1 😔
|
 |
22
iTakeo 2016-08-01 08:32:52 +08:00 via iPhone
这跟 bootstrap 关系真不大
|
|
23
Vanilla 2016-08-01 09:18:16 +08:00
@calidion 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 不是给后端用的么？ ：） |
 |
24
Shura 2016-08-01 09:21:17 +08:00 via Android
有啥用呢？能调用 win32 API 吗？
|
 |
25
qiutc 2016-08-01 09:51:11 +08:00
秀智商？
|
 |
26
Tankpt 2016-08-01 09:56:00 +08:00
跟 bootstrap 。。。没关系吧。。
|
 |
27
xcodebuild 2016-08-01 09:56:54 +08:00
和 bootstrap 没啥关系。。和桌面也没啥关系。。
|
 |
28
amlun 2016-08-01 09:59:55 +08:00
捉急～
|
 |
29
aitaii 2016-08-01 10:01:30 +08:00
感觉说了很多，很想看图片啊，图片在哪。。。
|
 |
30
whahuzhihao 2016-08-01 10:42:36 +08:00
@codefalling 强行没关系
|
 |
31
huntererer 2016-08-01 10:45:08 +08:00
标题党。。。
|
|
32
xcodebuild 2016-08-01 10:50:51 +08:00
@whahuzhihao 有啥关系么。。。完全是 electron 的事情，桌面应用就桌面应用，，写桌面是个什么鬼。。
|
 |
33
Navee 2016-08-01 12:41:35 +08:00
有些人总想用标题搞点大新闻
|
 |
34
zhangdawei 2016-08-01 12:43:36 +08:00
标题党
|
 |
35
learnshare 2016-08-01 12:50:15 +08:00
跟 Bootstrap 没有什么关系
|
 |
36
coderluan 2016-08-01 14:27:52 +08:00
实话实说感觉很麻烦，和 nw.js 相比有什么优势？
|
|
37
calidion OP 其实文章本来就是写给会使用 Bootstrap 的开发者的。
跟 Bootstrap 怎么会没有关系呢？ 为什么必须说是 Electron? 下次写的是 Bootstrap 运行在 NW 上呢？ 这不就跟 Electron 没有任何关系了吗？ 所以上面的很多喷子们还是没有搞清楚问题的实质。 标题的问题在于少打了应用两字。 |
 |
38
jarlyyn 2016-08-01 14:44:07 +08:00
居然还说别人喷子。
这年头真是什么人都想学推广了啊。 |
|
39
calidion OP 这年头，猴子也会打字了:)
|
 |
40
daysv 2016-08-01 15:10:35 +08:00
我觉得这主题不太对.
另外 electron 不支持 XP 对产品来说是大忌. 所以我用 nw |
 |
41
duian 2016-08-01 15:32:31 +08:00
你这么标题党， 你妈妈知道么
|
 |
42
zhqy 2016-08-01 16:07:46 +08:00
bootstrap 其实是前端的 UI 框架，但是 electron 已经将前后端模糊了。 所以在 electron 里，前端与后端是可以共存的。 即 nodejs 后端与浏览器前端已经融合在一起了。 所有的 js 代码即可以运行于浏览器，也同样可以运行于 nodejs 。
噗，这段我都笑出声了。 |
 |
45
zapper 2016-08-01 19:49:24 +08:00
大约前端的确快统一世界了
|
|
46
calidion OP |
 |
47
dphdjy 2016-08-01 20:13:23 +08:00 via Android
最近 v2 冷饭好多。。。
|
 |
48
exoticknight 2016-08-01 20:26:27 +08:00
我穿越了？
|
|
49
Ahri 2016-08-01 22:11:07 +08:00
其实文章本来就是写给会使用 HTML 的开发者的。
跟 HTML 怎么会没有关系呢？ 为什么必须说是 Bootstrap? 下次写的是 Semantic UI 呢？ 这不就跟 Bootstrap 没有任何关系了吗？ 所以上面的很多喷子们还是没有搞清楚问题的实质。 |
 |
50
yoa1q7y 2016-08-01 22:15:03 +08:00
这帖子就是来找骂的。。
|
|
51
calidion OP |
 |
52
Kilerd 2016-08-01 22:56:14 +08:00
除了呵呵，还能 Block
讲道理，几个概念都没搞清楚，就学人写这种文章？？？ 严重标题党。 “利用 CSS 也可以开发桌面应用了！！！” 微信公众号宣传贴！！！ |
|
53
calidion OP @Kilerd
关键是你有没有道理呢？ bootstrap 包括 HTML+CSS+JS 。 所以能基于 Bootstrap 的地方一定可以基于 HTML5+CSS+JS 。 所以相当于利用 HTML+CSS+JS 开发桌面应用。 所以有什么问题吗？ 你的 CSS 呢？ 呵呵。你的道理从那里来？ 希望你还是屏掉我吧。 我伺候不了你这样的。 |
|
54
viko16 2016-08-01 23:22:35 +08:00 via Android
|
|
55
Ahri 2016-08-01 23:24:17 +08:00
散了散了。 The OP is completely clueless.
|
 |
58
fliu2476 2016-08-02 00:35:25 +08:00 via iPhone
发图 markdown
|
|
59
calidion OP 有意思。这帖子被屏了。
|
 |
60
williamx 2016-08-02 06:54:11 +08:00
我觉得不错啊，正想涉足这一块。
不用理他们！ |
 |
61
hrong 2016-08-02 07:49:32 +08:00 via Android
标题，标题，还是标题！重要的事说三遍
|
 |
62
techme 2016-08-02 08:54:47 +08:00
致
|
 |
63
ljcarsenal 2016-08-02 10:16:36 +08:00
怎么知道帖子被屏蔽了么有
|
 |
64
ayaseangle 2016-08-02 10:34:21 +08:00
傻逼标题党。。
|
 |
65
msg7086 2016-08-02 11:23:13 +08:00
本站都是喷子，楼主你来本站发帖你是抖 M 吧。
赶紧右上角点击登出按钮，并将本站移出收藏夹，从此远离我们这样的喷子。 多谢。 |
|
66
whahuzhihao 2016-08-02 11:35:36 +08:00 1
喷子实在太多，要说标题有问题，也就是没区别桌面和桌面应用。
在 node 区看到这个标题第一眼就知道是 electron 或者 nw ，很多人反正进来先喷一遍。 |
|
67
calidion OP |
|
68
calidion OP |
 |
69
VmuTargh 2016-08-02 22:19:40 +08:00
@calidion electron 写 UI ？您就自己卡去吧。举一个例子： Vivaldi 的 UI 全部用 node.js 建构，跑在一个 blink 的 frame 里面，结果占用比 chrome 还恐怖，甚至出现过调试浏览器 UI 本身的恶俗事件。
|
 |
72
lq007 2016-08-03 08:46:18 +08:00
照楼主的逻辑其实可以说成 jquery 也可以开发桌面、 seajs 也可以开发桌面等等，楼主阿， bootstrap 只是一个 UI 框架，在你说的技术栈里 html-bootstrap-electron electon 是关键，什么叫关键？去掉 bootstrap ，这个桌面应用还是能出来，你去掉 electron ，就只能是个网站了。所以你的标题是很不妥滴。
|
 |
73
errorlife 2016-09-26 15:42:32 +08:00
你好。图片都挂了
|
Select Language