2014-01-28 3 views
5

Я экспериментировал с Twitter Bootstrap и столкнулся с проблемой, которую я не могу решить. В принципе, у меня очень простой HTML-файл (основанный на начале этого урока: http://www.sitepoint.com/understanding-twitter-bootstrap-3/), и я могу открыть файл, но он не загружает CSS.Bootstrap CSS не загружается

Я пробовал это локально, а также с моего веб-сервера, и в обоих случаях CSS не загружается. В этом учебнике есть некоторые ошибки, на которых кавычки идут, которые я исправил, но у меня были те же проблемы с другим учебником.

index.html находится в той же папке, что и папка CSS.

Вот мой HTML:

<!DOCTYPE html> 
<html> 
<head> 
<title>Bootstrap 101 Template</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!-- Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
</head> 

<body> 
<h1>Hello, world!</h1> 

<script src="//code.jquery.com/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html> 

Пожалуйста, ради любви к Богу помочь мне, прежде чем я уничтожить мой Macbook.

+1

Любые ошибки в консоли? Является ли файл css указанным вами? – patricksweeney

+1

Как предложил patrick, проверьте окно консоли браузера, если он не может загрузить файл .css, он должен выводиться там, где он пытается выглядеть. Однако вы упомянули, что .css-файл находится в той же папке, что и 'index.html' - вы пытались изменить свой href на' href = "bootstrap.min.css". – X3074861X

ответ

4

Попробуйте использовать bootstrap.css вместо bootstrap.min.css. Кроме того, убедитесь, что он находится на правильном пути.

Еще одна вещь, которую вы можете попробовать, - это использовать media="all" вместо media="screen" в ваших технических характеристиках.

Ваш тег javascript для jQuery выглядит подозрительно. Либо укажите относительный путь в вашем локальном каталоге, либо абсолютный путь к внешнему URL-адресу.

+0

Вы можете ссылаться на сценарий таким образом, как он может лучше справляться с различными протоколами (что означает http против https). Я определенно соглашусь с тем, что новичок должен указывать на него относительный путь/абсолютную ссылку. – patricksweeney

+0

Firebug сообщает: «Bootstrap требует JQuery», который я никогда не использовал. Я предполагаю, что автор учебника поставил ссылку, которая не работает, и это может быть проблемой. Я смотрю в CDN и немного смущен. Есть ли универсальная связь, которую люди могут использовать для подключения к jQuery? – user3246092

+0

Да, есть несколько мест, из которых вы можете его получить (у Microsoft, Google и нескольких других есть свои собственные), и у фонда jQuery есть еще один пример: Это для версии jQuery 2.0.3 – reectrix

0

при загрузке загрузочных файлов на ваш хостинг, обязательно загрузите ВСЕ файлы даже в файлы .map. Я сделал это, и это сработало для меня.

+1

.map файлы используются браузерами, чтобы помочь отлаживать мини-файлы. Они отображают мини-версию в полную версию, чтобы вы могли видеть, что происходит на самом деле. Это не должно влиять на выход. См. Http://stackoverflow.com/a/21768051/494356. – Khalos

0

У меня была та же проблема, и я решил это.

открыть файл в блокноте windows, выбрать save_as> Рядом с кнопкой «Сохранить» откройте «Кодирование» и выберите UTF-8!

мой файл был сохранен в кодировке Unicode. Я использовал блокнот Windows для сохранения - как мой файл в кодировке UTF-8, и проблема исчезла.

вы также можете использовать блокнот ++ для изменения кодировки файла. удачи

0

Я нашел этот ответ, потому что это был лучший поиск Google, но у меня была эта проблема по совершенно другой причине.

Для тех, кто мог бы сделать ту же самую ошибку, которую я имею, не забудьте добавить

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 

или какие-либо ссылки на другую версию начальной загрузки, так что ваш код знает, где можно получить всю информацию о связанных с начальной загрузкой

3

У меня была такая же проблема, но она была уникальной, не уверен, что у другой была такая же проблема. У меня было «rel =» перед «href =». Просто замените места, то есть «href =», прежде чем «rel =» решит проблему. Спасибо за тонну за правильный синтаксис.

+0

Не могли бы вы рассказать о том, какой браузер вы используете? Потому что я никогда не видел этого раньше! –

0

Похоже, это просто проблема с каталогом. Вы говорите, что у вас есть файл HTML и файл CSS в той же папке? Затем загрузить ссылку на файл так:

<link href="bootstrap.min.css" rel="stylesheet" media="all"> 

Else Если файл CSS находится в папке «CSS», а затем перейдите в каталог:

<link href="css/bootstrap.min.css" rel="stylesheet" media="all"> 

Если хуже приходит к худшему использованию внешняя ссылка для устранения неполадок:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> 
Смежные вопросы