GESample

<apex:page showHeader="false" sidebar="false" standardController="Rig__c" extensions="RigController">
 
<apex:stylesheet value="{!URLFOR($Resource.iids, 'iids-min/css/iids.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.iids, 'iids-min/css/responsive.css')}"/>

 <script type="text/javascript">
            Visualforce.remoting.timeout = 120000; // Set timeout at page level
            var j$ = jQuery.noConflict();
    
    function saveRig() {
                
                var rigtype = document.getElementById('j_id0:j_id4:rigtype').value;
                var projectdetails = document.getElementById('projectdetails').value; 
                var discussion = document.getElementById('discussion').value;   
                
                
                Visualforce.remoting.Manager.invokeAction(
                    '{!$RemoteAction.RigController.saveRig}',
                        rigtype, projectdetails, discussion,
                        handleSaveRig
                );   
            }

            function handleSaveRig(result, event) {
                if (result == 'success') {
                    document.getElementById('modulebodymsg').class = 'alert alert-success';
                    document.getElementById('modulebodymsg').innerHTML = 'Rig successfully added.';
                } else {
                    document.getElementById('modulebodymsg').class = 'alert alert-danger';
                    document.getElementById('modulebodymsg').innerHTML = 'Oh Snap! Something went wrong.';
                } 

            }

</script>
  
 <div class="navbar navbar-static-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="brand" href="#"><span class="ge-logo"></span> <span>My Application <small><i>powered by</i> GE Business</small></span></a>
        <div class="pull-right">
          <div class="btn-toolbar pull-left">
            <div class="btn-group">
              <button class="btn btn-danger dropdown-toggle" rel="tooltip" data-title="Alerts" data-placement="bottom" data-toggle="dropdown"><i class="icon-warning-sign"></i> 5</button>
              <ul class="dropdown-menu pull-right message-list">
                <li class="message-item">
                  <a href="#">
                    <span class="label label-important pull-left">Urgent</span>
                    <h4 class="message-title">Alert Type and Title</h4>
                    <p>This is a brief description or summary of the associated event that occured&hellip;<br/><time datetime="MM:DD:YYTHH:MM:SS" class="message-time">MM/DD/YY 12:05</time></p>
                  </a>
                </li>
                <li class="message-item">
                  <a href="#">
                    <span class="label label-warning pull-left">Moderate</span>
                    <h4 class="message-title">Alert Type and Title</h4>
                    <p>This is a brief description or summary of the associated event that occured&hellip;<br/><time datetime="MM:DD:YYTHH:MM:SS" class="message-time">MM/DD/YY 12:05</time></p>
                  </a>
                </li>
                <li class="message-item"><a href="#">View all alerts</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button class="btn btn-inverse dropdown-toggle" rel="tooltip" data-title="Messages" data-placement="bottom" data-toggle="dropdown"><i class="icon-envelope-alt"></i></button>
              <ul class="dropdown-menu pull-right message-list">
                <li class="message-item empty">No unread messages</li>
                <li class="message-item"><a href="#">View all messages</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i><span class="user-name">Tom Edison</span> <i class="icon-chevron-down"></i></button>
              <ul class="dropdown-menu pull-right">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
          </div>
          <form class="navbar-search pull-left">
            <div class="input-append">
                <input type="search" class="input-medium search-query" data-toggle="dropdown" data-target=".navbar-search" /><button type="submit" class="btn btn-icon"><i class="icon-search"></i></button>
            </div>
            <div class="typeahead typeahead-faceted dropdown-menu pull-right">
              <ul class="unstyled">
                <li class="facet">
                  <div class="facet-name">Top Result</div>
                  <ul class="facet-results unstyled">
                    <li><a href="#"><strong>Ma</strong>ine</a></li>
                  </ul>
                </li>
                <li class="facet">
                  <div class="facet-name">States</div>
                  <ul class="facet-results unstyled">
                    <li><a href="#"><strong>Ma</strong>ine</a></li>
                    <li><a href="#"><strong>Ma</strong>ryland</a></li>
                    <li><a href="#"><strong>Ma</strong>ssachusetts</a></li>
                    <li><a href="#">Alaba<strong>ma</strong></a></li>
                  </ul>
                </li>
                <li class="facet">
                  <div class="facet-name">Cities</div>
                  <ul class="facet-results unstyled">
                    <li><a href="#"><strong>Ma</strong>bleton, GA</a></li>
                    <li><a href="#"><strong>Ma</strong>cedon, NY</a></li>
                    <li><a href="#"><strong>Ma</strong>cedonia, OH</a></li>
                    <li><a href="#"><strong>Ma</strong>chesney Park, IL</a></li>
                    <li><a href="#"><strong>Ma</strong>comb, IL</a></li>
                  </ul>
                </li>
                <li><a href="#">View All Results</a></li>
              </ul>
            </div>
          </form>
          <button class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <i class="icon-bar"></i>
            <i class="icon-bar"></i>
            <i class="icon-bar"></i>
          </button>
        </div>
      </div>
    </div>
    <!--
    <div class="primary-navbar nav-collapse">
      <div class="container">
          <ul class="nav">
            <li class="active"><a href="page1.html">Page 1</a></li>
            <li><a href="page2.html">Page 2</a></li>
          </ul>
        </div>
    </div>
    -->
  </div>
    <!-- This container will hold our primary page content. -->
    <div class="container">
        <!--
      <div class="page-header">
        <h1 class="voice voice-brand pull-left"></h1>
      </div>
      -->
      <!--
      To demonstrate the responsive grid we've split the page into
      two parts, a sidebar and a primary content area. To create
      vertical separation you use .row classes. To create horizontal
      separation you use .span* classes inside of .row classes.
      -->
      <div class="row">
        <div class="span4">
          <!--
          Modules are unique to the IIDS. They offer a prestylized,
          modular container. Good for sections and widgets.
          -->
          <section class="module sidebar"> <!-- Our sidebar -->
            <header class="module-header">
              <h3>Hello there!</h3>
            </header>
            <div class="module-body" id="modulebodymsg">
              <p>
                I don't look like a Visualforce page, but I am. It's really just a container to run anything.
              </p>
              
              <div class="progress progress-success">
                <div class="bar"></div>
              </div>
            </div>
          </section>
        </div>

        <div class="span8">
          <section class="module primary-content"> <!-- Our primary content -->
            <header class="module-header">
              <h2>Time to update with JavaScript</h2>
            </header>
            <div class="module-body">
              <apex:form>
                <label>Project Details</label>
                <input type="text"  id="projectdetails"/>
                <label>Discussions</label>
                <input type="text" id="discussion"/>
               
                <label>Please select the Rig Type</label>
                <apex:inputField value="{!Rig__c.Rig_Type__c}" id="rigtype"/>
               
              </apex:form>
              <a href="#" class="btn btn-primary" onclick="saveRig();">Save Rig</a>
            </div>
          </section>
        </div>
      </div>
    </div>
    <!--
    Scripts, with the exception of modernizr, go at the bottom of the page
    to improve load time.
    -->
    
    <apex:includeScript value="{!URLFOR($Resource.iids, 'iids-min/components/requirejs/require.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.iids, 'iids-min/js/require.config.js')}"/>

<script type="text/javascript">
  require.config({
    baseUrl: '{!URLFOR($Resource.iids, 'iids-min/')}'
  });
  require(['iids', '{!URLFOR($Resource.iids, 'iids-min/js/app/main2.js')}']);
</script>

 <apex:includeScript value="{!URLFOR($Resource.iids, 'iids-min/components/respond/respond.src.js')}"/>
</apex:page>