1. дома
  2. Вопрос и ответ
  3. Проблема с Bootstraps Navbar, не открывается

Проблема с Bootstraps Navbar, не открывается

2017-01-02 10 views
0

В основном моя проблема заключается в том, что я не могу открыть навигационную панель, если она рухнула (маленькое окно) и не может распознать ошибку.Проблема с Bootstraps Navbar, не открывается

Что я хочу это http://getbootstrap.com/examples/navbar-fixed-top/

<!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"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="../../favicon.ico"> 

    <title>Fixed Top Navbar Example for Bootstrap</title> 

    <!-- Bootstrap core CSS --> 
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> 

    <!-- Custom styles for this template --> 
    <link href="navbar-fixed-top.css" rel="stylesheet"> 

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 

    <body> 

    <!-- Fixed navbar --> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li role="separator" class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="../navbar/">Default</a></li> 
      <li><a href="../navbar-static-top/">Static top</a></li> 
      <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav> 

    <div class="container"> 

     <!-- Main component for a primary marketing message or call to action --> 
     <div class="jumbotron"> 
     <h1>Navbar example</h1> 
     <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> 
     <p>To see the difference between static and fixed top navbars, just scroll.</p> 
     <p> 
      <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a> 
     </p> 
     </div> 

    </div> <!-- /container --> 


    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
    <script src="../../dist/js/bootstrap.min.js"></script> 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> 
    </body> 
</html>

Но независимо от того, что я стараюсь не работать на моей странице http://myschooldesk.de/index.php?id=5#

<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="utf-8"> 
<!-- 
    This website is powered by TYPO3 - inspiring people to share! 
    TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL. 
    TYPO3 is copyright 1998-2016 of Kasper Skaarhoj. Extensions are copyright of their respective owners. 
    Information and contribution at http://typo3.org/ 
--> 



<title>TITE: Home</title> 
<meta name="generator" content="TYPO3 CMS"> 


<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_a490dd7cbb.css?1483100214" media="all"> 
<link rel="stylesheet" type="text/css" href="typo3conf/ext/myschooldesk_dis/Resources/Public/Bootstrap/css/bootstrap.min.css?1483097509" media="all"> 
<link rel="stylesheet" type="text/css" href="typo3conf/ext/myschooldesk_dis/Resources/Public/Bootstrap/css/bootstrap-theme.min.css?1483097509" media="all"> 
<link rel="stylesheet" type="text/css" href="typo3conf/ext/myschooldesk_dis/Resources/Public/Css/basicLayout.css?1483313684" media="all"> 


<script src="uploads/tx_t3jquery/jquery-1.8.x-1.9.x.js?1483135375" type="text/javascript"></script> 
<script src="typo3conf/ext/myschooldesk_dis/Resources/Public/Bootstrap/js/bootstrap.min.js?1483097509" type="text/javascript"></script> 



</head> 
<body> 



    <!-- Fixed navbar --> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 0.8px;"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li role="separator" class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="../navbar/">Default</a></li> 
      <li><a href="../navbar-static-top/">Static top</a></li> 
      <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav> 

    <div class="container"> 

     <!-- Main component for a primary marketing message or call to action --> 
     <div class="jumbotron"> 
     <h1>Navbar example</h1> 
     <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> 
     <p>To see the difference between static and fixed top navbars, just scroll.</p> 
     <p> 
      <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a> 
     </p> 
     </div> 

    </div> <!-- /container --> 


    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> 




</body> 
</html>

Actualy У меня такая же проблема с ниспадающего Menue и это может быть связано. На Serverside я использую Typo 3 6.2, что ограничивает меня чуть-чуть копированием everithing, насколько я знаю. Это может быть проблема с версией, или я что-то переусердствовал.

До сих пор я ckecked:

  • Все импорт является одинаковым или не имеет значения в этом контексте
  • I судимого diffrent браузерами
  • Restart
  • очистив кэш и шахтный и опечатки 3's

Я новичок в переполнении стека и старался изо всех сил, если я все еще пропустил что-либо не стесняйтесь спрашивать.

Спасибо всем. :)

источник

2017-01-02 Xanlantos

+1

Пожалуйста, прочтите [Что-то на моем веб-сайте не работает. Могу ли я просто вставить ссылку на него?] (Http://meta.stackoverflow.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link -в-она). Вопросы, зависящие от внешних ресурсов, которые нужно понимать, становятся бесполезными, когда внешний ресурс уходит или фиксируется. Вместо этого создайте [MCVE]. – Quentin

+0

Должно быть лучше сейчас, я попытался скопировать как можно больше из бутстрапа, так как там он работает. что печально производит немного больше кода, но его актуальность не сложная, я думаю, кроме вас, вы не понимаете всего ... как я. – Xanlantos

ответ

0

У вас есть яваскрипт ошибки на странице:

Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4

Чтобы исправить это, вы должны использовать JQuery версию 1.9.1 или выше. Или просто используйте CDN:

<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> 
<script src="./TITE_ Home_files/bootstrap.min.js.download" type="text/javascript"></script>

источник

2017-01-02 00:45:59 Mifort

+1

Спасибо, что я понял ist 0t – Xanlantos

+0

Отлично! без проблем :) – Mifort

0

Для использования бутстрапа Javascript вам нужно jQuery. Включите эту строку кода перед загрузкой в ​​вашем Bootstrap:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Ваш HTML <head> раздел должен выглядеть следующим образом:

<head> 

<meta charset="utf-8"> 
<!-- 
    This website is powered by TYPO3 - inspiring people to share! 
    TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL. 
    TYPO3 is copyright 1998-2016 of Kasper Skaarhoj. Extensions are copyright of their respective owners. 
    Information and contribution at http://typo3.org/ 
--> 



<title>TITE: Home</title> 
<meta name="generator" content="TYPO3 CMS"> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!-- This was changed --> 
<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_a490dd7cbb.css?1483100214" media="all"> 
<link rel="stylesheet" type="text/css" href="typo3conf/ext/myschooldesk_dis/Resources/Public/Bootstrap/css/bootstrap.min.css?1483097509" media="all"> 
<link rel="stylesheet" type="text/css" href="typo3conf/ext/myschooldesk_dis/Resources/Public/Bootstrap/css/bootstrap-theme.min.css?1483097509" media="all"> 
<link rel="stylesheet" type="text/css" href="typo3conf/ext/myschooldesk_dis/Resources/Public/Css/basicLayout.css?1483313684" media="all"> 


<script src="uploads/tx_t3jquery/jquery-1.8.x-1.9.x.js?1483135375" type="text/javascript"></script> 
<script src="typo3conf/ext/myschooldesk_dis/Resources/Public/Bootstrap/js/bootstrap.min.js?1483097509" type="text/javascript"></script> 



</head>

источник

2017-01-02 00:48:08 bugfroggy

+0

, который работал красиво, я понял, что будет делать то же самое – Xanlantos

 Смежные вопросы

  • Нет связанных вопросов^_^