学习Bootstrap 5的第九天

目录

列表组

基础的列表组

实例

活动的列表项

实例

禁用的列表项

实例

链接列表项

实例

移除列表边框

实例

带编号的列表组

实例

水平列表组

实例

多种颜色列表项

实例

多种颜色的链接列表项

实例

带徽章的列表组

实例

列表组案例

实例一

实例二


列表组

基础的列表组

在 Bootstrap 5 中,可以使用类为 .list-group 的

      元素和类为 .list-group-item 的
    1. 元素。这通常用于显示一组有序或无序的项目。

      实例

      
      
      	
      		Bootstrap 实例
      		
      		
      		
      		
      	
      	
      		

      基础的列表组

      • 项目 1
      • 项目 2
      • 项目 3

      1. 项目 1
      2. 项目 2
      3. 项目 3

      运行结果

      学习Bootstrap 5的第九天_第1张图片

      活动的列表项

      在Bootstrap中,可以通过添加一个.active类到

    2. 元素来设置一个激活状态的列表项。这通常用于高亮显示当前选定的列表项。

      注意:这个类可以应用于任何元素,不仅仅是

    3. 元素。你可以根据需要灵活地应用这个类来设置激活状态。

      实例

      
      
      	
      		Bootstrap 实例
      		
      		
      		
      		
      	
      	
      		

      活动状态

      • 项目 1
      • 项目 2
      • 项目 3

      1. 项目 1
      2. 项目 2
      3. 项目 3

      运行结果

      学习Bootstrap 5的第九天_第2张图片

      禁用的列表项

      在Bootstrap中,可以使用.disabled类来设置一个禁用的列表项。这通常用于表示该列表项不可点击或不可用。

      实例

      
      
      	
      		Bootstrap 实例
      		
      		
      		
      		
      	
      	
      		

      禁用的列表项

      • 项目 1
      • 项目 2
      • 项目 3

      1. 项目 1
      2. 项目 2
      3. 项目 3

      运行结果

      学习Bootstrap 5的第九天_第3张图片

      链接列表项

      在Bootstrap中,可以将

        替换为
        替换
      • ,使用.list-group-item-action类来创建一个链接的列表项,并在鼠标悬停时显示灰色背景。

        实例

        
        
        	
        		Bootstrap 实例
        		
        		
        		
        		
        	
        	
        		
        	
        

        在这个示例中,

        元素用于包装链接列表项,元素用于创建链接,并添加了.list-group-item和.list-group-item-action类。当鼠标悬停在链接上时,.list-group-item-action类将添加灰色背景色。

        运行结果学习Bootstrap 5的第九天_第4张图片

        移除列表边框

        在Bootstrap 5中,.list-group-flush类可以用于移除列表的边框和圆角。这个类可以应用于.list-group元素,以创建一个没有边框和圆角的列表组。

        实例

        
        
        	
        		Bootstrap 实例
        		
        		
        		
        		
        	
        	
        		

        移除列表边框

        运行结果学习Bootstrap 5的第九天_第5张图片

        带编号的列表组

        在Bootstrap 5中,可以使用 .list-group-numbered 类创建前面带有数字的列表项。

        实例

        
        
        	
        		Bootstrap 实例
        		
        		
        		
        		
        	
        	
        		

        带编号的列表组

        1. 第一项
        2. 第二项
        3. 第三项
        4. 第四项

        运行结果

        学习Bootstrap 5的第九天_第6张图片

        水平列表组

        在Bootstrap 5中,可以将.list-group-horizontal类添加到 .list-group类中,来创建一个水平列表组,其中列表项水平显示而不是垂直显示。

        实例

        
        
        	
        		Bootstrap 实例
        		
        		
        		
        		
        	
        	
        		

        水平列表组

        1. 第一项
        2. 第二项
        3. 第三项
        4. 第四项
      • 在这个示例中,.list-group-horizontal类被添加到.list-group元素上,以使列表项水平显示。 

        运行结果

        学习Bootstrap 5的第九天_第7张图片

        多种颜色列表项

        在Bootstrap中,可以使用不同的类来设置列表项的颜色。以下是一些可用的类:

        1. .list-group-item-success:设置成功(绿色)背景色。
        2. .list-group-item-secondary:设置次要(灰色)背景色。
        3. .list-group-item-info:设置信息(蓝色)背景色。
        4. .list-group-item-warning:设置警告(黄色)背景色。
        5. .list-group-item-danger:设置危险(红色)背景色。
        6. .list-group-item-dark:设置深色(黑色)背景色。
        7. .list-group-item-light:设置浅色(白色)背景色。

        这些类可以应用于.list-group-item元素,以改变其背景颜色。可以在一个列表项上使用多个颜色类,但请注意,Bootstrap的颜色类会覆盖彼此,因此最后应用的类将决定最终的颜色。

        实例

        
        
        	
        		Bootstrap 实例
        		
        		
        		
        		
        	
        	
        		

        多种颜色列表项

        • 初始项目
        • 成功项目
        • 次要项目
        • 信息项目
        • 警告项目
        • 危险项目
        • 深色项目
        • 浅色项目

运行结果

学习Bootstrap 5的第九天_第8张图片

多种颜色的链接列表项

实例



	
		Bootstrap 实例
		
		
		
		
	
	
		
	

运行结果

学习Bootstrap 5的第九天_第9张图片

带徽章的列表组

在Bootstrap 5中,可以使用.badge类来创建一个徽章,并将其与列表项结合使用。徽章通常用于显示一些额外的信息或标记,例如提示、警告或状态。

实例



	
		Bootstrap 实例
		
		
		
		
	
	
		

带徽章的列表组

  • 项目 1 主要
  • 项目 2 次要

运行结果

列表组案例

实例一



	
		Bootstrap 实例
		
		
		
		
	
	
		
  • 项目 1

    这是项目 1 的描述。

  • 项目 2

    这是项目 2 的描述。

  • 项目 3

    这是项目 3 的描述。

  • 项目 4

    这是项目 4 的描述。

  • 最后的项目(背景色)

运行结果学习Bootstrap 5的第九天_第10张图片

实例二



	
		Bootstrap 实例
		
		
		
		
	
	
		

Bootstrap5列表组综合案例

  • 列表项1

    这是列表项1的描述。

    • 嵌套列表项1
    • 嵌套列表项2
    • 嵌套列表项3
  • 列表项2

    这是列表项2的描述。

    • 嵌套列表项4
    • 嵌套列表项5
    • 嵌套列表项6
  • 列表项3

    这是列表项3的描述。

    • 嵌套列表项7
    • 嵌套列表项8
    • 嵌套列表项9

运行结果

学习Bootstrap 5的第九天_第11张图片

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