在我的电子应用程序中,引导程序不起作用
Posted
技术标签:
【中文标题】在我的电子应用程序中,引导程序不起作用【英文标题】:bootstrap doesn't work, in my electron application 【发布时间】:2021-02-28 08:56:06 【问题描述】:您好,我正在尝试使用电子创建应用程序并集成引导程序。当我尝试导航栏(从 doc 复制和粘贴)时,它的显示效果不佳。
app screenshot
在任何搜索之后,我检查了我的导入,但对我来说一切正常。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script scr="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</head>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<body>
<h1>Bonjour le monde !</h1>
Nous utilisons Node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
et Electron <script>document.write(process.versions.electron)</script>.
<button id="btn">button</button>
<button type="button" class="btn-success">Basic</button>
<script>
require('./renderer')
window.$ = window.jquery = require('../node_modules/jquery/dist/jquery.js') // I also tried with only require('jquery')
require('../node_modules/bootstrap/dist/js/bootstrap.js')
</script>
</body>
</html>
【问题讨论】:
【参考方案1】:看起来您正在使用 Bootstrap 4 插件和 Bootstrap 3 HTML。
使用 Bootstrap 4 验证您的 HTML,呈现与您的屏幕截图相同的输出 https://www.codeply.com/go/6c6qWGrIpF/bootstrap-4-test-page 您可以将您的 HTML 粘贴到上面的链接中。
根据 Bootstrap 4 Navbar 更改 HTML 可解决问题 https://getbootstrap.com/docs/4.0/components/navbar/
【讨论】:
谢谢,它成功了。但我不确定我明白为什么,我才刚刚开始。 它很简单,样式是用 CSS 编写的,功能是用 JS 文件编写的。浏览器中 HTML 的输出取决于这两个文件。在您的场景中,使用的 HTML 是 Bootstrap 3 版本,该版本需要用于 BS-3 的 Bootstrap CSS 和 JS。但是你的 node_modules 中的 CSS 和 JS 属于 BS-4以上是关于在我的电子应用程序中,引导程序不起作用的主要内容,如果未能解决你的问题,请参考以下文章