Bootstrap Skeleton

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

by darrenarbell

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>
    </div> 
    <div class="splitter-pane" id="BottomPane">
        <p>This is the bottom part of the horizontal splitter. </p>
    </div>
</div>

    <div >
        <div class="span12 bar" >
            <div class="splitter-handle-wrapper">
                <div  style="float: left;" class="splitter-handle"></div>
                <div><span  class="rotate caret splitter-caret"></span></div>
            </div>
        </div>
    </div>-->

</div>

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);
                   ...