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打印网页部分内容的脚本
Nov 17 Javascript
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 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 expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
jQuery中ready事件用法实例
2015/01/19 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
python实现的jpg格式图片修复代码
2015/04/21 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
python使用folium库绘制地图点击框
2018/09/21 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
python图像处理入门(一)
2019/04/04 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
餐厅总厨求职信
2014/03/04 职场文书
校园安全标语
2014/06/07 职场文书
化工专业自荐书
2014/06/16 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
JavaScript实现简单的音乐播放器
2022/08/14 Javascript