VisualStrap Demo ④

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>

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>

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>

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>