如何在电子应用程序中包含引导程序 4

Question

如何在电子应用程序中包含引导程序 4

Luk*_*101 2 javascript twitter-bootstrap electron

我能够弄清楚如何包含 bootstrap css，但无法弄清楚如何包含 bootstrap 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");
      require("popper")
      require("bootstrap");
    </script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Luk*_*101 5

我已经想出了解决办法。我包含了错误的 popper 库。而不是包括popperinclude 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，6 月前
查看次数：	3875 次
最近记录：	7 年，6 月前