Intro to Twitter Bootstrap

Taking a break from the Lime JS game front, I decided to take a step into another framework I’ve been using named Twitter Bootstrap.  I’ve been reading about responsive web design for some time.  The idea is that a developer can develop one common web site that can fit within a variety of viewport sizes (such as a desktop PC, tablet, or smart phone).  The theory is rather than defining multiple web sites, one web site for desktops and one for mobile devices, applications can use CSS 3 media queries and transform the web site depending on the current viewport size.  A phone can have a site styled at 480px, but the same site can also be styled for a desktop PC with a resolution at 1200px.  When you design a site, it’s certainly possible to use CSS 3 media queries to style a site.  There are plenty of examples that can be found on various web sites, one of which was here: http://mediaqueri.es/.

Rather than handling the responsive web design aspects yourself, the Twitter Bootstrap framework  handles the responsive web design using a 12 column grid.  A page is devised of rows, each row containing up to 12 columns.  Rows and columns are defined using CSS classes “row” and “spanX” classes (such as span1, span6, or span12).

The following is a sample page using the container, row, and span classes.  It uses a two column layout for the first row, followed by a 4 column layout for the second row.

<div class=”container”>
<div class=”clearfix row”>
<div class=”span6″ style=”height:150px;background-color:lightblue”>
This is some content
</div>
<div class=”span6″ style=”height:150px;background-color:lightyellow”>
This is some content
</div>

</div>
<div class=”clearfix row”>

<div class=”span3″ style=”height:100px;background-color:orange”>
This is some content
</div>
<div class=”span3″ style=”height:100px;background-color:pink”>
This is some content
</div>
<div class=”span3″ style=”height:100px;background-color:lightgreen”>
This is some content
</div>
<div class=”span3″ style=”height:100px;background-color:gray”>
This is some content
</div>

</div>
</div>

It’s very simple; twitter bootstrap controls the width of the page using the span6 and span3 classes, making a grand total of 12 columns for each row.  Each row is identified by a div, with a row class, which all rows for a region of the  page must fit within a container.  Twitter Bootstrap uses stylesheets and media queries to adjust the UI depending on the viewport.   For instance, for a larger view, like a desktop or tablet, the next image shows how this page is laid out on the screen.


Wide View of Twitter Bootstrap Layout

However, when the browser is constrained (like a smart phone browser or smaller tablet), the view changes to illustrate the following.


Wide View of Twitter Bootstrap Layout

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s