Bootstrap Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by kakss

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row-fluid" id="MySplitter">
    <div class="splitter-pane" id="TopPane">
        <p>This is the top part of the horizontal splitter.</p>
        <p>Using CSS styles you can control the look of the splitter, such as its color, width, and appearance when selected. For example, the top pane on this example uses stylesheet rules to limit the height between 50 and 200 pixels.
        content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/></p>
    </div>
    
    <div class="splitter-pane" id="BottomPane">
        <p>This is the bottom part of the horizontal splitter. </p>
        <p>This plugin was designed to use simple markup and require almost no work to get a basic layout. The simplest HTML markup for a horizontal splitter looks like this:</p>
        <p>To create the splitter, put a line of code in a .ready() handler to select the MySplitter div in a jQuery object and pass it to the splitter plugin:</p>
        <p>Congratulations, you have a splitter in your document!
       ...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

html{
    height: 100%;
}

body {
    height: 100%;
    width: 100%;
    position: absolute;
}

.container-fluid,
.row-fluid { height: inherit; }

#MySplitter {
    background: #f8fff8;
}




.splitter-pane {
    height:50%;
background:#fff;
overflow-y:auto;
overflow: auto;
}

.splitter-bar-horizontal {
    height: 10px; !important;

    background-repeat: no-repeat;
    background-position: right;
}

.bar{
    height:8px; !important;
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
    text-align: center;
}

.splitter-handle-wrapper{
    position: relative;
top: 20%;
    width: 60px;
    margin: 0 auto;
}

.splitter-caret
{
border-top-color: silver !important;
border-bottom-color: silver  !important;
}

.splitter-handle{
/*background-color :silver;*/
     border-top: 1px solid silver;
    border-bottom: 1px solid silver;
    height: 2px;
    width: 30px;
}

.rotate    {  
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    /* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5); */
    -ms-transform:rotate(180deg);
    
}

JavaScript

/*
 * jQuery.splitter.js - two-pane splitter window plugin
 *
 * version 1.6 (2010/01/03) 
 * 
 * Dual licensed under the MIT and GPL licenses: 
 *   http://www.opensource.org/licenses/mit-license.php 
 *   http://www.gnu.org/licenses/gpl.html 
 */

    /**
     * The splitter() plugin implements a two-pane resizable splitter window.
     * The selected elements in the jQuery object are converted to a splitter;
     * each selected element should have two child elements, used for the panes
     * of the splitter. The plugin adds a third child element for the splitbar.
     * 
     * For more details see: http://methvin.com/jquery/splitter/
     *
     *
     * @example $('#MySplitter').splitter();
     * @desc Create a vertical splitter with default settings 
     *
     * @example $('#MySplitter').splitter({type: 'h', accessKey: 'M'});
     * @desc Create a horizontal splitter resizable via Alt+Shift+M
     *
     * @name splitter
     * @type jQuery
     * @param Object options Options for the splitter (not required)
     * @cat Plugins/Splitter
     * @return jQuery
     * @author Dave Methvin ([email protected])
     */
    ;
    (function($) {

        var splitterCounter = 0;

        $.fn.splitter = function(args) {
            args = args || {};
            return this.each(function() {
                if ($(this).is(".splitter")) // already a splitter
                return;
                var zombie; // left-behind splitbar for outline resizes

                function setBarState(state) {
                    bar.removeClass(opts.barStateClasses).addClass(state);
                }

                function startSplitMouse(evt) {
                    if (evt.which != 1) return; // left button only
                    bar.removeClass(opts.barHoverClass);
                    if (opts.outline) {
                        zombie = zombie || bar.clone(false).insertAfter(A);
                        bar.removeClass(opts.barDockedClass);
                   ...