twitter/bootstrap — pull request #7608 by Fowowski (2013-04-17 16:00:58+00:00)
Title: more nested less rules - pager component

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.

← Older

Newer →

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