Блог

Главная - Вопросы по программированию - Разрыв страницы начальной загрузки. Панель навигации и элементы страницы не отображаются

Разрыв страницы начальной загрузки. Панель навигации и элементы страницы не отображаются

#jquery #html #twitter-bootstrap #twitter-bootstrap-3 #sinatra

#jquery #HTML #twitter-bootstrap #twitter-bootstrap-3 #синатра

Вопрос:

Пытаюсь настроить полностью базовую страницу начальной загрузки. Основная цель — это функционирующая панель навигации начальной загрузки с выпадающим меню. Однако начальная загрузка не загружается, панель навигации и jumbotron отображаются некорректно. Chrome и Firefox не предоставляют никаких сообщений об ошибках. bootstrap.css, bootstrap.js и jquery-3.1.1.js все они находятся в состояниях по умолчанию в локальных папках. Я не могу понять, почему элементы страницы не загружаются.

Редактировать: комментатор ниже указал, что я использовал старую версию bootstrap. Макет был исправлен, но анимация выпадающего меню панели навигации не запускается.

У меня есть «общедоступная» папка, которая действует как папка «активы». По умолчанию используется Sinatra со следующими папками.

 ├── public
│   ├── images
│   ├── js
│   │   ├── bootstrap.js
│   │   └── jquery-3.1.1.js
│   └── stylesheets
│       └── bootstrap.css  

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>NY Freegan Forum</title>
    <link href="/stylesheets/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <a class="navbar-brand" href="/">NY Freegan Forum</a>
    
        <ul class="nav navbar-nav navbar-right">
         <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">joelbitar1986<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="/users/joelbitar1986">Profile</a></li>
              <li><a href="/reports/new">New Report</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="/logout">Logout</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>

  <div class="jumbotron vert-offset-top-13">
    <div class="container">
      <h1>Jumbotron Title</h1>
      <p>website information</p>
      <br><br>
    </div>
  </div>

    <script src="/js/jquery-3.1.1.js"></script>
    <script src="/js/bootstrap.js"></script>
  </body>
</html>

Ссылка на репозиторий Github: https://github.com/joelbitar1986/ny-freegan-forum
Запустите shotgun , чтобы просмотреть страницу на локальном хосте

Комментарии:

1. Похоже, что скрипты загружаются правильно. Тем не менее, вы загружаете версию начальной загрузки 2.3.2. Возможно, вы захотите проверить, есть ли у них класс navbar-brand и т.д. в этой версии.

2. @StephenC Это действительно была проблема! Не уверен, почему, черт возьми, у меня там была старая версия bootstrap. Спасибо за эту помощь. По какой-то причине выпадающие меню не работают, хотя это указывает на то, что jquery не загружается

Ответ №1:

Если вы используете правильную версию bootstrap, она будет работать.

Одна вещь, которую вы должны сделать, это просмотреть исходный код страницы. Вы увидите, действительно ли загружаются скрипты.

 <!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <a class="navbar-brand" href="/">NY Freegan Forum</a>
    
    <ul class="nav navbar-nav navbar-right">
     <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">joelbitar1986<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="/users/joelbitar1986">Profile</a></li>
        <li><a href="/reports/new">New Report</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="/logout">Logout</a></li>
      </ul>
    </li>
  </ul>
</div>
</nav>

<div class="jumbotron vert-offset-top-13">
  <div class="container">
    <h1>Jumbotron Title</h1>
    <p>website information</p>
    <br><br>
  </div>
</div>
    
    
    
    <script   src="http://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

Комментарии:

1. По какой-то причине это работает, когда я включаю: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> Предоставленный вами код не сработал для меня. Кроме того, локальная jquery.js файл не работает

Ответ №2:

Ответ: Я использовал старую версию bootstrap.