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的replace方法详细介绍
Nov 09 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
vue实现购物车结算功能
Jun 18 Javascript
在vue中使用image-webpack-loader实例
Nov 12 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函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
jquery foreach使用示例
2013/09/12 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
JS中的回调函数实例浅析
2018/03/21 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
python 为什么说eval要慎用
2019/03/26 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
毕业生简单求职信
2013/11/19 职场文书
导游的职业规划书范文
2013/12/27 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
会计核算科岗位职责
2014/03/19 职场文书
小学新学期寄语
2014/04/02 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
电工实训报告总结
2014/11/05 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
质量保证书格式
2015/02/27 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
大学生村官入党自传
2015/06/26 职场文书