Bootstrap Skeleton

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

by jschr

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="modal hide fade" id="modal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
       <h3>Modal header</h3>
    </div>  
    <div class="modal-body">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
            <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab1">
                <h3>Tab 1</h3>        
            </div>           
            <div class="tab-pane" id="tab2">
                <h3>Tab 2</h3>                                     
            </div>     
        </div>        
    </div>              
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>      
</div>
        
<button class="btn btn-large btn-primary" data-toggle="modal" href="#modal">Launch Modal</button>

CSS

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

button {
    margin: 10px;
}

JavaScript

$('#modal').on('shown', function(e){ console.log('modal shown') });
$('[href="#tab1"]').on('shown', function(e){ console.log('tab1 shown') });
$('[href="#tab2"]').on('shown', function(e){ console.log('tab2 shown') });