Question

我刚刚开始学习bootstrap，我正在按照＆＃34; Joy of bootstrap book＆＃34;我有一个响应式导航栏的源代码，出于某种原因（我编写的代码完全正确，一遍又一遍地检查）当您在移动模式下单击按钮时，没有任何反应。我想知道这个旧代码（2014-15）不起作用的引导程序有什么变化吗？

＆＃13;

aws ec2 describe-instances --instance-ids --query Reservations[].Instances[].PrivateIpAddress

＆＃13;

Answer 1

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

在这一行你应该删除超过“＆gt;”在开头，src是标记脚本的属性，因此您必须将其放在菱形括号内。使用上面的代码，不会导入jquery库。

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

Answer 2

脚本标签语法错误。

第一个脚本：

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

第二个脚本：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

您使用了链接标记，用于将样式表（css）链接到html。链接有一个'href'，脚本标签有一个'src'。

Answer 3

导入带有link rel="stylesheet"元素的bootstrap.js，替换为<script src=

Answer 4

您有拼写错误：请参阅Docs

<button type="button" class="navbar-toggle" data-toggle="colapse" data-target=".navbar-collapse">

colapse应为collapse，并且可能还应添加collapsed类。

工作示例：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<noscript>Please enable JavaScript in your browser</noscript>

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <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="#">Bridgman IBC</a>

    </div>

    <div 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="#Specifying">Specifying</a>
        </li>
        <li><a href="#MarketSectors">Market Sectors</a>
        </li>
        <li><a href="#EtradingEcomerce">E-trading / E-commerce</a>
        </li>
      </ul>
    </div>

  </div>
</div>
<div class="container">
  <footer>&copy;2016</footer>
</div>

＆＃13;

Bootstrap导航栏坏了

4 个答案: