react JS bootstrap JS not working

react JS bootstrap JS not working

本文关键字：JS working not bootstrap react      更新时间：2023-09-26

我正在使用bootstrap构建一个REACT JS应用程序，bootstrap CSS工作正常。但是，它似乎没有加载javascript，因为菜单切换按钮没有激活/切换菜单。

这是我的索引页，其中包括查询和javascript:

<!doctype html>
<html class="no-js" lang="">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width">
      <title>ICETEA</title>
      <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="/css/main.css">
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script src="/js/main.js"></script>
  </body>
</html>

最后没有错误。我从一个目录工作，从另一个目录构建，因此为什么没有更改被推送到浏览器。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

试着像我做的那样，试着把你的javascript放在你的body标签结束之前

我正在寻找一些东西，突然看到这个问题，我把一些更新的答案，所以你们可以运行bootstrap顺利与react没有任何其他

首先安装3个东西

npm install bootstrap jquery @popperjs/core

然后在你的应用程序或索引(意思是父组件)添加这个

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap";

那么你就可以在你的项目中使用所有的引导功能比如常规项目你甚至可以在一些ide中自动完成引导类比如webstrom pycharm pro

注意:它添加了bootstrap 5到你的项目，所以像bootstrap 4导航组件不会100%工作尝试只使用bootstrap 5

相关文章：