gpt4 book ai didi

javascript - 如何在 Electron 应用程序中包含 bootstrap 4

转载 作者:行者123 更新时间:2023-11-30 09:23:28 25 4
gpt4 key购买 nike

我能够弄清楚如何包含 bootstrap css,但无法弄清楚如何包含 bootstrap js。我正在尝试创建一些 Bootstrap 选项卡。这是我编写的一些示例代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Coin Trader</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">

</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#profile" role="tab" data-toggle="tab">profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#buzz" role="tab" data-toggle="tab">buzz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#references" role="tab" data-toggle="tab">references</a>
</li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="profile">...</div>
<div role="tabpanel" class="tab-pane fade" id="buzz">bbb</div>
<div role="tabpanel" class="tab-pane fade" id="references">ccc</div>
</div>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require('./renderer.js');
window.$ = window.jquery = require("jquery");
require("popper")
require("bootstrap");
</script>
</body>
</html>

当我单击选项卡时,它不会切换。我认为问题是 bootstrap js 没有被正确包含。我直接从 Bootstrap 网站复制了选项卡代码。

最佳答案

我已经找到解决办法了。我添加了错误的波普尔库。不包含 popper,而包含 popper.js。这是我的做法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Coin Trader</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">

</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#profile" role="tab" data-toggle="tab">profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#buzz" role="tab" data-toggle="tab">buzz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#references" role="tab" data-toggle="tab">references</a>
</li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="profile">...</div>
<div role="tabpanel" class="tab-pane fade" id="buzz">bbb</div>
<div role="tabpanel" class="tab-pane fade" id="references">ccc</div>
</div>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require('./renderer.js');
window.$ = window.jquery = require("jquery");
window.popper = require("popper.js");
require("bootstrap");
</script>
</body>
</html>

关于javascript - 如何在 Electron 应用程序中包含 bootstrap 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50317773/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com