学习Bootstrap 5的第七天

目录

徽章

徽章

实例

上下文徽章

实例

胶囊徽章

实例

元素内的徽章

实例

进度条

基础进度条

实例

进度条高度

实例

彩色进度条

实例

条纹进度条

实例

动画进度条

实例

混合色彩进度条

实例

---

徽章

徽章

在 Bootstrap 中，徽章（Badges）是一种用于突出显示新的、更新的或有未读项的元素。它们通常用于通知用户有新的消息、更新或其他需要关注的内容。

使用徽章的基本方式是将 .badge 类添加到一个 元素上，同时根据需要添加一个背景颜色类，例如 .bg-primary、.bg-secondary、.bg-success 等。注意：徽章会在父元素大小变化时自动调整其大小，这也是一个很方便的特性。

实例

	
		
		
		
		
		
	
	
		

			
徽章
			
h1
			
h2
			
h3
			
h4
			
h5
			
h6
		
	

运行结果：

上下文徽章

使用任意上下文类 (.bg-*) 来更改徽章的颜色。

实例

	
		
		
		
		
		
	
	
		

		  
上下文徽章
		  主要
		  次要
		  成功
		  危险
		  警告
		  信息
		  浅色
		  深色
		
	

运行结果：

胶囊徽章

rounded-pill 类在 Bootstrap 中可以用来创建一个圆形的按钮或徽章。

实例

	
		
		
		
		
		
	
	
		

		  
胶囊徽章
		  主要
		  次要
		  成功
		  危险
		  警告
		  信息
		  浅色
		  深色
		
	

运行结果：

元素内的徽章

实例

	
		
		
		
		
		
	
	
		

			
元素内的徽章
			
				按钮文本主要
			
			
				按钮文本次要
			
			
				按钮文本成功
			
			
				按钮文本危险
			
			
				按钮文本警告
			
			
				按钮文本信息
			
			
				按钮文本浅色
			
			
				按钮文本深色
			
		
	

运行结果：

进度条

基础进度条

进度条可以显示用户任务的完成过程。

创建一个基本的进度条的步骤如下：

1. 添加一个带有 .progress 类的
   。
2. 接着，在上面的
   内，添加一个带有 class="progress-bar" 的空的

   。
3. 添加一个带有百分比表示的宽度的 style 属性，例如 style="width:50%" 表示进度条在 50% 的位置。

实例

	
		
		
		
		
		
	
	
		

			
基础进度条
			

				

					50%
				
			
		
	

运行结果：

进度条高度

进度条的高度通常默认为1rem（或16px），可以通过CSS的height属性来更改。如果想要改变进度条的高度，需要针对进度条（.progress-bar）和进度条的容器（.progress）应用相同的高度值。

实例

	
		
		
		
		
		
	
	
		

			
进度条高度
			

			    
长:40%,高:10px
			  
			  

			  

			    
长:50%,高:20px
			  
			  

			  

			    
长:60%,高:30px
			  
		
	

运行结果：

彩色进度条

默认情况下，进度条为蓝色（主要）。使用任何上下文背景类来更改其颜色。

实例

	
		
		
		
		
		
	
	
		

			
彩色进度条
			

				
10%
			

			

				
20%
			

			

				
30%
			

			

				
40%
			

			

				
50%
			

			

				
60%
			

			

				
70%
			

			

				
80%
			

			

				
90%
			
		
	

运行结果：

条纹进度条

在 Bootstrap 中，使用 .progress-bar-striped 类可以给进度条添加条纹效果。

实例

	
		
		
		
		
		
	
	
		

			
条纹进度条
			

				
10%
			

			

				
20%
			

			

				
30%
			

			

				
40%
			

			

				
50%
			

			

				
60%
			

			

				
70%
			

			

				
80%
			

			

				
90%
			
		
	

运行结果：

动画进度条

在 Bootstrap 中，添加 .progress-bar-animated 类来制作进度条动画。

实例

	
		
		
		
		
		
	
	
		

			
动画进度条
			

				
10%
			

			

				
20%
				
			

			

				
30%
			

			

				
40%
				
			

			

				
50%
				
			

			

				
60%
				
			

			

				
70%
				
			

			

				
80%
				
			

			

				
90%
			
		
	

运行结果：

混合色彩进度条

进度条可以设置多种颜色：

实例

	
		
		
		
		
		
	
	
		

			
混合色彩进度条
			

				
10%
				
20%
				
30%
				
40%
			

			

				
50%
				
50%
			

			

				
50%
				
50%
			

			

				
100%
			
		
	

运行结果：