Learn 'Mobile First' Web Design Using Bootstrap 3 by Rahul A. Sakla - HTML preview

PLEASE NOTE: This is an HTML preview only and some elements such as links or page numbers may be incorrect.
Download the book in PDF, ePub, Kindle for a complete version.

Chapter 14 Breadcumbers, Pagination

 

14.1 Breadcumbers

Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through :before and content.

img291.png

img292.png

 

14.2 Pagination

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

 

14.2.1 Default Pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

img293.png

img294.png

img295.png

img296.png

img297.png

 

14.2.2 Disabled And Active State

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

img298.png

img299.png

 

You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.

img300.png

img301.png

 

14.2.3 Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

img302.png

img303.png

 

14.3 Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

 

14.3.1 Default Pager

By default, the pager centers links.

 

img304.png

img305.png

 

14.3.2 Aligned Links

 

Alternatively you can align each link to the sides:

 

img306.png

 

img307.png

img308.png

 

14.3.3 Optional Disabled Link

 

Pager links also use the general .disabled utility class from the pagination.

 

img309.png

img310.png