Visualforce × Bootstrap サンプル

sample.page

<apex:page showHeader="true" sidebar="true" id="page">
    <apex:includeScript value="https://code.jquery.com/jquery-2.2.4.min.js" />
    <apex:stylesheet value="{!URLFOR( $Resource.Bootstrap337, 'dist/css/bootstrap.css' )}" />
    <apex:includeScript value="{!URLFOR( $Resource.Bootstrap337, 'dist/js/bootstrap.min.js' )}"/>
    <!-- App -->
    <div class="myBootstrap">
        <!-- alert -->
        <div class="alert alert-success" role="alert">Success!!</div>
        <div class="alert alert-info" role="alert">Info!!</div>
        <div class="alert alert-warning" role="alert">Warning!!</div>
        <div class="alert alert-danger" role="alert">Danger!!</div>
        <!-- glyphicon -->
        <div>
            <button type="button" class="btn btn-default" aria-label="Left Align">
                <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-default btn-lg">
                <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
            </button>
        </div>
    </div>
</apex:page>