На этой странице в вашем сообщении (https://getbootstrap.com/docs/4.1/examples/) у вас есть ссылка «скачать исходный код». То, что вы скачали, является исходным кодом для платформы Bootstrap 4.1, которую также можно найти на их Github здесь: https://github.com/twbs/bootstrap
Я полагаю, что вы ищете способ запуска примеров шаблонов, которые вы видели, и что вам не интересен весь исходный код, лежащий в основе инфраструктуры Bootstrap, для его создания или изменения самостоятельно. Вы просто хотите использовать это. То, что вы скачали, возможно, излишне для ваших нужд.
Чтобы использовать Bootstrap, перейдите на http://getbootstrap.com/docs/4.1/getting-started/introduction/,, и я бы предложил вам использовать их CDN, как показано там (Сети доставки контента - самый быстрый и простой способ - на этих серверах размещаются файлы JavaScript и CSS для вам. Вам даже не нужно загружать их на свой собственный диск), если вы просто хотите запустить / продемонстрировать примеры, которые вы просматривали.
Чтобы использовать и модифицировать эти примеры Boostrap (т.е. открыть index.html
и просмотреть пример: HTML, JavaScript, CSS), вы найдете их в этом ZIP-файле всего загруженного исходного кода Bootstrap, и поэтому связывает вас со всем источником Bootstrap. Они находятся в этом каталоге:
bootstrap-4.1.3.zip\bootstrap-4.1.3\site\docs\4.1\examples
Давайте рассмотрим пример album
, включенный в их ZIP-архив. Если мы пойдем дальше и откроем index.html
, мы увидим, что наш веб-браузер просто загрузит HTML. CSS и JavaSript не выполняются. Чтобы подтвердить это, мы обычно можем нажать F12, чтобы открыть большинство инструментов веб-браузера для веб-браузера (Chrome, Firefox, Opera, IE / Edge и т. Д.) И посмотреть раздел Console
. Мы видим на этом примере album
, мы получаем ERR_FILE_NOT_FOUND
для bootstrap.min.css
, popper.min.js
, bootstrap.min.js
, holder.min.js
, favicon.ico
.
Давайте взглянем на код index.html
альбома. Глядя на строку 13, мы можем увидеть:
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
Так что путь к каталогу совпадает с тем, где находится bootstrap.min.css
файл? То же самое для связанной favicon.ico
в строке 8. Глядя на нижнюю часть index.html
, мы можем видеть, что здесь весь JavaScript связан. Во-первых, у нас есть CDN jQuery в строке 226. Мы загрузили его, поэтому мы не увидели ERR_FILE_NOT_FOUND
. Более того, у нас есть несколько файлов JavaScript, таких как popper.js
и bootstrapmin.min.js
, чтобы назвать несколько, которые, вероятно, не соответствуют нашей структуре каталогов.
Извлекая весь архив для bootstrap-4.1.3.zip
, а затем пытаясь открыть album
'index.html
, я все еще вижу, что мы на самом деле получаем ERR_FILE_NOT_FOUND
для bootstrap.min.css
и bootstrap.min.js
. Это потому, что они сделали ошибку, связывая
вам файлы JavaScript и CSS, которые не существуют на диске / в этой структуре каталогов.
Чтобы исправить это:
В строке 12-13 измените его следующим образом:
<!-- Bootstrap core CSS -->
<link href="../../../../../dist/css/bootstrap.min.css" rel="stylesheet">
И в строке 229 изменить на это:
<script src="../../../../../dist/js/bootstrap.min.js"></script>
Сохраните файл, обновите страницу, и пример будет работать. Вы также увидите, что у нас нет ошибок в панели консоли веб-разработчика.
Для подтверждения вам не нужен сервер Apache или язык PHP (WAMP, XAMPP). Вы обслуживаете не файлы PHP, а чисто клиентские технологии: CSS, JavaScript, HTML. Bootstrap - это интерфейсный фреймворк.