Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
VisualStrap Demo ①
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.