Bootstrapのサンプルの使い方を知りたい

前提

当方Bootstrapの初心者です（HTMLやCSSはある程度使ったことがあります）
下記サイトではBootstrapのサンプルを提供しているようで、ローカルのPC上で再現してみたいと思ってます。
https://bootsnipp.com/snippets/dZGP

実現したいこと

このサンプルをローカルのWindows PCにファイルとして保存してブラウザで表示させてみたいのですがどのようにすればよいのでしょうか？

発生している問題・エラーメッセージ

上記サイトの左上にPreviewタグがあり、その右にHTML、CSS、JSのタグがあるので以下のようにしてみました。

上記サイトのHTMLのタグをクリックして表示されるコードをsample.htmlとして保存
上記サイトのCSSのタグをクリックして表示されるコードをbootstrap.min.cssとして保存
上記サイトのJSのタグをクリックして表示されるコードをbootstrap.min.jsとして保存

※sample.htmlとbootstrap.min.cssとbootstrap.min.jsは同一のフォルダに保存しました。

最後にsample.htmlをテキストエディタで開き、ヘッダー部分を以下のように修正

<link href="bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

HTMLに書かれた文字はブラウザに表示されるものの、CSSなどは一切適用されないようです。
おしえてください。

補足情報（FW/ツールのバージョンなど）

Windows 11 64bit
Google Chrome 108.0.5359.125

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

回答2件

Download Snippet が使えそうですね

ローカルでそのまま表示
ただJSとCSSはネット上のものなので、そこをローカルに置き換えれば

投稿2023/01/07 15:47

yuma.inaura

総合スコア1453

user1

2023/01/07 15:56

コメントありがとうございます。歯車のアイコンをクリックしても自分のブラウザでは「Download Snippet」は無く「View Full Screen」しかありませんでした。環境的な違いでしょうか。

yuma.inaura

2023/01/07 15:57

ログインしてたからかも？

user1

2023/01/12 14:25

ログインしたところ同様に表示されました。ありがとうございました。

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

ベストアンサー

HTMLに書かれた文字はブラウザに表示されるものの、CSSなどは一切適用されないようです。

Bootstrap本体を読み込んでいないのではないでしょうか。「上記サイトのCSSのタグをクリックして表示されるコード」だけでは必要なCSSが足りません。

投稿2023/01/07 14:49

maisumakun

総合スコア145183

user1

2023/01/07 15:21

ご返信ありがとうございます。 Bootstrap本体の読み込みを忘れていました。改めて以下のサイトからBootstrap本体をダウンロードし、zipを展開しました。 https://github.com/twbs/bootstrap/releases/download/v5.0.2/bootstrap-5.0.2-dist.zip 展開したzipの中にcssとjsのフォルダがありましたので、CSSタグの内容をbootstrap.min.cssの末尾に追記しました。また、JSタグの内容をbootstrap.min.jsの末尾に追記しました。最後にsample.htmlのヘッダーを以下のようにしました。 <link href="css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> sample.htmlを開くとCSSは問題なく適用されるようになりましたが、ボタンをクリックしても色が変わりません。おそらくjavascriptが反映されていないと思うのですが、単に以下のように末尾に追記するだけではだめなのでしょうか？ //# sourceMappingURL=bootstrap.min.js.map $('#radioBtn a').on('click', function () { var sel = $(this).data('title'); var tog = $(this).data('toggle'); $('#' + tog).prop('value', sel); $('a[data-toggle="' + tog + '"]').not('[data-title="' + sel + '"]').removeClass('active').addClass('notActive'); $('a[data-toggle="' + tog + '"][data-title="' + sel + '"]').removeClass('notActive').addClass('active'); })

maisumakun

2023/01/07 23:05

> 最後にsample.htmlのヘッダーを以下のようにしました。 //だけで始まるものは、ローカルファイルから開くとfile://と解釈されてしまいうまくいきません。jQueryの参照をhttps://に書き換えてください。

user1

2023/01/09 05:20

ご返信ありがとうございました。 sample.htmlのヘッダーを以下のように修正しましたが、状況は変わりませんでした（CSSは適用されますが、ボタンをクリックしても色が変わりません）尚、httpsをhttpに変えてみても状況は変わりませんでした。 <link href="css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

maisumakun

2023/01/09 06:08

jquery本体は、jQueryを使うJavaScriptより先に読み込む必要があります（気づかなくて失礼いたしました）。

user1

2023/01/10 10:25

ご返信ありがとうございました。以下のようにしましたが状況は変わりませんでした。 <link href="css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.min.js"></script> 何か私の方で誤解などありましたらご指摘ください。何度も申し訳ございません。

maisumakun

2023/01/10 11:13

Bootstrap付属のJavaScriptも読む必要があるのではないでしょうか（サイトで読み込んでいるbootstrap.min.jsです）。

user1

2023/01/10 14:22

何度も申し訳ございません。サイトで読み込んでいるbootstrap.min.jsとは上記ヘッダーに記載の3行目の事でしょうか？ <script src="js/bootstrap.min.js"></script>

maisumakun

2023/01/10 14:30

> 上記サイトのJSのタグをクリックして表示されるコードをbootstrap.min.jsとして保存このファイルとは別物です。

user1

2023/01/12 14:27

htmlのheaderを以下のようにしました。 <head> <meta charset="UTF-8">  <title>Document</title> <link href="css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> また、bodyの最後を以下にようにしました。 </body> <script type="text/javascript"> $('#radioBtn a').on('click', function(){ var sel = $(this).data('title'); var tog = $(this).data('toggle'); $('#'+tog).prop('value', sel); $('a[data-toggle="'+tog+'"]').not('[data-title="'+sel+'"]').removeClass('active').addClass('notActive'); $('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active'); }) </script> 上記で正常に動作するようになりました。

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

あなたの回答