Created by: ArturKwiatkowski
A more nested version of pager component
This is a continuation of #7590
Lets say that this time you have a section called #bottom and you have an unordered list in it. Next thing you would like to do is format this list from your LESS main stylesheet.
<section id="#bottom">
<ul>
<li><a href="#">← Older</a></li>
<li><a href="#">Newer →</a></li>
</ul>
</section>
This is our base to mess with, open your LESS and put:
#bottom {
ul {
.pager;
}
}
So that you'll get the same result as you would type class="pager" on that list.
#bottom {
ul {
.pager;
li {
&:first-child {
.previous;
}
&:last-child {
.next;
}
}
}
}
Taking these steps will provide you same result for first and last list items. They will look exactly like they would have class="previous" and class="next" on the HTML side.
#bottom {
ul {
.pager;
li {
&:first-child {
.previous;
.disabled;
}
&:last-child {
.next;
.disabled;
}
}
}
}
In this case both pager buttons will be disabled as they would be styled with "disabled" class.
Info for reviewer: There is no bootstrap.css to merge with docs because output of pager.less does not change a thing :)
Tested on: Firefox 20.0.1, Chrome 26.0.1410.64 m, Internet Explorer 10.0.9200.16521