QOT is now powered by Twitter Bootstrap, a powerful front-end framework for powerful web design, and speedier web development. Bootstrap is made by Twitter to do some cool stuff with your website. You need to try out Bootstrap to see why so many websites are switching over to it.
It is powered by LESS CSS, is compiled via Node, and is actively developed by dedicated Github developer community. Don’t let the technical stuff confuse you as it is easy to implement by any webmaster quickly. Over the past few days, we also tweaked our site design to incorporate the power of Bootstrap.
Setup in Twitter Bootstrap Minutes
You just need to add 2 CSS files – bootstrap CSS and another responsive design CSS file (which they are merging in the next version 3.0). Then you need to add jQuery scripts and Bootstrap JS. The site provides excellent tutorials to get beautiful design elements and get superior responsive design with as many as 12 grid columns! Using a custom CSS file, you can tweak your site design further. You can also download a custom Bootstrap CSS after selecting values for key CSS selectors. The amazing flexibility and support for modern standards is great.
You can use the Bootstrap Responsive test to see how the site looks on different screen sizes.
Its a good idea to host jQuery from Google libraries to get excellent speed.
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Power of jQuery
Its not only about how quickly you can add beautiful buttons, forms, or other CSS3 effects which you can see on our site – its also about the power of jQuery plugins like Collapsible menus (see our comments), pop out modals, dropdown menus (see our navigation), roll over navigation, carousels, affixing nav menu to top/bottom of screen and much more.
Another amazing feature is Glyphicons – they have a tie up to host a CSS sprite image of Glyphicon halflings (a paid icon collection, available for free in Bootstrap) – this allows you to insert 160 icons any where in your document, with a simple line of code, without any messy CSS codes and CSS sprite creation.
This code inserts a star wherever you want.
Since the image loads once, you can insert one or all the 160 icons on every page if you like, without slowing the site! Why does our site have so many icons everywhere – you know why.
As Bootstrap is getting popular – there are hundred of free Bootstrap Themes available, and many developers are combining the HTML5 designs with Bootstrap to create exceptional websites. Download Bootstrap today.
Update: You can use Font Awesome and get a more superior icon experience for your site
Update: Use Bootstrap on any site and load Bootstrap themes faster.