VisualStrap Demo ①

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>

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>

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>

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>

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>

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>

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>

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>