I wanted to create a image slider, and i got a few pointes that lead to "Twitter Bootstrap". Now i have decide to dig in, i tried the basic example on Twitter Bootstrap in Visualforce ( Which does show the below VF page in 3 fixed columns with some content inside) , it doesn't seem to work as its mentioned.
I have uploaded the Static Resource of Bootstrap. I'm using IE 8 ( i'm being forced to use this for time being. Can't even debug it)
Please let me know if i am missing anything.
VF Page
<apex:page standardStylesheets="false" showheader="false" sidebar="false">
<html>
<head>
<title>Fixed layout example with Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<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')}"/>
</head>
<body>
<div class="row">
<div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis,
massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at,
posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse
vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris.
Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend
arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae,
tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id
felis. Vivamus sollicitudin metus eget eros.</p></div>
<div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam
cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis,
massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at,
posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse
vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris.
Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend
arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae,
tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id
felis. Vivamus sollicitudin metus eget eros.</p></div>
<div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam
cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis,
massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at,
posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse
vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris.
Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend
arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae,
tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id
felis. Vivamus sollicitudin metus eget eros.</p></div>
</div>
</body>
</html>
</apex:page>
/css/bootstrap.min.css'
or/css/bootstrap.css'
, same for the JS. – Boris Bachovski Aug 8 '13 at 5:39