Bootstrap CSS не загружается на странице примера - PullRequest
Новая
       15

Bootstrap CSS не загружается на странице примера

0 голосов
/ 26 апреля 2020

Я экспериментирую с bootstrap css, но он не загружается в моем браузере, я даже опубликовал страницу на своем сервере, он даже не отображает стили css. Теперь другие страницы примеров нормально загружаются в моем браузере. Только те, которые я загружаю локально, дают мне ошибку.

Вот то, что я до сих пор пробовал:

  1. Проверено HTML, чтобы убедиться, что я делаю какую-то синтаксическую ошибку, но это не так. Он был чистым как свисток.
  2. Загрузил bootstrap. css и локально сослался на него в html на тот случай, если мой сервер что-то загрузил, но это тоже не сработало .
  3. Наконец, я подумал, что это может быть связано с кодировкой текста моего текстового редактора или, возможно, с несовместимостью символов в конце строки, поэтому я пошел на codeply.com и выполнил эту чертову вещь в их онлайн-редакторе. и, Господи, это не сработало там.

Чтобы пояснить далее, как должна выглядеть эта страница enter image description here

против как это выглядит enter image description here

Я вижу, что стили css частично применяются, поскольку на странице не отображаются шрифты и стили по умолчанию html. Я даже пытался изменить разрешения файла индекса. html на 777 в случае, если это вызывало проблемы, но пока все напрасно.

Вот ссылка на мой необработанный html в codeply.com 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div class='site-wrapper'>
        <div class='site-wrapper-inner'>
            <div class='cover-container'>
                <div class='masthead clearfix'>
                    <div class='inner'>
                        <h3 class='masthead-brand'> NileSoft </h3>
                        <nav>
                            <ul class='nav masthead-nav'>
                                <li>Our Clients</li>
                                <li>Our Services</li>
                                <li>Contact</li>
                            </ul>
                        </nav>
                    </div>
                    <div class="inner cover">
                        <h1 class="cover-heading">Cover your page.</h1>
                        <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text and add your own fullscreen background photo to make it your own.</p>
                        <p class="lead">
                            <a href="#" class="btn btn-lg btn-default">Learn more</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.main.js"></script>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 26 апреля 2020

Скрипт, импортированный внизу, имеет http, возможно, он заблокирован вашим браузером. Кроме того, запись <script src="js/bootstrap.main.js"></script> может не работать в codeply. Также попробуйте импортировать другие файлы js после стандартных библиотек, таких как jquery.

.
0 голосов
/ 26 апреля 2020

Могу попробовать написать тег script, такой как этот: <script src="./js/bootstrap.main.js"></script>

Кроме того, то же самое относится и к тегам ссылок, которые локально включают ваш файл bootstrap: <link rel="stylesheet" href="./css/bootstrap.min.css">

Кроме того, предпочтительный порядок для файлов CSS и JS следующий: 

<html>

<head>
    <!-- Bootstrap stylesheet -->
    <link rel="stylesheet" href="./css/bootstrap.css" />

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>

<body>
    ...


   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

   <!-- Bootstrap JS File -->
   <script src="./js/bootstrap.min.js"></script>

   <!-- Custom JS File -->
   <script src="./js/custom.js"></script>
</body>

</html>
...