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 设计模式学习 Singleton
Jul 27 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
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
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
php实现上传图片文件代码
2015/07/19 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
深入分析JSONP跨域的原理
2014/12/10 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
Python数据库小程序源代码
2019/09/15 Python
python 默认参数相关知识详解
2019/09/18 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
Python 创建守护进程的示例
2020/09/29 Python
python3 re返回形式总结
2020/11/20 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
Shell脚本如何向终端输出信息
2014/04/25 面试题
英语演讲稿范文
2014/01/03 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
李强优秀员工观后感
2015/06/16 职场文书
矛盾论读书笔记
2015/06/29 职场文书
防震减灾主题班会
2015/08/14 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
Python 正则模块详情
2021/11/02 Python