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下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
JavaScript 10件让人费解的事情
Feb 15 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 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
PHP4中实现动态代理
2006/10/09 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
Python实现简单HTML表格解析的方法
2015/06/15 Python
十个Python程序员易犯的错误
2015/12/15 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python操作json的方法实例分析
2018/12/06 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
银行财务部实习生的自我鉴定
2013/11/27 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
求职推荐信范文
2015/03/27 职场文书
创业计划书之寿司
2019/07/19 职场文书
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python