Как запустить / проверить / попробовать пример Bootstrap? - PullRequest
0 голосов
/ 31 октября 2018

Я скачал источник Bootstrap 4.1 с https://getbootstrap.com/docs/4.1/examples/. Я хочу просто протестировать или запустить его. Я подумал, что достаточно просто открыть index.html и просмотреть выполненный источник в виде HTML-документа. Это определенно не работает, как ожидалось.

Пожалуйста, помогите новичку.

Ответы [ 2 ]

0 голосов
/ 10 ноября 2018

На этой странице в вашем сообщении (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 - это интерфейсный фреймворк.

0 голосов
/ 31 октября 2018

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

Если вы работаете в Windows, WAMPP или XAMPP настроит для вас одну на вашем компьютере.

После настройки вы сможете перейти на http://localhost, чтобы увидеть ваш сайт. Они оба создали страницу панели инструментов.

Если вы хотите продолжить настройку примера начальной загрузки, вам нужно найти папку «www» или «htdocs» и очистить ее, добавить исходный код начальной загрузки и затем использовать браузер для перехода к http://localhost снова.

Если вы хотите сохранить страницу панели инструментов, вам нужно создать новую папку в "htdocs" или "www" и добавить туда исходный код. Затем перейдите к http://localhost/newfoldername, чтобы просмотреть его в браузере.

...