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语句中的CDATA标签的意义
May 09 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
Javascript文本框脚本实现方法解析
Oct 30 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中session与cookie的比较
2015/01/27 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
js 替换
2008/02/19 Javascript
Prototype Function对象 学习
2009/07/12 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
Python格式化压缩后的JS文件的方法
2015/03/05 Python
python机器学习之随机森林(七)
2018/03/26 Python
Python2与Python3的区别实例分析
2019/04/11 Python
python实现五子棋人机对战游戏
2020/03/25 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
如何在python中执行另一个py文件
2020/04/30 Python
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
数学系毕业生的自我评价
2014/01/10 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
六年级学生评语
2014/04/22 职场文书
校园文明倡议书
2014/05/16 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
上班迟到检讨书
2015/05/06 职场文书
2015年科协工作总结
2015/05/19 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript