基础分页功能

如果你的网页有很多内容,就需要使用分页功能。为了创建一个基础的分页功能,你需要在lt;ulgt;元素上添加.pagination类。 lt;ul class"pagination"gt; lt

如果你的网页有很多内容,就需要使用分页功能。为了创建一个基础的分页功能,你需要在lt;ulgt;元素上添加.pagination类。

lt;ul class"pagination"gt;
  lt;ligt;lt;a href"#"gt;1lt;/agt;lt;/ligt;
  lt;ligt;lt;a href"#"gt;2lt;/agt;lt;/ligt;
  lt;ligt;lt;a href"#"gt;3lt;/agt;lt;/ligt;
  lt;ligt;lt;a href"#"gt;4lt;/agt;lt;/ligt;
  lt;ligt;lt;a href"#"gt;5lt;/agt;lt;/ligt;
lt;/ulgt;

当前页面标注

当前页面可以在lt;ligt;元素上加上.current类来标注。例如:

lt;ul class"pagination"gt;
  lt;li class"current"gt;lt;a href"#"gt;1lt;/agt;lt;/ligt;
  lt;ligt;lt;a href"#"gt;2lt;/agt;lt;/ligt;
  lt;ligt;lt;a href"#"gt;3lt;/agt;lt;/ligt;
  lt;ligt;lt;a href"#"gt;4lt;/agt;lt;/ligt;
  lt;ligt;lt;a href"#"gt;5lt;/agt;lt;/ligt;
lt;/ulgt;

禁用分页

如果需要设置某个分页不可点击,可以使用.unavailable类。例如:

lt;ul class"pagination"gt;
  lt;ligt;lt;a href"#"gt;1lt;/agt;lt;/ligt;
  lt;ligt;lt;a href"#"gt;2lt;/agt;lt;/ligt;
  lt;li class"unavailable"gt;lt;a href"#"gt;3lt;/agt;lt;/ligt;
  lt;ligt;lt;a href"#"gt;4lt;/agt;lt;/ligt;
  lt;ligt;lt;a href"#"gt;5lt;/agt;lt;/ligt;
lt;/ulgt;

分页方向符号

在第一个和最后一个lt;ligt;元素上添加.arrow类,可以插入HTML实体符号amp;laquo;和amp;raquo;来创建分页方向符号。例如:

lt;ul class"pagination"gt;
  lt;li class"arrow"gt;lt;a href"#"gt;amp;laquo;lt;/agt;lt;/ligt;
  lt;ligt;lt;a href"#"gt;1lt;/agt;lt;/ligt;
  lt;ligt;lt;a href"#"gt;2lt;/agt;lt;/ligt;
  lt;ligt;lt;a href"#"gt;3lt;/agt;lt;/ligt;
  lt;ligt;lt;a href"#"gt;4lt;/agt;lt;/ligt;
  lt;li class"arrow"gt;lt;a href"#"gt;amp;raquo;lt;/agt;lt;/ligt;
lt;/ulgt;

分页居中显示

如果想要将分页居中显示,可以在lt;ulgt;外层添加lt;divgt;元素,并在lt;divgt;上添加.pagination-centered类。例如:

lt;div class"pagination-centered"gt;
  lt;ul class"pagination"gt;
    lt;li class"arrow"gt;lt;a href"#"gt;amp;laquo;lt;/agt;lt;/ligt;
                        
标签: