Twitter Bootstrap Pager Template Stylesheet

/*Default Bootstrap Paging Style*/
.bootstrapPager {
  display: inline-block;
  padding-left: 0;
  border-radius: 4px;
  margin-left: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
  line-height: 1.42857;
}
 
.bootstrapPagerPrevious{	
  background-color: #fff;
  border: 1px solid #ddd;	
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  display:inline;
  margin-left: 0;
  position: relative;
  float: left;
  padding: 6px 12px;
  color: #ddd;
  line-height: 1.42857143;
  text-decoration: none; 
}

.bootstrapPagerPrevious > a, .bootstrapPagerNext > a, .bootstrapPagerMiddle > span > span > a{	
	color: #337ab7;
	text-decoration: none; 
}
 
.bootstrapPagerPrevious:focus, .bootstrapPagerPrevious:hover, .bootstrapPagerNext:focus, .bootstrapPagerNext:hover {
  background-color:#eee;
  border-color: #ddd; 
  color: #23527c;
}  
 
.bootstrapPagerMiddle {
  display:inline;
}
 
.bootstrapPagerMiddle > span {
  float: left;
}
 
.bootstrapPagerMiddle > span > span {
  margin-left:5px;
  float: left;
  color: #105CB6;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  border: 1px solid #ddd; 
  background-color:#fff;
  text-decoration: none;
}

.xspCurrentItem{
	background-color:#337ab7 !important;
	border-color:#337ab7 !important;
	color:#fff !important;
}

.bootstrapPagerMiddle > span > span:focus, .bootstrapPagerMiddle > span > span:hover {
  background-color:#eee;
  border-color: #ddd; 
  color: #23527c;
} 
 
.bootstrapPagerNext {
  display:inline;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
  color: #ddd;
}





This stylesheet allows the XPages Pager control to look similar to Twitter Bootstrap's Pagination component. The following URL opens an example of Twitter Bootstrap's Pagination Component for reference:

http://getbootstrap.com/components/#disabled-and-active-states

Reference the following XPages Pager Template XSnippet for which this stylesheet was designed for:

http://openntf.org/XSnippets.nsf/snippet.xsp?id=twitter-bootstrap-pager-template

See below video tutorial explaining these 2 XSnippets:

http://johnjardin.ukuvuma.co.za/2015/06/24/video-tutorial-bootstrap-style-your-xpages-pager-control/

Cascaded Style Sheets
John V Jardin
May 24, 2015 11:57 AM
Rating
184

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.



2 comment(s)Login first to comment...
Patrick Kwintensson
(at 04:52 on 01.03.2016)
I notice the ... in the pager for views with long document list is not proper styled (read: not styled at all)
jeniffer homes
(at 10:55 on 18.12.2015)
Tested on Internet Explorer 9, Google Chrome 22 and Mozilla Firefox 16.

Thanks
http://www.fixithere.net/sky-customer-service/