electron中使用bootstrap的示例代码


Posted in Javascript onNovember 06, 2018

安装

安装bootstrap命令如下:

npm install bootstrap --save

安装后可能报告如下错误:

npm WARN bootstrap@4.1.3 requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself. 

需要自行安装popper,命令如下:

npm install popper.js@^1.14.3 --save

页面引入bootstrap

页面引入bootstrap的css和js文件如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"/>
</head>
<body>
Hello electron!
<div>
  <button id="openFile" class="btn btn-success">Open File</button>
  <button id="sendMsg" class="btn btn-warning">Send Message (Open File)</button>
</div>
<script>
  window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');
  require('./node_modules/bootstrap/dist/js/bootstrap.min.js');
</script>

注:网上有的例子中,引入bootstrap.min.css是用传统方式引入,即:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >

这种方式太搞笑了吧,明明已经在本地装好了全套的bootstrap,偏偏CSS还要用网络方式引入,又浪费流量,速度又慢,真是不知道想出这种方式的人是怎么想的。

补充:在electron中使用bootstrap时,虽然在引用bootstrap之前引用了jQuery,但是依然出现错误:

Uncaught error: bootstrap's javascript requires jquery

解决方法:不使用script标签加载jQuery,而是使用下面的方法加载:

window.$ = window.jQuery = require('/path/to/jquery');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 #Javascript
浅谈Vue数据响应思路之数组
Nov 06 #Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 #Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 #Javascript
微信小程序实现选项卡效果
Nov 06 #Javascript
Vue props 单向数据流的实现
Nov 06 #Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 #Javascript
You might like
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
phpfpm的作用和用法
2019/10/10 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
javascript中的throttle和debounce浅析
2014/06/06 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
浅析vue深复制
2018/01/29 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
python3访问sina首页中文的处理方法
2014/02/24 Python
Python文件和目录操作详解
2015/02/08 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
2015年个人剖析材料范文
2014/12/29 职场文书
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
Redis实现分布式锁的五种方法详解
2022/06/14 Redis
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL