基础分页功能

如果你的网页有很多内容，就需要使用分页功能。为了创建一个基础的分页功能，你需要在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;
              

          

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。