Using Twitter Bootstrap with Visualforce pages


Building beautiful websites used to take patience and skill. If one were trying to create a visually appealing website from scratch, good knowledge of CSS3 would have been a must. Additionally, skill with jQuery would be another hurdle for completing dynamic aspects. Putting everything in the proper order would have taken days to weeks.

Now, there are fast UI frameworks for front-end development. I will be introducing you to Twitter Bootstrap, specifically how to integrate it with Visualforce Pages.

Some people have compared the Force.com platform (APEX programming language) to Visual Basic. Even a good application needs an attractive UI. Most applications nowadays are web facing. Browsers use CSS + HTML5 + JavaScript to render text, images, layout, and user interaction. Bootstrap is a UI framework with all those elements pre-fabricated. You just need to mark HTML elements with the proper CSS 3 classes and voila, it’s done.

It is extremely easy to use Bootstrap.

  1. Go to http://twitter.github.com/bootstrap/ and download the framework. It is a ZIP file, which already contains CSS, image (glyphicons), and JavaScript. (The required jQuery JavaScript is a separate download.)
  2. Upload as Static Resource to your Force.com org. (Setup > Develop > Static Resources). You can give it a name, for example, bootstrap.
  3. Create your visual page and include the required bootstrap components.
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>

<apex:stylesheet value="{!URLFOR($Resource.bootstrap, '/css/bootstrap.css')}"/>

<apex:stylesheet value="{!URLFOR($Resource.bootstrap, '/css/bootstrap.min.css')}"/>

<apex:includeScript value="{!URLFOR($Resource.bootstrap, '/js/bootstrap.js')}"/>

<apex:includeScript value="{!URLFOR($Resource.bootstrap, '/js/bootstrap.min.js')}"/>

That’s all the setup that’s needed.

By default, bootstrap uses a 12-column layout. If you want a div that spans across 4 columns, just indicate it is a “span4”. The convention is {name#columns}. Many useful UI classes are already pre-fabricated, i.e.

  • Navigation bar
  • Buttons
  • Pagination
  • Labels
  • Input boxes
  • Breadcrumbs
  • Progress bar

There is even a photo carousel built into it. See http://twitter.github.com/bootstrap/javascript.html#carousel

Furthermore, this UI framework supports mobile devices and will automatically resize elements accordingly. It’s really easy to use it. In 10 minutes, I created a demo page, showing VF pages + Bootstrap = Like.

The URL is: http://tquila-ray-developer-edition.na11.force.com/

Additionally, there are many bootstrap themes available on the Internet. Go ahead, try it and I am sure you will enjoy creating a polished website.

Image

Tagged , , , ,

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

%d bloggers like this: