脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → electron中使用bootstrap

electron中使用bootstrap的示例代码

 更新时间：2018年11月06日 14:10:37   作者：tywali  
这篇文章主要介绍了electron中使用bootstrap的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

安装

安装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');

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Bootstrap Table使用整理(二)

    Bootstrap Table使用整理(二)

    这篇文章主要介绍了Bootstrap Table使用整理(二)的相关资料,需要的朋友可以参考下
    2017-06-06
  • 微信小程序实现自动定位功能

    微信小程序实现自动定位功能

    这篇文章主要为大家详细介绍了微信小程序实现自动定位功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • Vue.js实现页面后退时还原滚动位置的操作方法

    Vue.js实现页面后退时还原滚动位置的操作方法

    Vuet看起来也不是很复杂，只需要定义好模块状态，然后在组件中设置对应的规则来更新模块的状态即可，这篇文章主要介绍了Vue.js实现页面后退时还原滚动位置的实现方法,需要的朋友可以参考下
    2022-07-07
  • js生成二维码的示例代码

    js生成二维码的示例代码

    这篇文章主要介绍了js生成二维码的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-03-03
  • JavaScript函数中的this四种绑定形式

    JavaScript函数中的this四种绑定形式

    javascript中的this和函数息息相关，所以今天，我就给大家详细地讲述一番：javascript函数中的this ,需要的朋友可以参考下
    2017-08-08
  • 理解Javascript_01_理解内存分配原理分析

    理解Javascript_01_理解内存分配原理分析

    在正式开始之前，我想先说两句，理解javascript系列博文是通过带领大家分析javascript执行时的内存分配情况，来解释javascript原理，具体会涵盖javascript预加载，闭包原理，面象对象，执行模型，对象模型...,文章的视角很特别，也非常深入，希望大家能接受这种形式，并提供宝贵意见。
    2010-10-10
  • 深度解析JavaScript中的filter()方法

    深度解析JavaScript中的filter()方法

    在JavaScript中,filter()是一个数组方法,用于从数组中过滤出符合特定条件的元素,并返回一个新数组,本文将带大家深度解析JavaScript中的filter()方法,需要的朋友可以参考下
    2023-09-09
  • JS中类的静态方法，静态变量，实例方法，实例变量区别与用法实例分析

    JS中类的静态方法，静态变量，实例方法，实例变量区别与用法实例分析

    这篇文章主要介绍了JS中类的静态方法，静态变量，实例方法，实例变量区别与用法,结合实例形式详细分析了JS中类的静态方法，静态变量，实例方法，实例变量相关功能、使用方法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • 小程序实现左滑删除的效果的实例代码

    小程序实现左滑删除的效果的实例代码

    这篇文章主要介绍了小程序实现左滑删除的效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-10-10
  • javascript 支持ie和firefox杰奇翻页函数

    javascript 支持ie和firefox杰奇翻页函数

    杰奇小说系统用到的翻页函数，支持firefox，官方自带的模板不支持，这样大家就可以用firefox浏览网页了，在网页木马横行的今天，firefox比ie要安全不少
    2008-07-07

最新评论