Меню Boostrap mobile не открывается, как ожидалось

Я прочитал сообщения по этому и видео, но я не уверен, что я делаю неправильно. Меню в мобильном режиме не открывается. Я посмотрел на другие примеры, но не вижу, что я делаю неправильно.Меню Boostrap mobile не открывается, как ожидалось

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

 
<head> 
 
\t <meta charset="utf-8"> 
 
    <title>Holla Mohalla - The Forgotten Festival Documentary</title> 
 
    <meta name="description" content="Holla Mohallah"> 
 
    <!-- Latest compiled and minified CSS --> 
 
    
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
 

 
\t <!-- Optional theme --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 
 
    </head> 
 
    
 
    <body> 
 
    
 
    
 
    <!--Navbar --> 
 
    <nav class="navbar navbar-default navbar-fixed-top" id="my-navbar"> 
 
    \t <div class="container"> 
 
     \t <div class="navbar-header"> 
 
      \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span>         
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       </button> 
 
       
 
       <a href="" class="navbar-brand">Hola Mohalla - The Forgotten Documentary</a>    
 
     \t \t </div> 
 
     \t <div class="collapse navbar-collapse" id="navbar-collapse"> 
 
     \t \t <ul class="nav navbar-nav"> 
 
     \t \t \t <li> <a href="#link 1">link 1</a></li> 
 
      \t \t \t <li> <a href="#link 2">link 2</a></li> 
 
      \t \t \t <li> <a href="#link 3">link 3</a></li> 
 
      \t \t \t <li> <a href="#link 4">link 4</a></li> 
 
      
 
     \t \t </ul> 
 
      \t </div> 
 
      </div> 
 
      
 
     
 
    </nav> 
 
    
 
    
 
    
 
    <!-- Copied from jquery --> 
 
<script src="http://code.jquery.com/jquery-2.1.3.min.js"</script>  
 
    <!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 

 
    
 
    </body> 
 
    
 
    </html>

</body> 

</html>

источник

2015-03-01 Tim Mottram

добавить свой jquery.js или jquery.min, Js –

Спасибо, вы имеете в виду в заголовке? Извините первый раз, используя bootstrap –

см. Мой ответ. : p –

Вы пропустили: jquery.min.js & bootstrap.min.js

ссылка здесь:

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

так, как ссылки по умолчанию , вам понадобятся три ссылки:

bootstrap.min.css
jquery.min.js
bootstrap.min.js

вы можете разместить нет. 2,3. выше </body> получить загрузку быстрее, а не внутри тега </head>

Это следует лучше для практики:

Обновлено:

<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.js"> 
</head> 
<body> 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" rel="home" href="#">Brand</a> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div style="height: 1px;" aria-expanded="false" class="navbar-collapse collapse"> 
.............. 

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

источник

2015-03-01 21:23:25

Меню Boostrap mobile не открывается, как ожидалось

ответ

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