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 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
js同源策略详解
May 21 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
js倒计时抢购实例
Dec 20 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 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
Yii2增加验证码步骤详解
2016/04/25 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
javascript基础知识
2016/06/07 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
为Python程序添加图形化界面的教程
2015/04/29 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
浅谈Python 参数与变量
2020/06/20 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
有原因的手表:Flex Watches
2019/03/23 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
会计专业自我鉴定
2014/02/10 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
计算机网络专业求职信
2014/06/05 职场文书
小学生作文评语集锦
2014/12/25 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技