CODEWITHSUNDEEP
twitter-bootstrap
nodrog
nodrog

Reputation: 3532

Twitter Bootstrap 2, collapse-nav

With Twitter Bootstrap 2, how do get links working within collapse-nav:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="/index.html">Hubsphere - Controller</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="">
            <a href="./index.html">Overview</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

i have jquery included, and the bootstrap-collapse.js file.

I have tried calling $('.nav-collapse').collapse() but this just opens the collapse area and dose not activate the button. which is what i expected as it should just work with markup.

thanks

Upvotes: 21

Views: 34856

Answers (4)

Fowowski
Fowowski

Reputation: 132

Either you include full bootstrap jquery library (which stores all js to all plugins) or you include single library.

So for ex: if you want to use tooltips you can:

  • include: js/bootstrap.js (contains all plugins)

or

  • include: bootstrap/js/bootstrap-tooltip.js

the second method is better because you dont load to a browser things that wont be used!

Use the LESS version from github or compile your own through the bootstrap website custom compiler, never use the default!

Upvotes: 0

baptme
baptme

Reputation: 10092

I was a bit curious to see if this problem still occurs with bootstrap 2.0.4

In fact, it makes no sense to include both bootstrap.js and bootstrap-collapse.js since bootstrap.js includes bootstrap-collapse.js

only boostrap-collapse.js http://jsfiddle.net/baptme/YWUmb/6/

It works pefectly fine as expected.

both boostrap.js & boostrap-collapse.js: http://jsfiddle.net/baptme/YWUmb/5/

If you click on the collapse button for the first time, the div opens and closes immediately. (I think it's because the plugin is declared twice).

And then it works ok.

This issue is specific to the early version of twitter boostrap (2.0.0) but it has been dealt with or no longer occuring due to a change in the plugin structure.

Upvotes: 11

nodrog
nodrog

Reputation: 3532

Ok so my problem was that i was including bootstrap.js and the bootstrap-collapse.js in the same file, i assumed that bootstrap.js was needed, and then when it did not work i included bootstrap-collapse.js.

It is now obvious to me, but bootstrap.js is all the bootstrap js rolled up. Which is nice...

Upvotes: 11

Bryan
Bryan

Reputation: 3280

There is another case where the bootstrap.css file is required AFTER the bootstrap-responsive.css. That will also cause the button to not appear. Make sure to require the bootstrap.css first BEFORE the bootstrap-responsive.css.

Upvotes: 3

Related Questions