【Bootstrap学习 day14】

分页

分页是通过将内容分成单独的页面来组织内容的过程,分页导航一般用于文章列表页,下载列表、图片列表等,由于数据很多,不可能在一页显示,一般分页导航包括上一页,下一页、数字页码等。
基础的分页
要创建一个基本的分页可以在

    元素上添加.pagination类,然后在
  • 元素上添加.page-item类,
  • 元素的标签上添加.page-link类。

    
    

    在这里插入图片描述

    活动状态的分页
    .active类用于“突出显示”当前页面

    
    

    在这里插入图片描述

    禁用状态的分页
    .disabled类用于不可点击的链接

    
    

    在这里插入图片描述
    分页大小
    分页块也可以被调整为更大或更小的尺寸,较大的块添加类.pagination-lg或为较小的块添加.pagination-sm类

    
    
    
    

    【Bootstrap学习 day14】_第1张图片
    分页对齐
    默认情况下,分页水平左对齐。要将其与页面中心对齐,将类.justify-content-center添加到.pagination基类中

    
    

    在这里插入图片描述

    面包屑

    面包屑是一种导航,可在网站或应用程序中向用户指示当前页面的位置。面包屑导航可以极大地增强具有大量页面或复杂导航层次结构的网站的可访问性。
    面包屑导航通过CSS为各导航条目之间自动添加分隔符。使用.breadcrumb类实现。

    
    

    在这里插入图片描述
    默认的面包屑分隔符是/,然而,我们可以使用一些自定义CSS对其进行修改

    .breadcrumb-item + .breadcrumb-item::before{
    	content:">";
    }
    

    折叠

    要隐藏和显示大量内容时,可折叠组件非常有用
    bootstrap5折叠插件基本上需要两个元素才能正常工作——触发元素,如按钮或超链接,以及可折叠元素本身。

    
    

    显示出来的内容

    在这里插入图片描述

    .collapse类只是可折叠元素;通过单机按钮,可显示或隐藏的内容。
    对于元素,您可以使用href属性代替data-bs-target属性:

    折叠按钮
    

    显示出来的内容

    在这里插入图片描述
    默认情况下,可折叠内容时隐藏的。但是,您可以添加.show类来默认显示内容。

    
    

    显示出来的内容

    在这里插入图片描述

    手风琴

    手风琴菜单和小部件广泛用于web应用程序中,主要作用是管理少量区域内的大量内容和导航列表。使用bootstrap5折叠插件,可以创建手风琴来显示或隐藏内容,而无需编写任何javascript代码。

    第一集

    第二集

    第三集

    第一集

    第二集

    第三集

    在这里插入图片描述

    【Bootstrap学习 day14】_第2张图片

你可能感兴趣的:(bootstrap,学习,前端)