📜  引导程序4 |分页

📅  最后修改于: 2021-05-25 16:38:27             🧑  作者: Mango

分页用于启用网站页面之间的导航。 Bootstrap中使用的分页具有大量的连接链接,这些链接很难错过并且易于扩展。

基本分页:

基本分页可以使用以下类指定。

  • .pagination类用于在列表组上指定分页。
  • .page-item类用于指定组中的每个分页项。
  • .page-link类用于指定分页项中的链接。

例子:




      
        Bootstrap 4 | Pagination
     
     
    
     
        
     
        
     
        
     
  

    
        

Bootstrap 4 | Basic Pagination

                    
                                
  •                                     Previous             
  •                             
  •                 1             
  •             
  •                 2             
  •             
  •                 3             
  •             
  •                 Next             
  •         
    

输出:

基本分页

禁用状态:

通过使用.disabled类,可以对分页链接进行样式设置,以使其显示为不可单击。这可用于禁用“上一个”或“下一个”按钮。

.disabled类在内部使用’pointer-events:none’来使链接不可单击,但是,由于并非始终实现此规范,因此最好通过设置’tabindex’属性使其无法导航到至-1。此属性控制是否可以使用Tab键浏览元素。

例子:




      
Bootstrap 4 | Pagination
 
 
    
 
        
 
        
 
        
 
  

    
        

Bootstrap 4 | Pagination Disabled State

                    
                                
  •                                     Previous             
  •             
  • 1
  •             
  •                 2             
  •             
  • 3
  •             
  •                 Next             
  •         
    

输出:

分页

活动状态:

通过使用分页项上的.active类,可以将分页链接的样式设置为突出显示为当前活动页面。

例子:




      
Bootstrap 4 | Pagination
 
 
    
 
        
 
        
 
        
 
  

    
        

Bootstrap 4 | Pagination Active State

                    
                
  •                 Previous             
  •             
  • 1
  •                
  • 2
  •                             
  •                 3             
  •                            
  •                 Next             
  •         
    

输出:

主动分页

确定分页组的大小:

通过使用其他类别,可以使分页组更大或更小。输入组有3种可能的大小。

  • .pagination-sm类用于较小的大小。
  • .pagination-lg类用于更大的尺寸。
  • .pagination类是默认大小。

例子:




      
Bootstrap 4 | Pagination
 
 
    
 
        
 
        
 
        
 
  

    
        

Bootstrap 4 | Pagination Sizing

        Large Pagination                     
                
  •                 Previous             
  •             
  •                 1             
  •             
  •                 2             
  •             
  •                 3             
  •             
  •                 Next             
  •         
           Small Pagination                     
                
  •                 Previous             
  •             
  •                 1             
  •             
  •                 2             
  •             
  •                 3             
  •             
  •                 Next             
  •         
           Normal Pagination                     
                
  •                 Previous             
  •             
  •                 1             
  •             
  •                 2             
  •             
  •                 3             
  •             
  •                 Next             
  •         
    

输出:

大小分页

分页组的对齐方式:

通过使用flexbox实用程序类,可以将分页组右对齐或居中对齐。

  • .justify-content-center类用于将组与中心对齐。
  • .justify-content-end类用于将组右对齐。

例子:




      
Bootstrap 4 | Pagination
 
 
    
 
        
 
        
 
        
 
  

    
        

Bootstrap 4 | Pagination Alignment

        Align to the center                     
                
  •                 Previous             
  •             
  •                 1             
  •             
  •                 2             
  •             
  •                 3             
  •             
  •                 Next             
  •         
        Align to the right                     
                
  •                 Previous             
  •             
  •                 1             
  •             
  •                 2             
  •             
  •                 3             
  •             
  •                 Next             
  •         
    

输出:

对齐分页