Q&A
heroku&Dropboxで使用しています。
本日bootstrapを使用したサイトの動作確認をしようとしたところbootstrapが一切動作せずcssが完全に崩れてしまいました。
ターミナルなどは使わずにDropboxとの同期だけでアップロードを行っています。どのようにしたらbootstrapが使えるようになるでしょうか？よろしくお願いします。
下記はサンプルです。こちらもやはりデザインが崩れてしまいました。
<?php echo "<!DOCTYPE html>"; ?> <html lang="ja"> <head> <meta charset="utf-8"> <title>Bootstrapの練習</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="js/bootstrap.min.js"></script> </head> <body></body> </html><div class="container" style="padding:20px 0"> <p>Product A <span class="label label-primary">NEW!</span><p> <p>Inbox <span class="badge">5</span><p> <p>Inbox <span class="badge"></span><p> <div class="alert alert-info"> <button class="close" data-dismiss="alert">×</button> お知らせ！ </div> <div class="panel panel-primary"> <div class="panel-heading"> お知らせ！ </div> <div class="panel-body"> こんにちは！ </div> </div> </div> <script src="http://code.jquery.com/jquery.js"></script>
回答2件
0
ベストアンサー
補足です。
Ｈerokuはデフォルトで共用SSLが有効になっているので、誤ってsslでアクセスして
しまうことがよくあります。
その場合、jsやcssをhttp://で読み込もうとしてもエラーになってしまい、画面が
くずれるケースがありますので、その点も確認してみてください。
投稿2016/04/04 10:46
総合スコア25
0
はじめましてuserunknownと申します。
本番のコードについてはわかりませんが、少なくともサンプルコード
を見る限りでは、下記の2点が原因となっている可能性が高いと思わ
れます。
（１）cssやjsが読み込まれていない。
パスやURLの誤りにより、cssやjsが正常に読み込まれず、結果正常
動作していない可能性があります。
ブラウザでソースコードを表示し、css,jsのパスをクリックしてみて
404エラーが発生していないかどうか確認してみるとよいと思います。
（２）jsの読み込みの順番に問題がある
bootstrapはjqueryで書かれているので、jqueryを読み込んだ後、boot
strapを読み込む必要がありますが、サンプルコードでは順番が逆に
なっています。
下記のサンプルコードの修正版を記載いたしますので、ご参考になさ
ってください。
※Herokuで動作確認済みです。
※関連部分以外はコードの変更は行っておりません。
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html><div class="container" style="padding:20px 0"> <p>Product A <span class="label label-primary">NEW!</span><p> <p>Inbox <span class="badge">5</span><p> <p>Inbox <span class="badge"></span><p> <div class="alert alert-info"> <button class="close" data-dismiss="alert">×</button> お知らせ！ </div> <div class="panel panel-primary"> <div class="panel-heading"> お知らせ！ </div> <div class="panel-body"> こんにちは！ </div> </div> </div> <script src="http://code.jquery.com/jquery.js"></script>
以上よろしくお願いいたします。
投稿2016/04/04 09:51
総合スコア25
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。