Twitter Bootstrap test environment

Question

I'm going to be making changes to Twitter Boostrap to generate my own theme and would like some kind of cheat sheet that shows the results from tweaking the styles and CSS.

Ideally maybe a single web page with all the Twitter Boostrap elements in it would be great instead of the Bootstrap documentation which has them spread out.

Even better would be a page with annotations on the various elements to show the result of your changes to the variables.less file.

Does anyone know of any resources that I should look at? Thanks in advance.

Answer 1

I created Bootply exactly for this purpose. Bootply is a "jsfiddle" style app that lets you edit Bootstrap friendly HTML, JS and CSS. It includes Bootstrap and jQuery for you, and there are also Bootstrap snippets that you can select from the toolbar and paste into the editor. Just click 'Run' to see your results.

Bootply features

• Toolbar with all Bootstrap CSS, Components, and Javascript
• Name, tag and share working Bootstrap examples
• Preview in full screen or mobile/responsive
• Include FontAwesome, jQueryUI and other Bootstrap-ready extensions
• Test different Bootstrap versions

http://www.bootply.com

Also, this test page is useful for seeing all of the available elements at once.