How does Twitter Bootstrap collapsing work?

Question

So I've been toying around with the Twitter Bootstrap website, and I'm intrigued by how the top navigation bar collapses into a different layout when you shrink the browser window.

This is what it looks like expanded:

And this is what it looks like when collapsed:

How is it doing this?

Answer 1

It does the changes by media queries. CSS3 allows media dependent style-sheet by media (viewport?) and detect things such as width/height

More reading on media query: https://developer.mozilla.org/en/CSS/Media_queries I had a glance to their css, but u can get a hint at the page css source: bootstrap-responsive.css

I believe bootstrap promotes responsive design with their toolkit as well. Hope this helps.