如何在 Bootstrap 中自定义分页链接？

在许多网站中，我们注意到当我们搜索某些内容时，会显示所有相关内容，但如果内容数量很大，则会使网站更长。

为了解决这个问题，网页中有分页，即内容被分成许多页面，用户点击可以浏览相关内容。

注意：分页用于管理跨多个页面存在的一系列相关内容。

方法：分页类用于在网站上显示分页。使用包装

元素将其标识为屏幕阅读器的导航部分。使用无序列表创建带有链接的页面列表。

下面是在 Bootstrap 中通过自定义实现简单分页的过程。

第 1 步：在所有其他样式表之前将 Bootstrap 和 jQuery CDN 包含到 标记中以加载我们的 CSS。

第2步：

• 为无序列表添加带有
  标签的分页类。添加具有类名page-items 的列表项。
  • 此外，由于页面可能有多个这样的导航部分，因此为
    提供一个描述性的 aria-label 以反映其用途。
  • 要自定义每个页面的链接，只需删除“#”并添加所需的链接。
  • 要将其对齐到中心，请在
    中使用类justify-content-center 。

    HTML

    
        
    
            
    
                Previous
            
              
            
    
                1
            
              
            
    
                2
            
              
            
    
                3
            
              
            
    
                Next
            
        
    

    
    
    
    
    
    
    • 为每个页面添加分页，以确保到前一页的链接比当前页面少一个，并且用户可以轻松地在页面中移动。

    例子：

    HTML

      
    
        
        
        
        
        
        
    
      
    
        GeeksforGeeks
        Contents of Page 3
        
        
            
                
                    Previous
                
                
                    1
                
                
                    2
                
                
                    3
                
            
        
    
      

    Page1.html：如果用户在第 1 页，“下一页”包含指向第 2 页的链接。以下是内容“Page1.html”、“Page2.html”和“Page3.html”的代码

    HTML

      
    
        
        
        
        
        
        
    
      
    
        GeeksForGeeks
        Contents of Page 1
        
        
            
                
                    1
                
                
                    2
                
                
                    3
                
                
                    Next
                
            
        
    
      

    Page2.html：如果用户在第 2 页，“上一页”包含指向第 1 页的链接，“下一页”包含指向第 3 页的链接。

    HTML

      
    
        
        
        
        
        
        
    
      
    
        GeeksforGeeks
        Contents of Page 2
        
        
            
                
                    
                        Previous
                    
                
                
                    1
                
                
                    2
                
                
                    3
                
                
                    
                        Next
                    
                
            
        
    
      

    Page3.html：如果用户在第 3 页，“上一页”页面包含指向第 2 页的链接。

    HTML

      
    
        
        
        
        
        
        
    
      
    
        GeeksforGeeks
        Contents of Page 3
        
        
            
                
                    
                        Previous
                    
                
                
                    1
                
                
                    2
                
                
                    3
                
            
        
    
      

    输出：