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 & 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: 125
}
});
});