Bootstrap 3 Snippets

=======[ Media Queries - default media query break points ]=======

@media(max-width:767px) {
    
}
@media(min-width:768px) {
    
}
@media(min-width:992px) {
    
}
@media(min-width:1200px) {
    
}

======================================================================


=======[ Debugging to indicate current screen size ]=======
<span class="visible-xs">X Small (max-width:767px)</span>
<span class="visible-sm">Small (min-width:768px)</span>
<span class="visible-md">Medium (min-width:992px)</span>
<span class="visible-lg">Large (min-width:1200px)</span>

=======[ If using Font Awesome this will show the relevant icons for each break point ]=======
<span class="visible-xs"><i class="fa fa-lg fa-mobile" title="Optimised for mobile phone display"></i></span>
<span class="visible-sm"><i class="fa fa-lg fa-tablet" title="Optimised for tablet display"></i></span>
<span class="visible-md"><i class="fa fa-lg fa-laptop" title="Optimised for laptop display"></i></span>
<span class="visible-lg"><i class="fa fa-lg fa-desktop" title="Optimised for desktop display"></i></span>

======================================================================


=======[ fix navbar to top on scroll ]=======

<script>
$(document).scroll(function(){
    var elem = $('.navbar'); // set target element id or class here as required
    if (!elem.attr('data-top')) {
        if (elem.hasClass('navbar-fixed-top'))
            return;
         var offset = elem.offset()
        elem.attr('data-top', offset.top);
    }
    if (elem.attr('data-top') - elem.outerHeight() <= $(this).scrollTop() - $(elem).outerHeight())
        elem.addClass('navbar-fixed-top');
    else
        elem.removeClass('navbar-fixed-top');
});
</script>

Sources:
http://stackoverflow.com/questions/12113926/creating-a-sticky-navbar-using-twitter-bootstrap
http://jsfiddle.net/yTqSc/39/

======================================================================

=======[ Example Table ]=======

.table-striped
.table-bordered
.table-hover
.table-condensed

.table-responsive - wrap <table class="table"... with <div class="table-responsive"> to make a table responsive.

<table class="table table-bordered table-striped table-hover table-condensed">
    <thead>
        <tr>
            <th>Item</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mark</td>
            <td>Otto</td>
        </tr>
        <tr>
            <td>Mark</td>
            <td>Otto</td>
        </tr>
    </tbody>
</table>

======================================================================