Comments (16)
Yep -- Bootstrap is intended to only be a css lib for now. It's should be pretty easy to get that stuff going however. For the dropdown you just need to toggle the "open" class on the menu's li.
from bootstrap.
OK, here is the code that is used in the example page -- it's a bit more involved than just toggling the "open" class and I still think that some better examples of good implementation practices should be included. I understand that this is just a CSS framework, but it'd be nice to have some samples of things you can do with it in the github repo to help out those just getting started.
// Dropdown example for topbar nav
// ===============================
$("body").bind("click", function(e) {
$("ul.menu-dropdown").hide();
$('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide();
});
$("a.menu").click(function(e) {
var $target = $(this);
var $parent = $target.parent("li");
var $siblings = $target.siblings("ul.menu-dropdown");
var $parentSiblings = $parent.siblings("li");
if ($parent.hasClass("open")) {
$parent.removeClass("open");
$siblings.hide();
} else {
$parent.addClass("open");
$siblings.show();
}
$parentSiblings.children("ul.menu-dropdown").hide();
$parentSiblings.removeClass("open");
return false;
});
from bootstrap.
Nope that's the old code -- i simplified it a great deal, it can be found on our dev branch here: https://github.com/twitter/bootstrap/blob/misc_css_fixes/docs/assets/js/application.js#L42
I here ya on the examples though. I'll try to whip up some more examples this week.
from bootstrap.
my fix to get drop down working ... was not obvious but this thread helped
link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.0.0.min.css" />
script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
script src="http://twitter.github.com/bootstrap/assets/js/application.js"></script>
from bootstrap.
Thanks! I'd contribute some examples, but I belong nowhere near production-ready JS :) See also: Issue 14: Actual detailed documentation
from bootstrap.
active menu item highlight when using bookmarks on same page will require javascript as well, but would not need javascript if the menu items are separate pages
from bootstrap.
I'll contribute to some examples too @ip2k :)
For example contributions, do we have to send pull requests to you (@fat) or just state them in issues as references to more?
from bootstrap.
Either way -- we have an examples directory now, so depending on the example it might make more sense in there or as something listed out in a wiki of sorts -- something we need to consider starting in the next few days.
from bootstrap.
since the main howto / example is using some JS (drop down and stuff) I totally vote for at least a link to the application.js file inside the howto / example. Even if it does seem obvious, I think it'd be easier to understand for new comers that some stuff doesn't just happen from the provided css.
Wiki could also be a place for that.
from bootstrap.
Any example on how to use the lightbox style will be good. best if i can use it off the shelf.
from bootstrap.
If you want to use the lightbox as a jQuery plugin, check out http://nikku.github.com/jquery-bootstrap-scripting/.
from bootstrap.
Going to close this—we've got some mad JS added to 1.3-wip.
from bootstrap.
would be good to add a link to that "mad js" from here for future people stumbling upon the issue imho. can you ? please ?
from bootstrap.
Here's a link to some of the plugin's we're working on: https://github.com/twitter/bootstrap/tree/1.3-wip/docs/assets/js
None of which are final by any means.
If you're want more info, i recommend checking out the 1.3-wip branch (git checkout -b 1.3-wip origin/1.3-wip
) and then opening ./docs/javascript.html
from bootstrap.
thanks, this is great.
from bootstrap.
I use http://www.zurb.com/playground/reveal-modal-plugin with bootstrap, the integration is very easy, you only need some minor changes in the modal class.
from bootstrap.
Related Issues (20)
- when clicking in a code sample box it scrolls all the way to the bottom of web page HOT 3
- Uncompiled version of RTL SCSS for customizing Bootstrap
- Adding z-index: 1 to main area causes an active modal to sit behind its backdrop HOT 2
- Automatically scroll when copying code example HOT 1
- Confusing description of spacing utilities notation
- Form validation with input group not changing input-group-text border color HOT 2
- Trying to copy code from the docs forces the page to scroll to the bottom HOT 1
- Update input groups to use `:has()` selector to style addons with form validations
- Bugs inside "Cover Template" and "Product Template" HOT 1
- Regarding the inlcusion of sidenavbar.
- npm install [email protected] Not working
- Copying issue in breakpoints section => max with code window HOT 2
- Search Button not responding HOT 1
- Add class for change hover color variants on a buttons and Links HOT 1
- When i copy the code manually it redirects to bottom page HOT 1
- focus-ring is not displayed on a button applied shadow class HOT 2
- Selecting / Scroll issue in Documentation HOT 2
- `npm install` hangs on Windows 11, clean node install HOT 1
- Search Button HOT 1
- Website documentation. Code blocks and Apple trackpad scrolling issue HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap.