时间：2023-06-07 01:54:01 | 来源：网站运营
时间：2023-06-07 01:54:01 来源：网站运营
Bootstrap的分页样式：分页是使用list列表元素构建的，因此屏幕阅读器可以读出链接的数量，使用
在线咨询
<nav>元素将其识别为屏幕阅读器和其它辅助技术的导航组件并提供辅助支持。<nav>提供一个aria-label的描述，以反映其功能。<div class="col"> <ul class="pagination"> <!-- <li class="page-item"><a href="#" class="page-link">上一页</a></li> --> <li class="page-item"><a href="#" class="page-link"><span>«</span></a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <!-- <li class="page-item"><a href="#" class="page-link">下一页</a></li> --> <li class="page-item"><a href="#" class="page-link"><span>»</span></a></li> </ul></div>.active可指引标示当前所在的分页。.disabled使用pointer-events: none来禁用<a>的链接功能。<div class="row mt-5"> <!-- span标签代替a标签，激活以及禁用状态 --> <div class="col"> <ul class="pagination"> <li class="page-item disabled"><span class="page-link">上一页</span></li> <li class="page-item"><span class="page-link">1</span></li> <li class="page-item active"><span class="page-link">2</span></li> <li class="page-item"><span class="page-link">3</span></li> <li class="page-item"><span class="page-link">下一页</span></li> </ul> </div></div>.pagination-lg或.pagination-sm样式定义可以获得大规格或小规格尺寸的分页组件。<!-- 尺寸 --><div class="row mt-5"> <div class="col"> <ul class="pagination pagination-lg"> <li class="page-item"><a href="#" class="page-link">上一页</a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">下一页</a></li> </ul> </div></div><div class="row"> <div class="col"> <ul class="pagination"> <li class="page-item"><a href="#" class="page-link">上一页</a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">下一页</a></li> </ul> </div></div><div class="row"> <div class="col"> <ul class="pagination pagination-sm"> <li class="page-item"><a href="#" class="page-link">上一页</a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">下一页</a></li> </ul> </div></div><!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Bootstrap的分页样式</title></head><body> <div class="container"> <!-- 对齐方式 --> <div class="row mt-5"> <div class="col"> <ul class="pagination justify-content-end"> <li class="page-item"><a href="#" class="page-link">上一页</a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">下一页</a></li> </ul> </div> </div> </div></body></html>关键词：样式
