8.17. Foundation paging

If your web page has a lot of content, you need to use paging.

To create a basic paging feature, you need to use the <ul> Add to the element .pagination Class:

8.17.1. Example ¶

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

尝试一下 »

Current page ¶

It can be found in the <li> Plus .current Class to label the current page:

8.17.2. Example ¶

<ul class="pagination">
  <li class="current"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

尝试一下 »

Disable paging ¶

If you need to set a page that is not clickable, you need to use the .unavailable Class:

8.17.3. Example ¶

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li class="unavailable"><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

尝试一下 »

Paging direction ¶

In the first and last one <li> Add on the element .arrow Class inserts HTML entity symbols « And » To create a paging direction symbol:

8.17.4. Example ¶

<ul class="pagination">
  <li class="arrow"><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li class="arrow"><a href="#">&raquo;</a></li>
</ul>

尝试一下 »

Page centered display ¶

We can add to the < ul > outer layer <div> Element and in the <div> Add on .pagination-centered Class to achieve paging centered display:

8.17.5. Example ¶

<div class="pagination-centered">
  <ul class="pagination">
    <li class="arrow"><a href="#">&laquo;</a></li>
    <li class="current"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="arrow"><a href="#">&raquo;</a></li>
  </ul>
</div>

尝试一下 »

Bread crumb navigation ¶

Breadcrumb navigation is used to show the navigation structure of the current page.

In <ul> Add on the element .breadcrumbs Class to implement bread crumb navigation. You can add it on < li >. .current Or .unavailable Class to set the current page and unclickable effects:

8.17.6. Example ¶

<ul class="breadcrumbs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li class="unavailable"><a href="#">Pictures</a></li>
  <li class="current">Vacation</li>
</ul>

尝试一下 »

Sub-navigation ¶

Subnavigation is very useful when it comes to page switching.

In <dl> Add on the element .sub-nav Class to create subnavigation. In <dt> Element to add a title to the selected option <dd> Add .active Class:

8.17.7. Example ¶

<dl class="sub-nav">
  <dt>Filter:</dt>
  <dd class="active"><a href="#">All</a></dd>
  <dd><a href="#">Active</a></dd>
  <dd><a href="#">Pending</a></dd>
  <dd><a href="#">Suspended</a></dd>
</dl>

尝试一下 »