Bootstrapが読み込めない

下記のサイトを見て手順に従いコードを書いたのですがエラーが出てbootstrapが反映されません
https://techacademy.jp/magazine/6270
インストールしたbootstrapのフォルダの中に新たにindex.htmlを作成したのですが・・・

解決方法を教えてください

コードは

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4  <head>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <title>Bootstrap Sample</title>
9    <!-- BootstrapのCSS読み込み -->
10    <link href="css/bootstrap.min.css" rel="stylesheet">
11    <!-- jQuery読み込み -->
12    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
13    <!-- BootstrapのJS読み込み -->
14    <script src="js/bootstrap.min.js"></script>
15  </head>
16  <body>
17    <header style="background-color:gray">Header</header>
18    <div class="container-fluid">
19      <div class="row">
20        <div class="col-sm-2" style="background-color:red;">Red</div>
21        <div class="col-sm-8" style="background-color:blue;">Blue</div>
22        <div class="col-sm-2" style="background-color:yellow;">Yellow</div>
23      </div>
24    </div>
25    <footer style="background-color:gray">Footer</footer>
26  </body>
27</html>

x_x

2018/11/20 07:59

どんなエラーが出ていますか？　また、Bootstrapのバージョンはいくつでしょうか？

退会済みユーザー

2018/11/22 09:05

Failed to load resource: net::ERR_FILE_NOT_FOUND bootstrap.min.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND というエラーが出ます。4.0.0というものをインストールしています

行動規範の内容に同意します

回答1件

ベストアンサー

html
1    <!-- BootstrapのCSS読み込み -->
2    <link href="css/bootstrap.min.css" rel="stylesheet">
3    <!-- jQuery読み込み -->
4    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
5    <!-- BootstrapのJS読み込み -->
6    <script src="js/bootstrap.min.js"></script>

のbootstrapの読込部分をCDNに切り換えますと問題なく動作しますので、CSS,jsファイルの位置が問題なのでしょうね。

「エラーが出て」と記載がありますが、その内容を記述した方が速く回答を得られると思います。

参考までにCDNでの全ソースを記載しておきます。

ご参考までに

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <title>Bootstrap Sample</title>
8    <!-- BootstrapのCSS読み込み -->
9	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
10    <!-- jQuery読み込み -->
11    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
12    <!-- BootstrapのJS読み込み -->
13<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
14  </head>
15  <body>
16    <header style="background-color:gray">Header</header>
17    <div class="container-fluid">
18      <div class="row">
19        <div class="col-sm-2" style="background-color:red;">Red</div>
20        <div class="col-sm-8" style="background-color:blue;">Blue</div>
21        <div class="col-sm-2" style="background-color:yellow;">Yellow</div>
22      </div>
23    </div>
24    <footer style="background-color:gray">Footer</footer>
25  </body>
26</html>

投稿2018/11/20 02:48

退会済みユーザー

総合スコア0

退会済みユーザー

2018/11/20 02:55

ご回答ありがとうございますお書きいただいたコードですがデバッグしると Failed to load resource: net::ERR_FILE_NOT_FOUND bootstrap.min.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND というエラーが出ます質問時のエラーと同じです

行動規範の内容に同意します