bootstrap 翻页组件(实现上一篇/下一篇 功能)

W3CSchool > bootstrap3中文手册 > Bootstrap 工具类 > bootstrap 翻页组件(实现上一篇/下一篇 功能)

用简单的标记和样式,就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。

通过创建带有样式 .pager  的容器 ul,节点分别赋予样式 .previous .next,同时你还可以通过 .disabled 添加一个个性的禁用状态。

bootstrap 翻页默认实例

在默认的翻页中,链接居中对齐。

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

bootstrap 翻页两端对齐链接

你还可以把链接向两端对齐:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

bootstrap 翻页可选的禁用状态

.disabled 类也可用于翻页中的链接。

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)