Eine komfortable Navigation zu angrenzenden Seiten, lässt sich mit Pager-Buttons umsetzen. Die .pager
-Klasse lässt sich auf Buttons wie Links, gleichermaßen anwenden, um den jeweiligen Umständen semantisch gerecht werden zu können:
<button class="pager">Pager</button> <button class="pager pager-icon" title="next"><i class="icon icon-navigation-right" aria-hidden="true"></i></button> <button class="pager"><i class="icon icon-navigation-left" aria-hidden="true"></i>Icon Left</button> <button class="pager">Icon Right<i class="icon icon-navigation-right right" aria-hidden="true"></i></button> <button class="pager pager-clean">Right<i class="icon icon-navigation-right right" aria-hidden="true"></i></button>
Size¶ ↑
<button class="pager pager-small">Small</button> <button class="pager">Regular</button> <button class="pager pager-large">Large</button>
Width¶ ↑
<button class="pager pager-block">Grid Based</button>
Aligned & Clean¶ ↑
<div class="clearfix"> <button class="pager pager-clean left"><i class="icon icon-navigation-left" aria-hidden="true"></i>Previous</button> <button class="pager pager-clean right">Next<i class="icon icon-navigation-right right" aria-hidden="true"></i></button> </div>