Как включить bootstrap 4 в электронное приложение - PullRequest
0 голосов
/ 13 мая 2018

Я могу понять, как включить загрузчик CSS, но не могу понять, как включить загрузчик 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>

Когда я нажимаю на вкладку, она не переключается.Я думаю, что проблема в начальной загрузке JS не включается правильно.Я скопировал код вкладки прямо с сайта начальной загрузки.

1 Ответ

0 голосов
/ 15 мая 2018

Я разобрался с решением.Я включил неправильную библиотеку Поппера.Вместо включения 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...