"Tabs with Pagination "
Bootstrap 3.3.0 Snippet by timbusken

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row"><div class="hidden-xs voffset6" ></div>
<div class="col-md-12 col-lg-12 panel panel-danger" >
<br>
<div class="panel-heading" id="syllabus">
<h1 class="text-center text-primary hidden-xs" style="font-size:400%"><span class="glyphicon glyphicon-cloud"></span>·Tabs with Pagination</h1>
<h1 class="text-center text-primary visible-xs" ><span class="glyphicon glyphicon-cloud"></span>·Tabs with Pagination</h1>
<br><br>
<div class="tabbable" >
<ul class="nav nav-tabs" id="myTabs">
<li class="active"><a href="#p1" data-toggle="tab"><strong>Page 1</strong></a></li>
<li><a href="#p2" data-toggle="tab"><strong>Page 2</strong></a></li>
<li><a href="#p3" data-toggle="tab"><strong>Page 3</strong></a></li>
<li><a href="#p4" data-toggle="tab"><strong>Page 4</strong></a></li>
<li><a href="#p5" data-toggle="tab"><strong><i class="fa fa-file-pdf-o"></i>·PDF</strong></a></li>
</ul>
</div>
</div>
<div class="panel-body">
<div class="tab-content">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
/*center the tabs
/*http://stackoverflow.com/questions/9421966/how-do-i-center-the-twitter-bootstrap-tabs-on-the-page*/
.nav-tabs > li, .nav-pills > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
zoom:1; /* hasLayout ie7 trigger */
}
.nav-tabs, .nav-pills {
text-align:center;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!-- scroll down to link / scroll top -->
//alijafarian.com/responsive-page-scrolling-with-jquery-and-bootstrap/ -->
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 50;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: