Skip to content

Instantly share code, notes, and snippets.

@anupj

anupj/VFBootstrapSample

Created December 22, 2013 23:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save anupj/8089606 to your computer and use it in GitHub Desktop.
Save anupj/8089606 to your computer and use it in GitHub Desktop.
Download ZIP
Use Bootstrap with Visualforce on the Force.com platform
Raw
VFBootstrapSample
<apex:page showHeader="false" sidebar="false" standardStylesheets="false" docType="html-5.0" language="en-US" applyHTMLTag="false">
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Anup's Bootstrap example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link href="{!URLFOR($Resource.Bootstrap_3_0_3, 'dist/css/bootstrap.min.css')}" rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style type="text/css">
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<apex:outputPanel styleClass="navbar navbar-inverse navbar-fixed-top" layout="block" html-role="navigation">
<apex:outputPanel styleClass="container" layout="block">
<apex:outputPanel styleClass="navbar-header" layout="block">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<apex:outputPanel styleClass="sr-only">Toggle navigation</apex:outputPanel>
<apex:outputPanel styleClass="icon-bar"></apex:outputPanel>
<apex:outputPanel styleClass="icon-bar"></apex:outputPanel>
<apex:outputPanel styleClass="icon-bar"></apex:outputPanel>
</button>
<a class="navbar-brand" href="#">Salesforce1 and Bootstrap</a>
</apex:outputPanel>
<apex:outputPanel styleClass="navbar-collapse collapse" layout="block">
<form class="navbar-form navbar-right" role="form">
<apex:outputPanel styleClass="form-group" layout="block">
<input type="text" placeholder="Email" class="form-control" />
</apex:outputPanel>
<apex:outputPanel styleClass="form-group" layout="block">
<input type="password" placeholder="Password" class="form-control" />
</apex:outputPanel>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</apex:outputPanel><!--/.navbar-collapse -->
</apex:outputPanel>
</apex:outputPanel>
<!-- Main jumbotron for a primary marketing message or call to action -->
<apex:outputPanel styleClass="jumbotron" layout="block">
<apex:outputPanel styleClass="container" layout="block">
<h1>Hello, world!</h1>
<p>This is an example of how you can use Twitter Bootstrap with Visualforce pages.</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
</apex:outputPanel>
</apex:outputPanel>
<apex:outputPanel styleClass="container" layout="block">
<!-- Example row of columns -->
<apex:outputPanel styleClass="row" layout="block">
<apex:outputPanel styleClass="col-md-4" layout="block">
<h2>Force.com</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</apex:outputPanel>
<apex:outputPanel styleClass="col-md-4" layout="block">
<h2>Heroku</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</apex:outputPanel>
<apex:outputPanel styleClass="col-md-4" layout="block">
<h2>Mobile</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</apex:outputPanel>
</apex:outputPanel>
<hr />
<footer>
<p>&copy; Quantum Cloud Limited 2013</p>
</footer>
</apex:outputPanel> <!-- /container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<apex:includeScript value="{!URLFOR($Resource.Bootstrap_3_0_3, 'dist/js/bootstrap.min.js')}"></apex:includeScript>
</body>
</html>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment