在我的电子应用程序中，引导程序不起作用答案

【问题标题】：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>

【问题讨论】：

标签： jquery node.js twitter-bootstrap electron

【解决方案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