Other Layout Features of Twitter Bootstrap

Twitter bootstraps supports other layout mechanisms.  If you need to inject additional space between columns, the offset class can be used to accomplish this.  An offset injects an empty space equal to a designation of a column’s width between content.  The following is omitting one of the 3-column spans we saw in our previous article example.

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

Sometimes you need hierarchies of rows within a layout, and this is perfectly acceptable.  To do this, add another row within a span.  Take a look at the following example:

<div class=”clearfix row”>
<div class=”span12″ style=”background-color:lightgreen”>
This is the parent content

<div class=”row”>
<div class=”span6″ style=”height:100px;background-color:navy;color:white;”>
This is some nested content
</div>
<div class=”span6″ style=”height:100px;background-color:navy;color:white;”>
This is some nested content
</div>
</div>

</div>
</div>

From within the 12  column span, we have another row with two 6 column spans, each taking up the full width of space.  The inner content will wrap within the outer content when the viewport is constrainted; the layout hierarchy is preserved even when  constrainted to a 480px width.  Be advised here that spanned content is cumulative; this means that if the main row had a span 10 instead, each of the nested content regions would require a span5 class designation.  Otherwise, the inner regions would overlap the outer region.

Lastly, if you want to show or hide content, depending on what type of browser you are in, this can be adjusted accordingly.  The following styles applied to an element will show or hide the element depending on whether the viewport size is designed for a phone, a tablet, or a desktop browser.

.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop

Applying the hidden-phone class to an element will hide it when the browser is constrainted to a 480px width; however, as the width grows, the element becomes visible when determined to be the size of a tablet or greater.   As a for instance, on one project, it was great to use the hidden-phone class to hide a rather large header image from appearing, which would take up too much space on such a small viewport.  I could then display a more meaningful header with the visible-phone class.

Note an important distinction here; by using these class classes, you are essentially saying that the framework shows and hides content.  This means the content still downloads to the client; it just gets hidden immediately.  This means more HTML may be downloaded than expected, since a server-side solution would only render the HTML necessary for the appropriate view.

Since twitter bootstrap is a client-side framework, and works whether the viewport changes or if you constrain the viewport by resizing the browser, you have to be careful how much content you are downloading originally, and whether some of that content may need to be adjusted in an alternative way, such as through a JavaScript solution.

The following snapshot contains all the adjustments we just talked about, minus the use of the visible/hidden classes.

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