1. <body>
    2.     <div class="container">
    3.         <div class="row mt-5">
    4.             <div class="col">
    5.                 <ul class="pagination">
    6.                     <!-- <li class="page-item"><a href="#" class="page-link">上一页</a></li> -->
    7.                     <li class="page-item"><a href="#" class="page-link"><span>&laquo;</span></a></li>
    8.                     <li class="page-item"><a href="#" class="page-link">1</a></li>
    9.                     <li class="page-item"><a href="#" class="page-link">2</a></li>
    10.                     <li class="page-item"><a href="#" class="page-link">3</a></li>
    11.                     <!-- <li class="page-item"><a href="#" class="page-link">下一页</a></li> -->
    12.                     <li class="page-item"><a href="#" class="page-link"><span>&raquo;</span></a></li>
    13.                 </ul>
    14.             </div>
    16.             <!-- span标签代替a标签，激活以及禁用状态 -->
    17.             <div class="col">
    18.                 <ul class="pagination">
    19.                     <li class="page-item disabled"><span class="page-link">上一页</span></li>
    20.                     <li class="page-item"><span class="page-link">1</span></li>
    21.                     <li class="page-item active"><span class="page-link">2</span></li>
    22.                     <li class="page-item"><span class="page-link">3</span></li>
    23.                     <li class="page-item"><span class="page-link">下一页</span></li>
    24.                 </ul>
    25.             </div>
    26.         </div>
    28.         <!-- 尺寸 -->
    29.         <div class="row mt-5">
    30.             <div class="col">
    31.                 <ul class="pagination pagination-lg">
    32.                     <li class="page-item"><a href="#" class="page-link">上一页</a></li>
    33.                     <li class="page-item"><a href="#" class="page-link">1</a></li>
    34.                     <li class="page-item"><a href="#" class="page-link">2</a></li>
    35.                     <li class="page-item"><a href="#" class="page-link">3</a></li>
    36.                     <li class="page-item"><a href="#" class="page-link">下一页</a></li>
    37.                 </ul>
    38.             </div>
    39.         </div>
    40.         <div class="row">
    41.             <div class="col">
    42.                 <ul class="pagination">
    43.                     <li class="page-item"><a href="#" class="page-link">上一页</a></li>
    44.                     <li class="page-item"><a href="#" class="page-link">1</a></li>
    45.                     <li class="page-item"><a href="#" class="page-link">2</a></li>
    46.                     <li class="page-item"><a href="#" class="page-link">3</a></li>
    47.                     <li class="page-item"><a href="#" class="page-link">下一页</a></li>
    48.                 </ul>
    49.             </div>
    50.         </div>
    51.         <div class="row">
    52.             <div class="col">
    53.                 <ul class="pagination pagination-sm">
    54.                     <li class="page-item"><a href="#" class="page-link">上一页</a></li>
    55.                     <li class="page-item"><a href="#" class="page-link">1</a></li>
    56.                     <li class="page-item"><a href="#" class="page-link">2</a></li>
    57.                     <li class="page-item"><a href="#" class="page-link">3</a></li>
    58.                     <li class="page-item"><a href="#" class="page-link">下一页</a></li>
    59.                 </ul>
    60.             </div>
    61.         </div>
    63.         <!-- 对齐方式 -->
    64.         <div class="row mt-5">
    65.             <div class="col">
    66.                 <ul class="pagination justify-content-end">
    67.                     <li class="page-item"><a href="#" class="page-link">上一页</a></li>
    68.                     <li class="page-item"><a href="#" class="page-link">1</a></li>
    69.                     <li class="page-item"><a href="#" class="page-link">2</a></li>
    70.                     <li class="page-item"><a href="#" class="page-link">3</a></li>
    71.                     <li class="page-item"><a href="#" class="page-link">下一页</a></li>
    72.                 </ul>
    73.             </div>
    74.         </div>
    75.     </div>
    76. </body>