分页

默认分页

组件中的每个部分都很大,优点是容易点击、易缩放、点击区域大。

<span class="nt" style="color: rgb(47, 111, 159);"><nav</span> <span class="na" style="color: rgb(79, 159, 207);">aria-label=</span><span class="s" style="color: rgb(212, 73, 80);">"Page navigation"</span><span class="nt" style="color: rgb(47, 111, 159);">></span> <span class="nt" style="color: rgb(47, 111, 159);"><ul</span> <span class="na" style="color: rgb(79, 159, 207);">class=</span><span class="s" style="color: rgb(212, 73, 80);">"pagination"</span><span class="nt" style="color: rgb(47, 111, 159);">></span> <span class="nt" style="color: rgb(47, 111, 159);"><li></span> <span class="nt" style="color: rgb(47, 111, 159);"><a</span> <span class="na" style="color: rgb(79, 159, 207);">href=</span><span class="s" style="color: rgb(212, 73, 80);">"#"</span> <span class="na" style="color: rgb(79, 159, 207);">aria-label=</span><span class="s" style="color: rgb(212, 73, 80);">"Previous"</span><span class="nt" style="color: rgb(47, 111, 159);">></span> <span class="nt" style="color: rgb(47, 111, 159);"><span</span> <span class="na" style="color: rgb(79, 159, 207);">aria-hidden=</span><span class="s" style="color: rgb(212, 73, 80);">"true"</span><span class="nt" style="color: rgb(47, 111, 159);">></span><span class="ni" style="color: rgb(153, 153, 153);">&laquo;</span><span class="nt" style="color: rgb(47, 111, 159);"></span></span> <span class="nt" style="color: rgb(47, 111, 159);"></a></span> <span class="nt" style="color: rgb(47, 111, 159);"></li></span> <span class="nt" style="color: rgb(47, 111, 159);"><li><a</span> <span class="na" style="color: rgb(79, 159, 207);">href=</span><span class="s" style="color: rgb(212, 73, 80);">"#"</span><span class="nt" style="color: rgb(47, 111, 159);">></span>1<span class="nt" style="color: rgb(47, 111, 159);"></a></li></span> <span class="nt" style="color: rgb(47, 111, 159);"><li><a</span> <span class="na" style="color: rgb(79, 159, 207);">href=</span><span class="s" style="color: rgb(212, 73, 80);">"#"</span><span class="nt" style="color: rgb(47, 111, 159);">></span>2<span class="nt" style="color: rgb(47, 111, 159);"></a></li></span> <span class="nt" style="color: rgb(47, 111, 159);"><li><a</span> <span class="na" style="color: rgb(79, 159, 207);">href=</span><span class="s" style="color: rgb(212, 73, 80);">"#"</span><span class="nt" style="color: rgb(47, 111, 159);">></span>3<span class="nt" style="color: rgb(47, 111, 159);"></a></li></span> <span class="nt" style="color: rgb(47, 111, 159);"><li><a</span> <span class="na" style="color: rgb(79, 159, 207);">href=</span><span class="s" style="color: rgb(212, 73, 80);">"#"</span><span class="nt" style="color: rgb(47, 111, 159);">></span>4<span class="nt" style="color: rgb(47, 111, 159);"></a></li></span> <span class="nt" style="color: rgb(47, 111, 159);"><li><a</span> <span class="na" style="color: rgb(79, 159, 207);">href=</span><span class="s" style="color: rgb(212, 73, 80);">"#"</span><span class="nt" style="color: rgb(47, 111, 159);">></span>5<span class="nt" style="color: rgb(47, 111, 159);"></a></li></span> <span class="nt" style="color: rgb(47, 111, 159);"><li></span> <span class="nt" style="color: rgb(47, 111, 159);"><a</span> <span class="na" style="color: rgb(79, 159, 207);">href=</span><span class="s" style="color: rgb(212, 73, 80);">"#"</span> <span class="na" style="color: rgb(79, 159, 207);">aria-label=</span><span class="s" style="color: rgb(212, 73, 80);">"Next"</span><span class="nt" style="color: rgb(47, 111, 159);">></span> <span class="nt" style="color: rgb(47, 111, 159);"><span</span> <span class="na" style="color: rgb(79, 159, 207);">aria-hidden=</span><span class="s" style="color: rgb(212, 73, 80);">"true"</span><span class="nt" style="color: rgb(47, 111, 159);">></span><span class="ni" style="color: rgb(153, 153, 153);">&raquo;</span><span class="nt" style="color: rgb(47, 111, 159);"></span></span> <span class="nt" style="color: rgb(47, 111, 159);"></a></span> <span class="nt" style="color: rgb(47, 111, 159);"></li></span> <span class="nt" style="color: rgb(47, 111, 159);"></ul></span> <span class="nt" style="color: rgb(47, 111, 159);"></nav></span>分页实例.png

激活和禁用

链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类。

将 active 或 disabled 状态的链接(即 <a> 标签)替换为 <span> 标签,或者在向前/向后的箭头处省略<a> 标签,这样就可以让其保持需要的样式而不能被点击。

尺寸

.pagination-lg.pagination-sm 类提供了额外可供选择的尺寸。

对齐链接

<span class="nt" style="color: rgb(47, 111, 159);"><nav</span> <span class="na" style="color: rgb(79, 159, 207);">aria-label=</span><span class="s" style="color: rgb(212, 73, 80);">"..."</span><span class="nt" style="color: rgb(47, 111, 159);">></span> <span class="nt" style="color: rgb(47, 111, 159);"><ul</span> <span class="na" style="color: rgb(79, 159, 207);">class=</span><span class="s" style="color: rgb(212, 73, 80);">"pager"</span><span class="nt" style="color: rgb(47, 111, 159);">></span> <span class="nt" style="color: rgb(47, 111, 159);"><li</span> <span class="na" style="color: rgb(79, 159, 207);">class=</span><span class="s" style="color: rgb(212, 73, 80);">"previous"</span><span class="nt" style="color: rgb(47, 111, 159);">><a</span> <span class="na" style="color: rgb(79, 159, 207);">href=</span><span class="s" style="color: rgb(212, 73, 80);">"#"</span><span class="nt" style="color: rgb(47, 111, 159);">><span</span> <span class="na" style="color: rgb(79, 159, 207);">aria-hidden=</span><span class="s" style="color: rgb(212, 73, 80);">"true"</span><span class="nt" style="color: rgb(47, 111, 159);">></span><span class="ni" style="color: rgb(153, 153, 153);">&larr;</span><span class="nt" style="color: rgb(47, 111, 159);"></span></span> Older<span class="nt" style="color: rgb(47, 111, 159);"></a></li></span> <span class="nt" style="color: rgb(47, 111, 159);"><li</span> <span class="na" style="color: rgb(79, 159, 207);">class=</span><span class="s" style="color: rgb(212, 73, 80);">"next"</span><span class="nt" style="color: rgb(47, 111, 159);">><a</span> <span class="na" style="color: rgb(79, 159, 207);">href=</span><span class="s" style="color: rgb(212, 73, 80);">"#"</span><span class="nt" style="color: rgb(47, 111, 159);">></span>Newer <span class="nt" style="color: rgb(47, 111, 159);"><span</span> <span class="na" style="color: rgb(79, 159, 207);">aria-hidden=</span><span class="s" style="color: rgb(212, 73, 80);">"true"</span><span class="nt" style="color: rgb(47, 111, 159);">></span><span class="ni" style="color: rgb(153, 153, 153);">&rarr;</span><span class="nt" style="color: rgb(47, 111, 159);"></span></a></li></span> <span class="nt" style="color: rgb(47, 111, 159);"></ul></span> <span class="nt" style="color: rgb(47, 111, 159);"></nav></span>

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容