Q&A
[現状]
以下のファイルコード(index_2.blade.php)を表示させようと思うとBootstrapが読み込まれずHTMLだけが表示されてしまいます。
[環境]
・composerのインストール済み
・Laravel ui インストール済み
・node.js npmインストール済み
リンク内容
こちらの記事の「テーブル準備」前までは手順通りできております。
[望む結果]
bootstrapを読み込ませる。
どなたかご回答いただけましたら幸いです。
[追加]
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
こちらを足したところ、Bootstrap自体は機能しましたが、画像の表示やJSが動いていない状況です。
<!-- index_2.blade.php --> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Kerri | Responsive Bootstrap 4 Personal Template</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="SRBThemes" /> <link rel="shortcut icon" href="images/favicon.ico"> <!--Bootstrap Css--> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <!-- Materialdesign icons Css --> <link href="css/materialdesignicons.min.css" rel="stylesheet"> <!-- Mobirise icons Css --> <link href="css/mobiriseicons.css" rel="stylesheet"> <!-- Magnific-popup --> <link rel="stylesheet" href="css/magnific-popup.css"> <!-- Animate Css --> <link rel="stylesheet" href="css/animate.min.css"> <!-- OWL SLIDER --> <link rel="stylesheet" href="css/owl.carousel.css" /> <link rel="stylesheet" href="css/owl.theme.css" /> <link rel="stylesheet" href="css/owl.transitions.css" /> <!-- Custom style Css --> <link href="css/style.css" rel="stylesheet"> <link href="css/color/default.css" rel="stylesheet" id="option-color"> </head> <body> <!-- Loader --> <div id="preloader"> <div id="status"> <div class="spinner">Loading...</div> </div> </div> <!-- Start Navbar --> <nav class="navbar navbar-expand-lg fixed-top custom-nav sticky"> <div class="container"> <a class="navbar-brand pt-0 logo" href="#"> <img src="images/logo.png" alt="" class="img-fluid logo-light"> <img src="images/logo-dark.png" alt="" class="img-fluid logo-dark"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="mdi mdi-menu"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#client">Client</a> </li> <li class="nav-item"> <a class="nav-link" href="#work">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link" href="#blog">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </div> </nav> <!-- End Navbar --> <!-- START HOME --> <section class="section header-bg-img h-100vh" id="home"> <div class="bg-overlay"></div> <div class="header-table"> <div class="header-table-center"> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-12"> <div class="text-center header-content mx-auto"> <h4 class="text-white first-title mb-4">Welcome</h4> <h1 class="header-name text-white text-capitalize mb-0">I'M <span class="simple-text-rotate font-weight-bold">Kerri Deo.,A Graphic Designer.,A Photographer.</span></h1> <p class="text-white mx-auto header-desc mt-4">It is a long established fact that a reader will be of a page when established fact looking at its layout.</p> <div class="mt-4 pt-2"> <a href="#" class="btn btn-outline-custom btn-round">Download Cv</a> </div> </div> </div> </div> </div> </div> </div> <div class="scroll_down"> <a href="#about" class="scroll"> <i class="text-white"></i> </a> </div> </section> <!-- END HOME --> <!--START FOOTER--> <footer class="footer bg-light"> <div class="container"> <div class="row justify-content-center text-center"> <div class="col-md-12"> <div class="text-center text-white footer-alt"> <ul class="list-unstyled list-inline mb-3"> <li class="list-inline-item"><a href="#"><i class="mdi mdi-facebook text-muted"></i></a></li> <li class="list-inline-item"><a href="#"><i class="mdi mdi-linkedin text-muted"></i></a></li> <li class="list-inline-item"><a href="#"><i class="mdi mdi-pinterest text-muted"></i></a></li> <li class="list-inline-item"><a href="#"><i class="mdi mdi-twitter text-muted"></i></a></li> </ul> <p class="text-muted mb-0"> 2018 - 2020 © Kerri. Design by SRBThemes.</p> </div> </div> </div> </div> </footer> <!--END FOOTER--> <!-- Back To Top --> <a href="#" class="back_top"> <i class="mdi mdi-chevron-up"> </i> </a> <!-- JAVASCRIPTS --> <script src="js/jquery.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <!--EASING JS--> <script src="js/jquery.easing.min.js"></script> <script src="js/scrollspy.min.js"></script> <!--PORTFOLIO FILTER JS--> <script src="js/isotope.js"></script> <!-- Magnific Popup Js --> <script src="js/jquery.magnific-popup.min.js"></script> <!--TEXT ROTETE--> <script src="js/jquery.simple-text-rotator.js"></script> <!-- CONTACT JS --> <script src="js/contact.js"></script> <!-- OWL CAROUSEL --> <script src="js/owl.carousel.min.js"></script> <!--CUSTOM JS--> <script src="js/custom.js"></script> <script> $(".simple-text-rotate").textrotator({ animation: "fade", speed: 3500 }); </script> </body> </html>
回答1件
0
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
これをたしたらいけませんか？
投稿2020/09/10 11:15
総合スコア211
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/10 12:32
2020/09/10 12:43
2020/09/10 15:39 編集
2020/09/10 23:04