I am building a REACT JS application using bootstrap, the bootstrap CSS is working fine. however it does not seem to be loading the javascript as the menu toggle button does not activate/toggle the menu.
here is my index page which includes the query and 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/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css">
<script src=".1.3.min.js"></script>
<!-- Latest piled and minified JavaScript -->
<script src=".3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app"></div>
<script src="/js/main.js"></script>
</body>
</html>
There were no errors in the end. I was working from one directory and building form another hence why no changes were being pushed to the browser.
I am building a REACT JS application using bootstrap, the bootstrap CSS is working fine. however it does not seem to be loading the javascript as the menu toggle button does not activate/toggle the menu.
here is my index page which includes the query and 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./bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css">
<script src="https://code.jquery./jquery-2.1.3.min.js"></script>
<!-- Latest piled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app"></div>
<script src="/js/main.js"></script>
</body>
</html>
There were no errors in the end. I was working from one directory and building form another hence why no changes were being pushed to the browser.
Share Improve this question edited Oct 19, 2015 at 14:39 chinds asked Oct 8, 2015 at 12:38 chindschinds 1,8295 gold badges29 silver badges58 bronze badges 5- Can you show your javascript ? – Pawel Commented Oct 8, 2015 at 12:45
- what exactly do you need to see? – chinds Commented Oct 8, 2015 at 12:48
- can u please place your full code within javascript files. – Neha Thakur Commented Oct 8, 2015 at 12:48
- 1 minute, i have just seen this error in the chrome console: Uncaught Error: Bootstrap's JavaScript requires jQuery It looks like my app may not be building correctly as browserify does not seem to reload the browser when I edit and save a file. – chinds Commented Oct 8, 2015 at 12:50
-
It looks like your
jqueryfile hasn't loaded from the error you have shown.. – Guruprasad J Rao Commented Oct 8, 2015 at 12:52
2 Answers
Reset to default 4<!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* e first in the head; any other head content must e *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Try this as I have done, try placing your Javascripts before the ending your body tag
I was looking for something and suddenly see this question, i put some update on answer so you guys can run bootstrap smoothly with react without anything else
first install 3 things
npm install bootstrap jquery @popperjs/core
then on you app or index ( meaning the parent ponent ) add this
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap";
then you can use all bootstrap things on you project like regular project and you even get autoplete on bootstrap classes on some ide like webstrom, pycharm pro
Note: it add bootstrap 5 to you project so something like bootstrap 4 nav ponent wont work 100% try to use only bootstrap 5
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744323197a4568521.html
评论列表（0条）