From 4aec90fa08fccdf97ab87eae41be2dc82b91d185 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Jul 2014 01:17:50 -0700 Subject: [PATCH] markdownify pagination --- docs/components/pagination.md | 169 ++++++++++++---------------------- 1 file changed, 61 insertions(+), 108 deletions(-) diff --git a/docs/components/pagination.md b/docs/components/pagination.md index 8b97b1a73..115e19cd5 100644 --- a/docs/components/pagination.md +++ b/docs/components/pagination.md @@ -3,25 +3,13 @@ layout: page title: Pagination --- -
-

Pagination

+Provide pagination links for your site or app with the multi-page pagination component, or the simpler [pager alternative](#pagination-pager). -

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

+## Default pagination -

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.

-
- -
-{% highlight html %} +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. + +{% example html %} -{% endhighlight %} +{% endexample %} -

Disabled and active states

-

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

-
- -
-{% highlight html %} +### Disabled and active states + +Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page. + +{% example html %} -{% endhighlight %} -

You can optionally swap out active or disabled anchors for <span> to remove click functionality while retaining intended styles.

+{% endexample %} + +You can optionally swap out active or disabled anchors for `` to remove click functionality while retaining intended styles. + {% highlight html %}
  • «
    • @@ -63,96 +48,64 @@ title: Pagination {% endhighlight %} -

    Sizing

    -

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

    -
    -
    - -
    -
    - -
    -
    - -
    -
    -{% highlight html %} -
      ...
    -
      ...
    -
      ...
    -{% endhighlight %} +### Sizing +Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes. -

    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.

    +{% example html %} + +{% endexample %} -

    Default example

    -

    By default, the pager centers links.

    -
    - -
    -{% highlight html %} +{% example html %} + +{% endexample %} + +## 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. + +### Default example + +By default, the pager centers links. + +{% example html %} -{% endhighlight %} +{% endexample %} -

    Aligned links

    -

    Alternatively, you can align each link to the sides:

    -
    - -
    -{% highlight html %} +### Aligned links + +Alternatively, you can align each link to the sides: + +{% example html %} -{% endhighlight %} +{% endexample %} -

    Optional disabled state

    -

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

    -
    - -
    +### Optional disabled state + +Pager links also use the `.disabled` class. + {% highlight html %} {% endhighlight %} -