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 String.replace函数参数实例说明
Jun 06 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
Node.js学习入门
Jan 03 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 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图片的二进制转换实现方法
2014/12/15 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
javascript利用apply和arguments复用方法
2013/11/25 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
javascript中this关键字详解
2016/12/12 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
python递归实现快速排序
2018/08/18 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
python 整数越界问题详解
2019/06/27 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
一名女生的自荐信
2013/12/08 职场文书
高中家长寄语
2014/04/02 职场文书
借款担保书范文
2014/05/13 职场文书
安全施工责任书
2014/08/25 职场文书
个人主要事迹材料
2014/08/26 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
责任书范本大全
2015/05/11 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
Nginx反向代理、重定向
2022/04/13 Servers