electron中使用bootstrap的示例代码

 更新时间:2018-11-06 15:00:46   作者:佚名   我要评论(0)

安装


安装bootstrap命令如下:




npm install bootstrap --save

安装后可能报告如下错误:



npm WARN bootstrap@4.1.3 requires a peer of popper.

安装

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

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

您可能感兴趣的文章:

  • 使用electron实现百度网盘悬浮窗口功能的示例代码
  • electron实现qq快捷登录的方法示例
  • Electron-vue脚手架改造vue项目的方法
  • 从零开始用electron手撸一个截屏工具的示例代码
  • 使用electron将vue-cli项目打包成exe的方法
  • Nodejs 和 Electron ubuntu下快速安装过程
  • 解决npm安装Electron缓慢网络超时导致失败的问题
  • electron demo项目npm install安装失败的解决方法
  • 使用Electron构建React+Webpack桌面应用的方法
  • 详解Angular CLI + Electron 开发环境搭建

相关文章

  • 易语言播放指定的音乐文件

    易语言播放指定的音乐文件

    播放音乐命令 英文命令:PlayMusic 操作系统支持:Windows 所属类别:媒体播放 可以播放 .WAV、.MID 声音文件或相应格式的字节集声音数据、声音资源。成
    2018-11-06
  • electron中使用bootstrap的示例代码

    electron中使用bootstrap的示例代码

    安装 安装bootstrap命令如下: npm install bootstrap --save 安装后可能报告如下错误: npm WARN bootstrap@4.1.3 requires a peer of popper.
    2018-11-06
  • 微信小程序实现选项卡效果

    微信小程序实现选项卡效果

    本文实例为大家分享了微信小程序实现选项卡效果展示的具体代码,供大家参考,具体内容如下 demo.wxss .swiper-tab{ width: 100%; border-bottom:
    2018-11-06
  • Vue递归实现树形菜单方法实例

    Vue递归实现树形菜单方法实例

    什么是树形菜单还是要简单的啰嗦一下,比如: 上图是截图自elementui的实例,实现方式是用文档结构(类似像原生Dom文档结构的写法)的方式,好处就是很灵
    2018-11-06
  • Vue常用的几个指令附完整案例

    Vue常用的几个指令附完整案例

    越来越多的人在用Vue,刚开始接触vue的话常接触的指令就几个,统一归纳一下,做个demo演示。 指令 v-text v-html v-bind v-on v-model v-for 代
    2018-11-06
  • 微信小程序自定义tabBar组件开发详解

    微信小程序自定义tabBar组件开发详解

    本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下 以下代码保存在github地址 先看一看目录 template文件夹里存放tabb
    2018-11-06
  • 易语言截取当前窗口图片功能

    易语言截取当前窗口图片功能

    快照命令 英文命令:GetWinPic 操作系统支持:Windows 所属类别:系统处理 为高级用户提供,初级用户无需掌握; 捕获指定窗口或屏幕上所有现有显示内容,返回
    2018-11-06
  • 利用JavaScript缓存远程窃取Wi-Fi密码的思路详解

    利用JavaScript缓存远程窃取Wi-Fi密码的思路详解

    我一直想在这个小项目上花一些时间做一些研究,但是由于生活所迫让我总是一直繁忙。现在我终于可以抽出一些时间了继续研究这种攻击技术了,我将在本文中阐
    2018-11-05
  • windows10系统安装mysql-8.0.13(zip安装) 的教程详解

    windows10系统安装mysql-8.0.13(zip安装) 的教程详解

    安装环境说明 &#8226;系统版本:windows10 &#8226;mysql版本:mysql-8.0.13-winx64.zip &#8226;下载地址:http://mirrors.163.com/mysql/Downloads/MySQL
    2018-11-05
  • 易语言获取当前是几月份的方法

    易语言获取当前是几月份的方法

    这个功能要用到以下几个命令: 到时间命令 取现行时间命令 取月份命令 例程 说明 首先将编辑框中输入的时间转换成日期时间型的数据,然后用“取月份
    2018-11-05

最新评论