Refer to this website design article I wrote which explains more about Twitter Bootstrap.
Several years ago, some Twitter engineers undertook the ambitious task of writing a scaffolding and componentry library from which virtually any website could be created or, as it were, re-created. Sure, at the outset, most Twitter Bootstrap based websites would look similar to one another, but with enough customization, websites could indeed take on very unique looks. Twitter Bootstrap is now on version 3.0.0, a far cry from the initial releases which, though simpler, had appeal for the very reason that the framework and coding was simple.
Here is how Twitter Bootstrap works. You download a few CSS files, a few JS files, reference one of the ultra-basic starter templates, and then you're off and running creating a website. The idea is that you do not modify a single character in the core CSS and JS files, but you can overlay that code and those defintions as you need to. Generally, a developer also needs to download or point to some other JS codebases, such jquery, but like Twitter Bootstrap, these are all to be considered "locked down" and only need to be included.
The Twitter Bootstrap scaffolding grid is 12 columns wide. In earlier versions, such as 2.3.2 and before, there was a distinction between fluid and non-fluid layouts. That means you could choose for your design and code to be responsive (fluid) to different devices (desktop, tablet, mobile) or to be "fixed" per your sizing. However, I think that most people will agree that the major point of Twitter Bootstrap, and the reason so many people flock to it, is because it is responsive in nature. So with version 3.0.0, there is only the responsive coding. In practical terms, what this means is that Twitter Bootstrap 3.0.0 consists of only one CSS file!
Want a brief peek at code? In Twitter Bootstrap 2.3.2, content was laid out using spanX classes, such as:
<div class="container"> <div class="row-fluid"> <div class="span4"> I'm 33% of the page, because span4 is 1/3 of a span12 </div> <div class="span8"> I'm 67% of the page, because span8 is 2/3 of a span12 </div> </div> </div>The new Twitter Bootstrap 3.0.0 makes things a bit more complicated, and unfortunately does not provide backwards compatability. But it does provide for more control on how pages are rendered on a per-device basis. The code from above now looks roughly like this:
<div class="container"> <div class="row-fluid"> <div class="col-lg-4"> I'm 33% of the page, because col-lg-4 is 1/3 of a col-lg-12 </div> <div class="col-lg-8"> I'm 67% of the page, because col-lg-8 is 2/3 of a col-lg-12 </div> </div> </div>
I am currently only building Twitter Bootstrap sites. Though I certainly know the ins and outs of HTML, CSS, JS and how to make pages sing with speed and beauty, I would prefer to continue to leverage the many advantages of Twitter Bootstrap. It means that from one project to the next, I am able to take advantage of past visited coding topics and past written code, and I'm able to work quickly and efficiently. Plus, I feel that Twitter Bootstrap websites looks great, and it takes a heckuva whole lot less time to test on different devices than it would otherwise.