VisualStrap Demo ②

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>

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>

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>

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>

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>

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>

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>