Daniemon
The more I use Twitter Bootstrap, the more I like it. The only thing that puts me off is needing jQuery for a few simple interactions such as hiding and displaying elements. jQuery’s an excellent library but if a site doesn’t make full use of it, it can be overkill, adding unnecessary bytes to your pages. As a replacement, I tried to make a lightweight alternative script specifically for Bootstrap.
To use the script just put it in your pages, preferably at the bottom, instead of jQuery and the Bootstrap plugin scripts, like so:
...
<script src="bootstrap-without-jquery.min.js"></script>
</body>
</html>The benefit is better performance thanks to faster page load times. It obviously doesn’t do everything that jQuery and the Bootstrap plugins do but it should be enough if you just want:
- working dropdown menus;
- dismissable alert boxes;
- a collapsible navigation menu triggered by the “hamburger” button.
I tested it on several mobile and desktop browsers, including IE 8, but I’d appreciate further reports of where it does or doesn’t work. There may also be other Bootstrap components that require JavaScript so I can add support for those if there’s demand (or you can send a pull request). The GitHub page is here along with more details of browser support: github.com/tagawa/bootstrap-without-jquery
I’ve also prepared a simple Bootstrap demo page for testing. As always, feedback is welcome!
Update:
There’s also a good resource encouraging developers to use plain JavaScript where jQuery may not be necessary, with JavaScript code snippets that correspond to jQuery methods: YouMightNotNeedjQuery.com
The thing that bothers me about Bootstrap is loading so much library for a few simple things, as well, so thank you very much for this jQuery-less version of Bootstrap. Performance is a big issue on websites in general today, as I see you have noticed.
Thanks John. It doesn’t have perfect coverage for what jQuery provides but I hope it helps in certain use cases.
Pingback: Bruce Lawson’s personal site : Reading List
Great!! I really love every new light and fresh enhancement and idea. You are right. If we don’t need jQuery here, it’s only overhead.
Will this work with Bootstrap 3?
Good question. I haven’t look at Bootstrap 3 but I think class names, etc. have changed so this script probably won’t work.
Already works with Bootstrap 3?
Hi Marcius,
I haven’t tried it but I don’t think so, unfortunately. I haven’t had time to look into an updated version for Bootstrap 3 yet – hopefully soon.
How much is this service?
Hi again,
My script is free and open source (click on the Download link above), just like Bootstrap itself.
I know. I want to pay for upgraded service to bootstrap 3. Your script is still free.
ps: Sorry for my poor english. I am Brazilian.
Hi, Do you have any plans to create a fix for the latest version of Bootstrap?
Hi Lee,
Sorry but I don’t really have the time at the moment. I’d like to update the script at some point, unless somebody else can do it and send me a pull request.
Geat, Gracias por el aporte!
Pingback: JQuery – only when required :D « mon "Blog Note" partagé :-)
Hi,
I made a quick dropdown menu test with Firefox 36:
Used https://tagawa.github.io/bootstrap-without-jquery/bootstrap2/demo/ as src and replaced the css, js urls and href “#” with http://google.com.
The dropdown opens but won’t follow the url.
Thanks very much for reporting this.
I’ve filed it as an issue: https://github.com/tagawa/bootstrap-without-jquery/issues/40
Hi,
did a test with 0.3.1 and the old version works with firefox 36.
This is superb! Just what I need! Thanks for the work!
Thanks a lot for this script. I had a compatibility issue between Spip and Bootstrap.
Good idea. I had been thinking about stripping out bootstrap just for structural use. I believe using as much pure CSS elements as possible. My biggest quirk is that BS JS conflict too much with other js oriented elements whether they are bootstrap or not.
Will you be doing this with Bootstrap 4?