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 相关文章推荐
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
JSONP之我见
2015/03/24 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
详解js类型判断
2018/05/22 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
Python列表(list)常用操作方法小结
2015/02/02 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
python 绘制场景热力图的示例
2020/09/23 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android