Home » BootStrap » How to use Twitter BootStrap with VisualForce Pages

How to use Twitter BootStrap with VisualForce Pages

in - on 21:33 - No comments
What is BootStrap ?

Smart web-developers and active readers out there need no introduction , but for fairly new web developers here, I can say bootstrap is front-end very slick framework offered by Twitter.Inc. With simple import (as static resource) in Salesforce can change your experience of designing visual-force pages significantly and reduce development time to fairly low. Using standard html tags you can create some beautiful and interactively rich effect, also on top of Visualforce as well.


Who use bootstrap ? 

Recently I designed Sales User Application that incorporates Salesforce data and present it on top of Google Map, this Google map is hosted on visualforce page and with some filters you see all your data on top of a Map. The filters, drop down effect, auto re-sizing application UI, I designed in hours with help of bootstrap and just wow the clients 

A serious thanks to bootstrap for make it easier and reducing my work from weeks to hours 

There are tons of websites out in market using bootstrap - see here and here for more examples


How do you add Bootstrap to Salesforce/Visualforce page ?

Follow the steps below to incorporate bootstrap

1. Go to bootstrap page and download .zip file
2. Import zip in your Salesforce Organization as static resource or  Read how to add static resource in Salesforce
3. Don't change the file structure to make this code work

I designed visualforce page, displaying web components beautified by bootstrap with before/ after pictures


Before BootStrap the components looks like 


After effect on components


Try the code below to add rich effects to your page

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071

<apex:page standardController="Account" showheader="false" >



    <!-- Bootstrap -->



        <!-- Bootstrap -->



         <link href="{!URLFOR($Resource.bootStrap, 'bootstrap/css/bootstrap.min.css')}" rel="stylesheet" media="screen"/>



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



 



   <html>



      <head></head>



      <body>



         <table width="100%" border="0" cellspacing="3" cellpadding="0">



            <tr>



               <td>



                  <!-- Table on right side -->



                  <table width="100%" border="0" cellspacing="0" cellpadding="1">



                     <tr>



                        <td>



                           <strong>Beautiful Search Box</strong>



                           <form class="form-search">



                              <input type="text" class="input-medium search-query"/>



                              <button type="submit" class="btn">Search</button>



                           </form>



                        </td>



                        <td style="font-weight:bold;" class="Single">



                           Drop Down  <br/>



                           <select id="SES__c" >



                              <option value="">Bootstrap Dropdown</option>



                              <option value="True">Yes</option>



                              <option value="False">No</option>



                           </select>



                        </td>



                        <td>



                           <strong>Inline Form</strong>



                           <form class="form-inline">



                              <input type="text" class="input-small" placeholder="Email" />



                              <input type="password" class="input-small" placeholder="Password"/>



                              <label class="checkbox">



                              <input type="checkbox" /> Remember me



                              </label>



                              <button type="submit" class="btn">Sign in</button>



                           </form>



                        </td>



                     </tr>



                     <tr >



                        <td><strong>Input Box</strong><input type="text" placeholder="Text input"/></td>



                        <td><strong>Text Box </strong><textarea rows="3"></textarea></td>



                        <td><button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button> </td>



                     </tr>



                  </table>



                  <!-- END -->



               </td>



            </tr>



         </table>



         <table class="table table-bordered">



            <tr class="success">



               <td>Column 1 </td>



               <td> Column 2 </td>



               <td> Column 3 </td>



            </tr>



            <tr>



            <td> Column 4 </td>



            <td> Column 5 </td>



            <td> Column 6 </td>



            </tr>



           



         </table>



         <tr>



              



            </tr>



      </body>



   </html>



</apex:page>
view rawgistfile1.java hosted with ❤ by GitHub
I have designed some interesting patter for advance implementation using BootStrap which I'll be sharing soon here at github. Please feel free to share your code, or fork directory for submission of design you own (designed on Visualforce) and would like to share
Labels:

Post a Comment