在我的电子应用程序中,引导程序不起作用

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

以上是关于在我的电子应用程序中,引导程序不起作用的主要内容,如果未能解决你的问题,请参考以下文章

覆盖引导样式不起作用

下拉菜单引导程序在平板电脑 android 中不起作用

切换按钮在引导程序4中不起作用,而角度7应用程序在导航栏中不起作用

DatePicker 在引导程序 4 上不起作用

错误处理程序上的引导验证器不起作用

带有引导程序的媒体查询不起作用