4.14、Bootstrap V4自学之路-----组件---分页
默认分页
简单的分页灵感来自Rdio，对应用和搜索结果来说特别棒。大的块很难漏掉、容易缩放，提供大的点击区域。
.pagination类，英文是 翻页。 .Previous类，英文是 上、前面。
<nav> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </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="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav>
禁用的和激活的状态
为不同的需要，可以自定义链接。使用.disabled以禁止点击链接，使用.active以指示当前页。
<nav> <ul class="pagination"> <li class="disabled"> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </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="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav>
PS：这例子就比较有实际意义。
1、与之前不同的是，上一页的<li>加上了 .disabled类。不可选中。
2、数字1的<li>加上了 .active类。表示活动。
3、这是让我觉得最赞的地方，是<li class=active>里面的<span class="sr-only">(当前)</span>。
我觉着有些看不到的地方做的到位，比堂而皇之的绚丽页面来的让人欣喜。
PS：上面代码第三行。<a href="#" aria-label="Previous"> 可以 换成<span>一样生效<span aria-label="Previous">。
尺寸
想要更大或更小的分页吗？添加.pagination-lg或.pagination-sm取得额外的尺寸。
<nav> <ul class="pagination pagination-lg"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> <nav> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> <nav> <ul class="pagination pagination-sm"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav>
简单分页
创建快速的上一页/下一页链接，使用亮的标记和样式。它对博客之类的简单站点或杂志来说很棒。
默认示例
默认地，简单分页链接居中。.pager类，英文：分页。
<nav> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </nav>
对齐链接
或者，你可以将链接设置为向两侧对齐：
<nav> <ul class="pager"> <li class="pager-prev"><a href="#">prev</a></li> <li class="pager-next"><a href="#">next</a></li> </ul> </nav>
PS：这里我想说，卢松松的个人博客。他的翻页就是这样的。左右左右的大块的点击。
可选的禁用状态
简单分页同样可以使用.disabled类。
<nav> <ul class="pager"> <li class="pager-prev disabled"><a href="#">prev</a></li> <li class="pager-next"><a href="#">next</a></li> </ul> </nav>
PS：现在学习的样式比较多，有些是没有拼接效果，只能看到一个样子。也许到时候还是需要使用一些JS、JQ去做具体控制吧?