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 相关文章推荐
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
vue发送ajax请求详解
Oct 09 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
PHP多文件上传实例
2015/07/09 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
python迭代器实例简析
2014/09/25 Python
wxPython框架类和面板类的使用实例
2014/09/28 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
详解Python 正则表达式模块
2018/11/05 Python
Python版名片管理系统
2018/11/30 Python
python模拟实现斗地主发牌
2020/01/07 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
pandas的resample重采样的使用
2020/04/24 Python
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
档案管理员岗位职责
2015/02/12 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python