twitter-bootstrap BootStrap Navbar-Toggle 在 asp.net 中使用 Visual Studio 2010 不起作用

BootStrap Navbar-Toggle Not Working In asp.net Using Visual Studio 2010

提问by Afnan Ahmad

I have installed nuget package then I installed bootstrap. Now I have folders

我已经安装了 nuget 包，然后我安装了引导程序。现在我有文件夹

Contents
 containing bootstrap css files 
Scripts 
 containing .js files 

In header of Master Page I have included it like this

在母版页的标题中，我已将其包含在内

<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-1.9.1.js"></script>

Then I tried to make nav like

然后我试着让导航像

<div class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 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="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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 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 class="active"><a href="./">Default</a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li><a href="../navbar-fixed-top/">Fixed top</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>

But error is attribute data toggle is not a valid attribute of button. How can I get this to work in asp.net??? Please guide me .. Thank you

但错误是属性数据切换不是按钮的有效属性。我怎样才能让它在 asp.net 中工作？？？请指导我..谢谢

回答by dotnethaggis

I'm pretty sure you need to reference jQuery before Bootstrap like so.

我很确定您需要像这样在 Bootstrap 之前引用 jQuery。

<script type="text/javascript" src="~/Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>

UPDATE 2

更新 2

The problem is with your script reference. Remove the "~". When directly in a script element the page doesn't understand "~".

问题在于您的脚本参考。删除“~”。当直接在脚本元素中时，页面不理解“~”。

The ~ refers to the root of the project understood by c# code. Not html elements.

~ 指的是 C# 代码理解的项目的根。不是 html 元素。

So it should be:

所以应该是：

 <script type="text/javascript" src="/Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>

UPDATE

更新

You are referencing both the minified version of bootstrap.js and the full version. Remove the:

您正在引用 bootstrap.js 的缩小版本和完整版本。除掉：

    <script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>

I wonder if they are conflicting.

我想知道他们是否有冲突。