Use Twitter Bootstrap for Powerful Web Design

By Posted 2013 Updated   BloggingTwitterWordPress

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.

Just add a few lines of CSS, JavaScript code, upload  few files on your server – Bootstrap lets you take your site to new levels of interactivity and design, Get the design elements for your website, which you observed in awe on some top websites till now. Bootstrap will let you get the same features for your website in minutes.

bootstrap

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.

12 grid columns

You can use the Bootstrap Responsive test to see how the site looks on different screen sizes.

CDN support  

Its a good idea to host jQuery from Google libraries to get excellent speed.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

You can download and host the other bootstrap CSS/JS scripts from your CDN for faster delivery or get them hosted at BoostrapCDN for free. This makes the code just cut and paste to your website.  These are minimized javascript and CSS files for smaller size and faster loading.

<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.

Sharp Icons

glyphicons halflings

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.
<i class="icon-star"></i>

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.


7 comments on “Use Twitter Bootstrap for Powerful Web Design

  1. adeelqamar says:

    Nice review of Boost strap. Seems interesting. I will give it a try over my blog.

  2. Adele W. Roach says:

    Because I like to work with responsive designs, the main reason why I wouldn’t use them is because I prefer to design each responsive step “separately” and as a whole. And these templates usually work with a more or less rigid grid that you can’t fully tweak.

  3. pachy says:

    i downloaded the bootstrap but how to install kindly let me know

  4. Jake says:

    Great explanation of bootstrap program, Thanks for sharing!

  5. Animesh Roy says:

    Thanks for giving insights on Bootstrap.
    I should definitely use it on my next custom web design project.

  6. spookseo says:

    Bootstraps could really be the next big thing. Twitter do not have a lot of things to do with its advertisements because it basically looks like a one-way website. Also, it cannot get so much detail into it because they might just think it is copying from other social networking sites.

Leave a Reply

Your email address will not be published. Required fields are marked *




Next Article »
css.php