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面向对象设计一 工厂模式
Dec 20 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 Javascript
JS实现4位随机验证码
Oct 19 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
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
php向js函数传参的几种方法
2014/08/10 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
js的event详解。
2006/09/06 Javascript
List Installed Software Features
2007/06/11 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
基于JS实现的倒计时程序实例
2015/07/24 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
应届大学生求职信
2014/07/20 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
评先进个人材料
2014/12/29 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
学校标语口号大全
2015/12/26 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
解决xampp安装后Apache无法启动
2022/03/21 Servers