📜  Bootstrap分页

📅  最后修改于: 2020-12-19 02:49:23             🧑  作者: Mango

引导分页

分页用于以有组织的方式对网站的网页进行排序。如果您的网站上有很多网页,则变得非常有必要。

以下是Bootstrap提供的用于处理分页的类的列表。

Class Description
.pagination Add this class to get the pagination on your page.
.disabled,
.active
you can customize links by using .disabled for unclickable links and .active to indicate the current page.
.pagination-lg,
.pagination-sm
use these classes to get different size items.

Bootstrap分页示例

.pagination类添加到

    元素以创建基本的分页。

    请参阅以下示例:

    
    
    
      Bootstrap Example
      
      
      
      
    
    
    
    

    A basic pagination example:

    The .pagination class provides pagination links:

    引导活动状态

    活动状态指定了用户处于活动状态的当前页面。

    .active类用于指定活动状态。

    请参阅以下示例:

    
    
    
      Bootstrap Example
      
      
      
     
    
    
    
    

    Active State Pagination: Example

    Specify the current active state of the user.

    引导程序禁用状态

    禁用状态指定您不能单击链接。

    添加类.disabled以禁用不需要更多的链接。

    请参阅以下示例:

    
    
    
      Bootstrap Example
      
      
      
     
    
    
    
    

    Disabled State Pagination Example:

    Here, 4 and 5 links are disabled.

    自举分页大小

    您也可以相应地增大或减小分页块的大小。

    为大块添加.pagination-lg类,为小块添加.pagination-sm类。

    请参阅以下示例:

    
    
    
      Bootstrap Example
      
      
      
      
    
    
    
    

    Pagination - Sizing

    Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:

    引导面包屑

    这是分页的另一种形式。它指示当前页面在导航层次结构中的位置。

    .breadcrumb类用于创建面包屑。

    请参阅以下示例:

    
    
    
      
      
      
    
    
    
    

    Breadcrumbs Example:

    The .breadcrumb class indicates the current page's location within a navigational hierarchy: