blob: 115e19cd5b659a24aa43b21305794fb32bc332d7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
---
layout: page
title: Pagination
---
Provide pagination links for your site or app with the multi-page pagination component, or the simpler [pager alternative](#pagination-pager).
## 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.
{% example html %}
<ul class="pagination">
<li><a href="#">«</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><a href="#">»</a></li>
</ul>
{% endexample %}
### Disabled and active states
Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page.
{% example html %}
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></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><a href="#">»</a></li>
</ul>
{% endexample %}
You can optionally swap out active or disabled anchors for `<span>` to remove click functionality while retaining intended styles.
{% highlight html %}
<ul class="pagination">
<li class="disabled"><span>«</span></li>
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
...
</ul>
{% endhighlight %}
### Sizing
Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes.
{% example html %}
<ul class="pagination pagination-lg">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
{% endexample %}
{% example html %}
<ul class="pagination pagination-sm">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
{% 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 %}
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
{% endexample %}
### Aligned links
Alternatively, you can align each link to the sides:
{% example html %}
<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
{% endexample %}
### Optional disabled state
Pager links also use the `.disabled` class.
{% highlight html %}
<ul class="pager">
<li class="previous disabled"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
{% endhighlight %}
|
