laravel - Bootstrap javascript loaded but not working -
i'm trying new bootstrap have problem javascript. loaded 3 lines @ end of <body></body>
:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-kj3o2dktikvyik3uenzmm7kckrr/re9/qpg6aazgjwfdmvna/gpgff93hxpg5kkn" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/u6ypibehpof/4+1nzfpr53nxss+glckfwbdfntxtclqqenisfwazpkamnfnmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0abixch4zdo7tp9hkz4tshbi047nrkglo3sejag45jxxngifyzk4si90rdiqnm1" crossorigin="anonymous"></script>
and tested dropdown... doesn't work. i'm working laravel , blade, that's may reason, no ?
<!doctype html> <html> <head> <title>@yield('title')</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- css --> <link rel="stylesheet" href="{{ asset('css/app.css') }}"> <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> </head> <body> <!-- content --> <main class="container"> @yield('main') </main> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenubutton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenubutton"> <a class="dropdown-item" href="#">action</a> <a class="dropdown-item" href="#">another action</a> <a class="dropdown-item" href="#">something else here</a> </div> </div> <!-- scripts --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-kj3o2dktikvyik3uenzmm7kckrr/re9/qpg6aazgjwfdmvna/gpgff93hxpg5kkn" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/u6ypibehpof/4+1nzfpr53nxss+glckfwbdfntxtclqqenisfwazpkamnfnmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0abixch4zdo7tp9hkz4tshbi047nrkglo3sejag45jxxngifyzk4si90rdiqnm1" crossorigin="anonymous"></script> </body> </html>
edit : forgot, when i'm doing $.fn.tooltip.constructor.version
in console, have version number of bootstrap, mean it's loaded no?
found answer... need inside .container
if use javascript. so, works nice now:
<!doctype html> <html> <head> <title>@yield('title')</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- css --> <link rel="stylesheet" href="{{ asset('css/app.css') }}"> <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> </head> <body> <!-- content --> <div class="container"> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenubutton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenubutton"> <a class="dropdown-item" href="#">action</a> <a class="dropdown-item" href="#">another action</a> <a class="dropdown-item" href="#">something else here</a> </div> </div> </div> <!-- scripts --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-kj3o2dktikvyik3uenzmm7kckrr/re9/qpg6aazgjwfdmvna/gpgff93hxpg5kkn" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/u6ypibehpof/4+1nzfpr53nxss+glckfwbdfntxtclqqenisfwazpkamnfnmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0abixch4zdo7tp9hkz4tshbi047nrkglo3sejag45jxxngifyzk4si90rdiqnm1" crossorigin="anonymous"></script> </body> </html>
wiki
Comments
Post a Comment