bootstrap分页实例php技巧_Bootstrap 分页

文章目录 [+]

分页（Pagination）

下表列出了 Bootstrap 供应的处理分页的 class。

bootstrap分页实例php技巧_Bootstrap 分页

Class描述示例代码.pagination添加该 class 来在页面上显示分页。

<ul class=\"大众pagination\"大众>.disabled, .active您可以自定义链接，通过利用 .disabled 来定义不可点击的链接，通过利用 .active 来指示当前的页面。

<ul class=\"大众pagination\公众>.pagination-lg, .pagination-sm利用这些 class 来获取不同大小的项。

默认的分页

（图片来自网络侵删）

下面的实例演示了上表中所谈论的 class .pagination 的用法：

实例

<ulclass=\"大众pagination\公众><li><ahref=\"大众#\公众>«</a></li><li><ahref=\"大众#\"大众>1</a></li><li><ahref=\"大众#\公众>2</a></li><li><ahref=\"大众#\"大众>3</a></li><li><ahref=\"大众#\"大众>4</a></li><li><ahref=\"大众#\公众>5</a></li><li><ahref=\"大众#\"大众>»</a></li></ul>

结果如下所示：

分页的状态

下面的实例演示了上表中所谈论的 class .disabled、.active 的用法：

实例

<ulclass=\"大众pagination\"大众><li><ahref=\公众#\"大众>«</a></li><liclass=\"大众active\"大众><ahref=\"大众#\"大众>1</a></li><liclass=\"大众disabled\"大众><ahref=\公众#\"大众>2</a></li><li><ahref=\"大众#\"大众>3</a></li><li><ahref=\公众#\"大众>4</a></li><li><ahref=\"大众#\"大众>5</a></li><li><ahref=\"大众#\"大众>»</a></li></ul>

考试测验一下 »

结果如下所示：

分页的大小

下面的实例演示了上表中所谈论的 class .pagination- 的用法：

实例

<ulclass=\公众pagination pagination-lg\公众><li><ahref=\"大众#\"大众>«</a></li><li><ahref=\"大众#\"大众>1</a></li><li><ahref=\"大众#\公众>2</a></li><li><ahref=\"大众#\"大众>3</a></li><li><ahref=\公众#\"大众>4</a></li><li><ahref=\"大众#\"大众>5</a></li><li><ahref=\"大众#\"大众>»</a></li></ul><br><ulclass=\"大众pagination\"大众><li><ahref=\"大众#\公众>«</a></li><li><ahref=\"大众#\"大众>1</a></li><li><ahref=\"大众#\"大众>2</a></li><li><ahref=\"大众#\公众>3</a></li><li><ahref=\公众#\公众>4</a></li><li><ahref=\"大众#\"大众>5</a></li><li><ahref=\公众#\"大众>»</a></li></ul><br><ulclass=\"大众pagination pagination-sm\"大众><li><ahref=\公众#\"大众>«</a></li><li><ahref=\"大众#\公众>1</a></li><li><ahref=\"大众#\"大众>2</a></li><li><ahref=\"大众#\"大众>3</a></li><li><ahref=\"大众#\"大众>4</a></li><li><ahref=\"大众#\"大众>5</a></li><li><ahref=\"大众#\"大众>»</a></li></ul>

结果如下所示：

翻页（Pager）

如果您想要创建一个大略的分页链接为用户供应导航，可通过翻页来实现。
与分页链接一样，翻页也是无序列表。
默认情形下，链接是居中显示。
下表列出了 Bootstrap 处理翻页的 class。

Class描述示例代码.pager添加该 class 来得到翻页链接。

<ul class=\"大众pager\"大众>.previous, .next利用 class .previous 把链接向左对齐，利用.next 把链接向右对齐。

<ul class=\"大众pager\公众>.disabled添加该 class 来得到一个颜色变淡的外不雅观。

默认的翻页

下面的实例演示了上表中所谈论的 class .pager 的用法：

实例

<ulclass=\公众pager\"大众><li><ahref=\"大众#\"大众>Previous</a></li><li><ahref=\"大众#\"大众>Next</a></li></ul>

考试测验一下 »

结果如下所示：

对齐的链接

下面的实例演示了上表中所谈论的 class .previous、.next 的用法：

实例

<ulclass=\"大众pager\"大众><liclass=\公众previous\公众><ahref=\"大众#\"大众>← Older</a></li><liclass=\"大众next\"大众><ahref=\"大众#\"大众>Newer →</a></li></ul>

考试测验一下 »

结果如下所示：

翻页的状态

下面的实例演示了上表中所谈论的 class .disabled 的用法：

实例

<ulclass=\公众pager\公众><liclass=\"大众previous disabled\"大众><ahref=\"大众#\"大众>← Older</a></li><liclass=\公众next\"大众><ahref=\"大众#\公众>Newer →</a></li></ul>

考试测验一下 »

结果如下所示：

分页更多实例

类描述实例.pager一个大略的分页链接，链接居中对齐。
考试测验一下.previous.pager 中上一页的按钮样式，左对齐考试测验一下.next.pager 中下一页的按钮样式，右对齐考试测验一下.disabled禁用链接考试测验一下.pagination分页链接考试测验一下.pagination-lg更大尺寸的分页链接考试测验一下.pagination-sm更小尺寸的分页链接考试测验一下.disabled禁用链接考试测验一下.active当前访问页面链接样式

如您还有不明白的可以不才面与我留言或是与我磋商QQ群308855039，我们一起飞！