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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
JavaScript中交换值的10种方法总结
Aug 18 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
express异步函数异常捕获示例详解
Nov 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实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
在Docker上开始部署Python应用的教程
2015/04/17 Python
详解Python_shutil模块
2019/03/15 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
python switch 实现多分支选择功能
2020/12/21 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
银行委托书范本
2014/04/04 职场文书
幼儿园安全责任书
2014/04/14 职场文书
爱心活动计划书
2014/04/26 职场文书
关于召开会议的通知
2015/04/15 职场文书
唐山大地震观后感
2015/06/05 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript