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判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 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 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
Python continue继续循环用法总结
2018/06/10 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
Python input函数使用实例解析
2019/11/22 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
法院实习人员自我鉴定
2013/09/26 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
四年级评语大全
2014/04/21 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
2014年社区个人工作总结
2014/12/02 职场文书