Foundation peddles


May 04, 2021 12:00 Foundation5


Table of contents


Foundation peddles

If your page has a lot of content, you'll need to use pedding.

To create a basic pagination feature, you need <ul> class to .pagination

Instance

< 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 >

尝试一下 »

当前页面

可以在 <li> 加上 .current 类来标注当前页面:

实例

< 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 >

Try it out . . .

Disable plying

If you need to set up a page that is not clickable, you .unavailable class:

Instance

< 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 >

Try it out . . .

The plying direction

Add the .arrow class insert HTML entity symbol on the first and last &laquo; and &raquo; to create a peddle direction symbol:

Instance

< 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 >
Try it out . . .

The page is centered

We can add the element of the <div> and add the .pagination-centered class on the outer layer to achieve a pedestaled display: <div>

Instance

< 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 >

Try it out . . .

Breadcrumbs navigation

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

Add <ul> the element for breadcrumbs navigation. .breadcrumbs You can add a .current or .unavailable class .current the current page with a non-clickable effect:

Instance

< 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 >

Try it out . . .

sub-navigation

Sub-navigation is very useful on page switching.

Add the .sub-nav <dl> the element to create sub-navigation. Add <dt> to the element and add a .active class for the selected option, <dd> .active

Instance

< ul 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 >
< /ul >

Try it out . . .