Skip to content

Instantly share code, notes, and snippets.

@tyoshikawa1106

tyoshikawa1106/00_VisualStrapDemo.page

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tyoshikawa1106/9484463 to your computer and use it in GitHub Desktop.
Save tyoshikawa1106/9484463 to your computer and use it in GitHub Desktop.
Download ZIP
VisualStrap Demo
Raw
00_VisualStrapDemo.page
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importVisualStrap theme="default" />
<vs:visualStrapBlock >
<!--All the Visualstrap content and Visualforce content here -->
</vs:visualStrapBlock >
</apex:page>
Raw
01_Panel
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<vs:visualstrapblock >
<vs:panel title="Demo Panel Primary" type="primary">
</vs:panel>
<vs:panel title="Demo Panel default" type="default">
</vs:panel>
<vs:panel title="Demo Panel Info" type="info">
</vs:panel>
<vs:panel title="Demo Panel success" type="success">
</vs:panel>
<vs:panel title="Demo Panel warning" type="warning">
</vs:panel>
<vs:panel title="Demo Panel danger" type="danger">
</vs:panel>
</vs:visualstrapblock>
</apex:page>
Raw
02_1_Alert
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<vs:visualstrapblock >
<apex:outputPanel layout="block" styleClass="alert alert-success">
This is sample success alert
</apex:outputPanel>
<apex:outputPanel layout="block" styleClass="alert alert-info">
This is sample info alert
</apex:outputPanel>
<apex:outputPanel layout="block" styleClass="alert alert-warning">
This is sample warning alert
</apex:outputPanel>
<apex:outputPanel layout="block" styleClass="alert alert-danger">
This is sample danger alert
</apex:outputPanel>
</vs:visualstrapblock>
</apex:page>
Raw
02_2_vs:alert
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<vs:visualstrapblock >
<vs:alert type="success">
This is sample Success alert
</vs:alert>
<vs:alert type="info">
This is sample Info alert
</vs:alert>
<vs:alert type="warning">
This is sample Warning alert
</vs:alert>
<vs:alert type="danger">
This is sample Danger alert
</vs:alert>
</vs:visualstrapblock>
</apex:page>
Raw
03_1_Well
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<vs:visualstrapblock >
<apex:outputPanel layout="block" styleClass="well">
This is a well
</apex:outputPanel>
</vs:visualstrapblock>
</apex:page>
Raw
03_2_vs_Well
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<vs:visualstrapblock >
<vs:well >
This is a well
</vs:well>
</vs:visualstrapblock>
</apex:page>
Raw
04_1_Label
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<vs:visualstrapblock >
<apex:outputLabel >
Success <apex:outputPanel styleClass="label label-default">MyLabel</apex:outputPanel>
</apex:outputLabel>
<br/>
<apex:outputLabel >
Primary <apex:outputPanel styleClass="label label-primary">MyLabel</apex:outputPanel>
</apex:outputLabel>
<br/>
<apex:outputLabel >
Info <apex:outputPanel styleClass="label label-info">MyLabel</apex:outputPanel>
</apex:outputLabel>
<br/>
<apex:outputLabel >
Warning <apex:outputPanel styleClass="label label-warning">MyLabel</apex:outputPanel>
</apex:outputLabel>
<br/>
<apex:outputLabel >
Danger <apex:outputPanel styleClass="label label-danger">MyLabel</apex:outputPanel>
</apex:outputLabel>
</vs:visualstrapblock>
</apex:page>
Raw
04_2_vs_Label
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<vs:visualstrapblock >
<apex:outputLabel >Success
<vs:label type="success">MyLabel</vs:label>
</apex:outputLabel>
<br/>
<apex:outputLabel >Primary
<vs:label type="primary">MyLabel</vs:label>
</apex:outputLabel>
<br/>
<apex:outputLabel >Info
<vs:label type="info">MyLabel</vs:label>
</apex:outputLabel>
<br/>
<apex:outputLabel >Warning
<vs:label type="warning">MyLabel</vs:label>
</apex:outputLabel>
<br/>
<apex:outputLabel >Danger
<vs:label type="danger">MyLabel</vs:label>
</apex:outputLabel>
</vs:visualstrapblock>
</apex:page>
Raw
05_1_Badges
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<vs:visualstrapblock >
<strong><apex:outputText >Contacts</apex:outputText></strong><apex:outputPanel styleClass="badge">12</apex:outputPanel>
<strong><apex:outputText >Accounts</apex:outputText></strong><apex:outputPanel styleClass="badge">12</apex:outputPanel>
</vs:visualstrapblock>
</apex:page>
Raw
05_2_vs_Badges
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<vs:visualstrapblock >
<strong>
<apex:outputText >Contacts</apex:outputText>
</strong>
<vs:badge >12</vs:badge>
<strong>
<apex:outputText >Accounts</apex:outputText>
</strong>
<vs:badge >22</vs:badge>
</vs:visualstrapblock>
</apex:page>
Raw
06_1_Jumbotron
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<vs:visualstrapblock >
<apex:outputPanel layout="block" styleClass="jumbotron">
<h1>Hello, world!</h1>
<p>
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
</p>
</apex:outputPanel>
</vs:visualstrapblock>
</apex:page>
Raw
06_2_vs_Jumbotron
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<vs:visualstrapblock >
<vs:jumbotron >
<h1>Hello, world!</h1>
<p>
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
</p>
</vs:jumbotron>
</vs:visualstrapblock>
</apex:page>
Raw
07A. Formblock - Vertical
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<vs:formblock alignment="vertical">
<vs:formgroup >
<apex:outputLabel >Name</apex:outputLabel>
<apex:inputText styleClass="form-control" html-placeholder="Name"></apex:inputText>
</vs:formgroup>
<vs:formgroup >
<apex:outputLabel >Email</apex:outputLabel>
<apex:inputText styleClass="form-control" html-placeholder="Email"></apex:inputText>
</vs:formgroup>
</vs:formblock>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
07B. Formblock - Horizontal
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<vs:formblock alignment="horizontal">
<vs:formgroup >
<vs:column type="col-md-2">
<apex:outputLabel >Name</apex:outputLabel>
</vs:column>
<vs:column type="col-md-10">
<apex:inputText styleClass="form-control" html-placeholder="Name"></apex:inputText>
</vs:column>
</vs:formgroup>
<vs:formgroup >
<vs:column type="col-md-2">
<apex:outputLabel >Email</apex:outputLabel>
</vs:column>
<vs:column type="col-md-10">
<apex:inputText styleClass="form-control" html-placeholder="Email"></apex:inputText>
</vs:column>
</vs:formgroup>
</vs:formblock>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
08. Glyphicons
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<apex:outputPanel styleClass="glyphicon glyphicon-search"></apex:outputPanel>
<apex:outputPanel styleClass="glyphicon glyphicon-film"></apex:outputPanel>
<vs:glyph icon="search"/>
<vs:glyph icon="film"/>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
09. Grid System
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<vs:row >
<vs:column type="col-md-1">.col-md-1</vs:column>
<vs:column type="col-md-1">.col-md-1</vs:column>
<vs:column type="col-md-1">.col-md-1</vs:column>
<vs:column type="col-md-1">.col-md-1</vs:column>
<vs:column type="col-md-1">.col-md-1</vs:column>
<vs:column type="col-md-1">.col-md-1</vs:column>
<vs:column type="col-md-1">.col-md-1</vs:column>
<vs:column type="col-md-1">.col-md-1</vs:column>
<vs:column type="col-md-1">.col-md-1</vs:column>
<vs:column type="col-md-1">.col-md-1</vs:column>
<vs:column type="col-md-1">.col-md-1</vs:column>
<vs:column type="col-md-1">.col-md-1</vs:column>
</vs:row>
<vs:row >
<vs:column type="col-md-8">.col-md-8</vs:column>
<vs:column type="col-md-4">.col-md-4</vs:column>
</vs:row>
<vs:row >
<vs:column type="col-md-6">.col-md-6</vs:column>
<vs:column type="col-md-6">.col-md-6</vs:column>
</vs:row>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
10 A. Thumbnail
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<vs:row >
<vs:column type="col-md-4">
<vs:thumbnail >
<apex:image value="http://placehold.it/550x350&text=My+Image"/>
</vs:thumbnail>
</vs:column>
<vs:column type="col-md-4">
<vs:thumbnail >
<apex:image value="http://placehold.it/550x350&text=My+Image"/>
</vs:thumbnail>
</vs:column>
<vs:column type="col-md-4">
<vs:thumbnail >
<apex:image value="http://placehold.it/550x350&text=My+Image"/>
</vs:thumbnail>
</vs:column>
</vs:row>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
10 B. Thumbnail - Custom Content
<apex:page docType="html-5.0" showHeader="true" sidebar="false">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<vs:row >
<vs:column type="col-md-4">
<vs:thumbnail >
<apex:image value="http://placehold.it/500x350&text=My+Image"/>
<vs:thumbnailcaption >
<h4>Thumbnail Caption</h4>
<br/>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta
gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</vs:thumbnailcaption>
</vs:thumbnail>
</vs:column>
<vs:column type="col-md-4">
<vs:thumbnail >
<apex:image value="http://placehold.it/500x350&text=My+Image"/>
<vs:thumbnailcaption >
<h4>Thumbnail Caption</h4>
<br/>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta
gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</vs:thumbnailcaption>
</vs:thumbnail>
</vs:column>
</vs:row>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
11 A. Tables : Striped Rows
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<apex:dataTable value="{!accounts}" var="acc" styleClass="table table-striped">
<apex:column value="{!acc.Name}" headerValue="Name" />
<apex:column value="{!acc.Phone}" headerValue="Phone" />
<apex:column value="{!acc.Type}" headerValue="Type" />
<apex:column value="{!acc.BillingState}" headerValue="Billing State" />
</apex:dataTable>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
11 B. Tables : Bordered
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<apex:dataTable value="{!accounts}" var="acc" styleClass="table table-bordered">
<apex:column value="{!acc.Name}" headerValue="Name" />
<apex:column value="{!acc.Phone}" headerValue="Phone" />
<apex:column value="{!acc.Type}" headerValue="Type" />
<apex:column value="{!acc.BillingState}" headerValue="Billing State" />
</apex:dataTable>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
11 C. Tables : Hover Rows
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<apex:dataTable value="{!accounts}" var="acc" styleClass="table table-hover">
<apex:column value="{!acc.Name}" headerValue="Name" />
<apex:column value="{!acc.Phone}" headerValue="Phone" />
<apex:column value="{!acc.Type}" headerValue="Type" />
<apex:column value="{!acc.BillingState}" headerValue="Billing State" />
</apex:dataTable>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
11 D. Tables : Condensed table
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<apex:dataTable value="{!accounts}" var="acc" styleClass="table table-condensed">
<apex:column value="{!acc.Name}" headerValue="Name" />
<apex:column value="{!acc.Phone}" headerValue="Phone" />
<apex:column value="{!acc.Type}" headerValue="Type" />
<apex:column value="{!acc.BillingState}" headerValue="Billing State" />
</apex:dataTable>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
11. Tables
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<apex:dataTable value="{!accounts}" var="acc" styleClass="table">
<apex:column value="{!acc.Name}" headerValue="Name" />
<apex:column value="{!acc.Phone}" headerValue="Phone" />
<apex:column value="{!acc.Type}" headerValue="Type" />
<apex:column value="{!acc.BillingState}" headerValue="Billing State" />
</apex:dataTable>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
12. Buttons
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<apex:commandButton value="Default" styleClass="btn-default"/>
<apex:commandButton value="Primary" styleClass="btn-primary"/>
<apex:commandButton value="Success" styleClass="btn-success"/>
<apex:commandButton value="Info" styleClass="btn-info"/>
<apex:commandButton value="Warning" styleClass="btn-warning"/>
<apex:commandButton value="Danger" styleClass="btn-danger"/>
<apex:commandButton value="Large" styleClass="btn-default btn-lg"/>
<apex:commandButton value="Default" styleClass="btn-default"/>
<apex:commandButton value="Small" styleClass="btn-default btn-sm"/>
<apex:commandButton value="Extra Small" styleClass="btn-default btn-xs"/>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
13. Button Group
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<apex:outputPanel styleClass="btn-group" layout="block">
<apex:commandButton value="Left" styleClass="btn-default"/>
<apex:commandButton value="Middle" styleClass="btn-default"/>
<apex:commandButton value="Right" styleClass="btn-default"/>
</apex:outputPanel>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
14. Button Toolbar
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<apex:outputPanel styleClass="btn-toolbar" layout="block">
<apex:outputPanel styleClass="btn-group" layout="block">
<apex:commandButton value="1" styleClass="btn-default"/>
<apex:commandButton value="2" styleClass="btn-default"/>
<apex:commandButton value="3" styleClass="btn-default"/>
</apex:outputPanel>
<apex:outputPanel styleClass="btn-group" layout="block">
<apex:commandButton value="4" styleClass="btn-default"/>
<apex:commandButton value="5" styleClass="btn-default"/>
<apex:commandButton value="6" styleClass="btn-default"/>
<apex:commandButton value="7" styleClass="btn-default"/>
</apex:outputPanel>
</apex:outputPanel>
<vs:buttontoolbar >
<vs:buttongroup >
<apex:commandButton value="1" styleClass="btn-default"/>
<apex:commandButton value="2" styleClass="btn-default"/>
<apex:commandButton value="3" styleClass="btn-default"/>
</vs:buttongroup>
<vs:buttongroup >
<apex:commandButton value="4" styleClass="btn-default"/>
<apex:commandButton value="5" styleClass="btn-default"/>
<apex:commandButton value="6" styleClass="btn-default"/>
<apex:commandButton value="7" styleClass="btn-default"/>
</vs:buttongroup>
</vs:buttontoolbar>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
15. Button dropdowns
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<apex:outputPanel styleClass="btn-group" layout="block">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Action <apex:outputPanel styleClass="caret" />
</button>
<ul class="dropdown-menu" role="menu">
<li>
<apex:commandLink value="Do Action 1" action="{doAction1}" />
</li>
<li>
<apex:commandLink value="Do Action 2" action="{doAction2}" />
</li>
<li>
<apex:commandLink value="Do Action 3" action="{doAction3}" />
</li>
</ul>
</apex:outputPanel>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
16. Split button dropdowns
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<apex:outputPanel styleClass="btn-group" layout="block">
<apex:commandButton value="Action" styleClass="btn-danger" action="{doAction}" />
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<apex:outputPanel styleClass="caret"></apex:outputPanel>
&nbsp;
</button>
<ul class="dropdown-menu" role="menu">
<li>
<apex:commandLink value="Do Action 1" action="{doAction1}" />
</li>
<li>
<apex:commandLink value="Do Action 2" action="{doAction2}" />
</li>
<li>
<apex:commandLink value="Do Action 3" action="{doAction3}" />
</li>
</ul>
</apex:outputPanel>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
17. Page header
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<center>
<vs:pageheader icon="home" title="User Dashboard" subtitle="VisualStrap Site Guest User"/>
</center>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
18. Progress Bar
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<vs:progressbar type="primary" value="10"/>
<vs:progressbar type="success" value="20"/>
<vs:progressbar type="info" value="30"/>
<vs:progressbar type="warning" value="40"/>
<vs:progressbar type="danger" value="50"/>
<hr/>
<hr/>
<vs:progressbar type="primary" striped="true" value="60"/>
<vs:progressbar type="success" striped="true" value="70"/>
<vs:progressbar type="info" striped="true" value="80"/>
<vs:progressbar type="warning" striped="true" value="90"/>
<vs:progressbar type="danger" striped="true" value="100"/>
<hr/>
<hr/>
<vs:progressbar type="primary" animated="true" value="90"/>
<vs:progressbar type="success" animated="true" value="80"/>
<vs:progressbar type="info" animated="true" value="70"/>
<vs:progressbar type="warning" animated="true" value="60"/>
<vs:progressbar type="danger" animated="true" value="50"/>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
19. ListGroup and ListGroupItem
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<ul class="list-group-item">
<li class="list-group-item active">This is active</li>
<li class="list-group-item">This is item 1</li>
<li class="list-group-item">This is item 2</li>
<li class="list-group-item">This is item 3</li>
<li class="list-group-item">
<vs:glyph icon="calendar"/> I can also have a glyph
</li>
</ul>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
20. Tooltip
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<vs:tooltip text="Hey I have a tooltip">
<apex:commandButton value="Button" styleClass="btn-primary"/>
</vs:tooltip>
<vs:tooltip text="Hey I am a inputText">
<apex:inputText />
</vs:tooltip>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Raw
21. Modal
<apex:page standardController="Account" docType="html-5.0" showHeader="true" sidebar="false" recordSetVar="accounts">
<vs:importvisualstrap theme="default" />
<apex:form >
<vs:visualstrapblock >
<apex:commandButton value="Launch My Modal Popup" html-data-toggle="modal" html-data-target="#myModal" styleClass="btn-primary brn-lg"/>
<!--modal that will be displayed to the user-->
<vs:modal title="My Modal" id="myModal">
My Modal Popup
<apex:outputPanel layout="block" styleClass="modal-footer">
<apex:commandButton value="Close" styleClass="btn-warning" html-data-dismiss="modal"/>
<apex:commandButton value="Save Changes" styleClass="btn-success" />
</apex:outputPanel>
</vs:modal>
</vs:visualstrapblock>
</apex:form>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment