javascript - How to include bootstrap 4 in an electron app

I am able to figure out how to include bootstrap css but could not figure out how to include bootstrap js. I am trying to create some bootstrap tabs. Here is some sample code I wrote.

<!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>

When I click on a tab it does not toggle. I think the issue is the bootstrap js is not being included right. I copied the tab code straight from bootstrap website.

I am able to figure out how to include bootstrap css but could not figure out how to include bootstrap js. I am trying to create some bootstrap tabs. Here is some sample code I wrote.

<!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>

When I click on a tab it does not toggle. I think the issue is the bootstrap js is not being included right. I copied the tab code straight from bootstrap website.

Share Improve this question asked May 13, 2018 at 15:33 Luke101 65.4k88 gold badges244 silver badges374 bronze badges

Do you have a link to a repo that replicates the issue? – John Woodruff Commented May 14, 2018 at 21:42
sorry, I have figured it out. Ill delete this question – Luke101 Commented May 15, 2018 at 14:46
If you've figured it out you should post an answer so others can benefit in the future. :) – John Woodruff Commented May 15, 2018 at 14:47
techsparx./nodejs/electron/load-jquery-bootstrap.html may also help – XoXo Commented Mar 15, 2019 at 15:41
also, this project is demonstrates how to use Bootstrap and jQuery with Electron. – XoXo Commented Mar 15, 2019 at 16:23

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

I have figured out the solution. I included the wrong popper library. Instead of including popper include popper.js. Here is how I did it

<!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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745530791a4631684.html

javascript - How to include bootstrap 4 in an electron app - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How to include bootstrap 4 in an electron app - Stack Overflow

1 Answer 1

相关推荐