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

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

赞 (0)

相关推荐

  • 详解Webpack实战之构建 Electron 应用

    Electron可以让你使用开发 Web 的技术去开发跨平台的桌面端应用,由 Github 主导和开源,大家熟悉的 Atom 和 VSCode 编辑器就是使用 Electron 开发的. Electron 是 Node.js 和 Chromium 浏览器的结合体,用 Chromium 浏览器显示出的 Web 页面作为应用的 GUI,通过 Node.js 去和操作系统交互. 当你在 Electron 应用中的一个窗口操作时,实际上是在操作一个网页.当你的操作需要通过操作系统去完成时,网页会通过 N

  • electron + vue项目实现打印小票功能及实现代码

    一 需求: 公司项目需要通过electron调用系统打印机,实现打印小票的功能. 二.分析: electron打印大概有两种: 第一种:通过window的webcontent对象,使用此种方式需要单独开出一个打印的窗口,可以将该窗口隐藏,但是通信调用相对复杂. 第二种:使用页面的webview元素调用打印,可以将webview隐藏在调用的页面中,通信方式比较简单. 两个对象调用打印方法的使用方式都一样. 本文是通过第二种方法实现静默打印. 三.实现过程: 1.要实现打印功能,首先要知道我们的设备

  • 使用electron将vue-cli项目打包成exe的方法

    如果你已经做好了一个vue的项目,并且想要将他打包成exe,那么请继续阅读. 首先你可以下载一个demo了解一下. git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start 这个demo主要就是main.js和package.json 打开main.js const {app, BrowserWindow} = require('electron

  • 详解Angular CLI + Electron 开发环境搭建

    本文介绍了Angular CLI + Electron 开发环境搭建,分享给大家 用 @angular/cli 配合 Electron 构建桌面软件开发环境,可以在 Electron 中使用 Angular 的各种特性,使开发桌面软件像开发网站一样简单.快捷,而且可以模块化,紧跟最新技术趋势. 安装 Angular CLI 和 Electron 首先使用 npm 安装 Angular Cli: $ npm i -g @angular/cli 然后安装 Electron $ npm i -g el

  • Electron中实现大文件上传和断点续传功能

    Electron中实现大文件上传和断点续传功能

    Electron官网的描述:Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的. 从官网的描述我们可以简单的概括,Electron是开源的框架,可以使用h5来开发跨平台pc桌面应用,这样前端开发这可以开发桌面应用了.由于它是基于Chromium和Node.js开发的,所以在Ele

  • 解决npm安装Electron缓慢网络超时导致失败的问题

    Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和CSS 构建跨平台的桌面应用程序.它是基于io.js 和 Chromium 开源项目,小编碰到npm安装Electron缓慢网络超时导致失败情况,下面我们来看看. 1. npm源过慢的话,可以把源切到国内的淘宝的镜像上. npm config set registry https://registry.npm.taobao.org 2. 到electron的国内镜像下载最新的安装包,主要看好自

  • 使用electron制作满屏心特效的示例代码

    本文介绍了使用electron制作满屏心特效的示例代码,分享给大家,具体如下: 图片被压缩了 看起来很难看 主进程代码 import {BrowserWindow, app, ipcMain} from 'electron' createWindow(); ipcMain.on('quitApp', () => { app.quit(); }); function createWindow() { const loginURL = process.env.NODE_ENV === 'develo

  • 从零开始用electron手撸一个截屏工具的示例代码

    最近在尝试利用 electron 将一个 web 版的聊天工具包装成一个桌面 APP.作为一个聊天工具,截屏可以说是一个必备功能了.不过遗憾的是没有找到很成熟的库来用,也可能是打开方式不对,总之呢没看到现成的,于是就想从头撸一个简单的截图工具.下面就进入正题吧! 思路 electron 提供了截取屏幕的 API,可以轻松的获取每个屏幕(存在外接显示器的情况)和每个窗口的图像信息. 把图片截取出来,然后创建一个全屏的窗口盖住整个屏幕,将截取的图片绘制在窗口上,然后再覆盖一层黑色半透明的元素,看起来

  • 关于node-bindings无法在Electron中使用的解决办法

    node-bindings非常好用,但是在Electron中无法使用,我查了一下,是因为fileName以file://开头导致无法定位动态库的根目录.已经提交给作者了,可以临时修改一下node_modules/bindings/bindings.js. exports.getFileName = function getFileName (calling_file) { var origPST = Error.prepareStackTrace , origSTL = Error.stackT

  • electron制作仿制qq聊天界面的示例代码

    本文介绍了electron制作仿制qq聊天界面的示例代码,分享给大家,具体如下: 效果图: 样式使用scss和flex布局 这也是制作IM系统的最后一个界面了! 在制作之前参考了qq和千牛 需要注意的点 qq将滚动条美化了 而且在无操作的情况下是不会显示的 滚动条美化 ::-webkit-scrollbar { /*滚动条整体样式*/ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } ::-webkit-scrollbar-thumb { /*滚动条里面

随机推荐