There are a couple of resources which I have linked below that go through how to download, namespace, and then get working with Salesforce.com. One piece that seems to be missing is an example that works. Sounds crazy but I was not able to get the scripts/style sheets working (that is my story and I’m sticking to it!).
<apex:includeScript value=”{!URLFOR($Resource.jQuery)}”/>
<apex:stylesheet value=”{!URLFOR($Resource.bootstrap, ‘bootstrap/css/bootstrap.min.css’)}”/>
<apex:includeScript value=”{!URLFOR($Resource.bootstrap, ‘bootstrap/js/bootstrap.min.js’)}”/>
Here is a breakdown of what is in each link.
- jQuery – This is the javascript file (.js) uploaded as public.
- Bootstrap CSS – This is a zip file of the css, js, and fonts directories that are created when you compile bootstrap in a folder called ‘bootstrap’.
- Name: Everything after ‘$Resource. to the comma is the name of the static resource.
- Path: I’ve seen people use a forward slash to start the path, both how I have it and the forward slash both seem to work so personal preference.
- Ordering: It does not seem to matter which order the css and js are listed. I’ve seen posting that the JavaScript (js) needs to be first but for what we use it for it has not seemed to matter.
Bonus tip: Not covered on a lot of websites is why there is a bootstrap.css and a bootstrap.min.css. The first one is uncompressed formatting with the second having all of the unnecessary spaces removed in order to make the file smaller and quicker to load (think slow cell or internet connections). For development or customization, always use the regular non-min versions though technically for ultimate flexibility in upgrades you would edit/update the related theme or bootstrap .less file so that you can easily upgrade when new versions come out.
Here are the two links:
Using Bootstrap in Visualforce
Each link has a couple of good tips that is lacking from the other so it is best to look at both first.