Bootstrap 3 Skeleton

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

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<body data-spy="scroll" data-target="#myScrollspy">
<div class="page-header navbar-fixed-top">
	<div class="inner-container ">
	
		<div class="row logort">
		    <a href="#" title="">
			    <span class="logo-container">
			    </span>
		    </a>
	    </div>
		
		<div class="navmain js-sticky-header">
		<div class="spartan-full-width nav-container navbar navbar-default" role="navigation"> <!-- bootstrap nav -->
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#at-nav"><span style="color: #fff;">Menu</span></button> <!-- bootstrap nav -->
			<nav class="navbar-collapse collapse" id="at-nav"><!-- bootstrap nav -->
				<ul class="navmain_holder navbar-nav nav-pills nav-stacked"><!-- bootstrap nav -->
					<li class="navmain__item navmain__item--buying js-navmain-item nav-item"><a href="index.html" class="navmain__item--mainlink">Getting Started</a></li>
					<li class="navmain__item navmain__item--buying js-navmain-item nav-item active"><a href="style.html" class="navmain__item--mainlink">Styling &amp; CSS</a></li>
					<li class="navmain__item navmain__item--buying js-navmain-item nav-item"><a href="components.html" class="navmain__item--mainlink">Components</a></li>
					<li class="navmain__item navmain__item--buying js-navmain-item nav-item"><a href="javascript.html" class="navmain__item--mainlink">JavaScript</a></li>
					<li class="navmain__item navmain__item--buying js-navmain-item nav-item"><a href="javascript.html" class="navmain__item--mainlink">Mobile</a></li>
				</ul>
			</nav>
		</div>
	</div>
		
		
		
	</div>
</div><!-- end of page header -->



<div class="container" style="margin-top:120px;">

	
	<div class="row">
	
		<aside class="col-lg-2 col-md-2 col-sm-2" id="myScrollspy">
			<section class="panel">
			  <div class="row">
				<ul class="nav nav-tabs nav-stacked" id="myNav">
					<li class="active"><a...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.row.logort {
width: 1024px;
margin: 0 auto;
}

.page-header {
background-color: #fff;
width: 100%;
margin: 0;
padding: 0;
border: 0;
-webkit-box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.59);
-moz-box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.59);
box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.59);
}

.inner-container {
width: 100%;
margin: 0 auto;
}

.navmain {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(26%, #099BD9), color-stop(63%, #2980C8));
background-image: -webkit-linear-gradient(#099BD9 26%, #2980C8 63%);
background-image: -moz-linear-gradient(#099bd9 26%, #2980c8 63%);
background-image: -o-linear-gradient(#099bd9 26%, #2980c8 63%);
background-image: linear-gradient(#099BD9 26%, #2980C8 63%);
background-color: #1585B4;
position: relative;
z-index: 1000;
-webkit-box-shadow: 0 2px 4px 0 rgba(50,50,50,0.59);
-moz-box-shadow: 0 2px 4px 0 rgba(50,50,50,0.59);
box-shadow: 0 2px 4px 0 rgba(50,50,50,0.59);
}



 ul.nav-tabs{
        width: 140px;
        margin-top: 20px;
        border-radius: 4px;
        border: 1px solid #ddd;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    }
    ul.nav-tabs li{
        margin: 0;
        border-top: 1px solid #ddd;
    }
    ul.nav-tabs li:first-child{
        border-top: none;
    }
    ul.nav-tabs li a{
        margin: 0;
        padding: 8px 16px;
        border-radius: 0;
    }
    ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
        color: #fff;
        background: #0088cc;
        border: 1px solid #0088cc;
    }
    ul.nav-tabs li:first-child a{
        border-radius: 4px 4px 0 0;
    }
    ul.nav-tabs li:last-child a{
        border-radius: 0 0 4px 4px;
    }
    ul.nav-tabs.affix{
        top: 135px; /* Set the top position of pinned element */
		margin:0;
		padding:0;
    }

JavaScript

$(document).ready(function(){
			$("#myNav").affix({
				offset: { 
					top: 300
				}
			});
		});


$(window).on('click.bs.affix.data-api', function(){

    setTimeout( function(){
        $target = $("#myNav li.active a").attr('href'); 
        $target = $( $target );
        //alert($target);
        $top = $target.offset().top - $('.page-header').height();

        window.scrollTo( 0 , $top);
        e.stopPropagtion();
        $("#myNav li.active a").removeClass('active');
    }, 10);

});