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 对象比较实现代码
Apr 27 Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
JavaScript中reduce()的用法
May 11 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
yii2实现根据时间搜索的方法
2016/05/25 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
JS自动缩小超出大小的图片
2012/10/12 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
vue实现搜索功能
2019/05/28 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
python中sys.argv参数用法实例分析
2015/05/20 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
python写一个随机点名软件的实例
2019/11/28 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
在线课程:Skillshare
2019/04/02 全球购物
新闻学毕业生自荐信
2013/11/15 职场文书
更夫岗位责任制
2014/02/11 职场文书
卫生系统先进事迹
2014/05/13 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
Golang并发工具Singleflight
2022/05/06 Golang