BS3 Template

Sample BS3 template (updated 05AU14)

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
 
<div id="navtop">
    
    <a class="logo-nav" href="#"> <img src="http://www.placehold.it/600x100"></a>	
 
  <div class="navbar navbar-inverse navbar-static-top" role="navigation">
	<div class="container">
		
		<div class="text-center">


			<button type="button" class="btn btn-default navbar-btn">BUTTON1</button>
      <button type="button" class="btn btn-default navbar-btn">BUTTON2</button>
      <button type="button" class="btn btn-default navbar-btn">BUTTON3</button>
			

			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
			</button>

		</div>

 

	</div> 		<!--/container -->  
 </div>  		<!--/navbar -->
</div> <!-- /navtop -->
        
    
    
    

             
    
    
    
        
        
        <!-- SUBNAV -->  
        <div id="subnav" class="navbar navbar-static-top subnav" role="navigation">
	<div class="navbar-inner">
		<div class="container">
		
	<ul class="pager subnav-pager">

                  <span class="">
              <span>Sub1</span>
               <i class="fa fa-android fa-lg"></i>
          </span>
        
        <li class="divider-vertical"></li>
        
                  <span class="">
              <span>Sub2</span>
               <i class="fa fa-android fa-lg"></i>
          </span>
        
            <li class="divider-vertical"></li>
        
                  <span class="">
              <span>Sub3</span>
               <i class="fa fa-android fa-lg"></i>
          </span>
        
            <li...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 0;
    padding: 0;
    background-color: #a6a938;
}

.navatar {
width: 30px;
margin: 0px auto;
padding: 0px auto;
}

.logo-nav{
display:block;
width:100%;
text-align: center;
padding: 10px 0px 10px 0px;
}

.navbar-inverse {
margin: 0;
}

.subnav-pager {
margin: 0;
}	

/* NAV VDIVS... */
.navbar .divider-vertical {
height: 50px;
margin: 0 9px;
border-right: 1px solid #ffffff;
border-left: 1px solid #f2f2f2;
}
.navbar-inverse .divider-vertical {
border-right-color: #222222;
border-left-color: #111111;
}
@media (max-width: 767px) {
.navbar-collapse .nav > .divider-vertical {
    display: none;
  }
}
/* END nav vdivs */



.container-full1200 {
	margin: 0px auto;
	width: auto;
	max-width: 1200px;
}





/* bootstrap 3 helpers for sticky subnav*/
.navbar-form input, .form-inline input {
	width:auto;
}

.navbar {
    margin-bottom:0;
}

.subnav {
   margin: 0px 0px 20px 0px;
  top: 0px;
  z-index: 1020;
  background-color: rgb(247,247,247); 
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #999999;
  padding: 7px 0px 0px 0px;
}
.subnav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:10;
}
/* END bootstrap 3 helpers for sticky subnav*/

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */

$('.subnav').affix({
      offset: {
        top: $('#navtop').height()
      }
});