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 获取滚动条位置等信息的函数
Sep 08 Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
Vue.js对象转换实例
Jun 07 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
jQuery实现滚动效果
Nov 17 jQuery
vue.js中实现登录控制的方法示例
Apr 23 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 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 !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
使用JS 清空File控件的路径值
2013/07/08 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
vue实现淘宝购物车功能
2020/04/20 Javascript
python轻松实现代码编码格式转换
2015/03/26 Python
Python中用format函数格式化字符串的用法
2015/04/08 Python
使用python生成目录树
2018/03/29 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
python 串行执行和并行执行实例
2020/04/30 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
小学毕业感言50字
2014/02/16 职场文书
出生证明范本
2015/06/15 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python