VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >

  • HTML5 教程之Foundation 进度条

Foundation 进度条可以作为程序处理的程度来显示：

我们可以在 <div> 元素中使用 .progress 类来创建进度条，.meter 类用于子元素(<span>)。我们可以在 <span> 元素中设置进度百分比，如下所示：

实例


	
    
		
  1. 
			<div class="progress">
    2. 
		
  2. 
			  <span class="meter" style="width:70%"></span>
    3. 
		
  3. 
			</div>
    4. 
	

	

		复制

	实例预览 »



	进度条颜色



	默认情况下，进度条颜色为蓝色。不同颜色的类为：.secondary, .success, 或 .alert:



	

		实例

	

	
    
		
  1. 
			 <div class="progress">
    2. 
		
  2. 
			  <span class="meter" style="width:50%"></span>
    3. 
		
  3. 
			</div>
    4. 
		
  4. 
			 
    5. 
		
  5. 
			<div class="progress secondary">
    6. 
		
  6. 
			  <span class="meter" style="width:50%"></span>
    7. 
		
  7. 
			</div>
    8. 
		
  8. 
			 
    9. 
		
  9. 
			<div class="progress success">
    10. 
		
  10. 
			  <span class="meter" style="width:50%"></span>
    11. 
		
  11. 
			</div>
    12. 
		
  12. 
			 
    13. 
		
  13. 
			<div class="progress alert">
    14. 
		
  14. 
			  <span class="meter" style="width:50%"></span>
    15. 
		
  15. 
			</div>  
    16. 
	

	

		复制

	实例预览 »



	圆角进度条



	.radius 和 .round 类用于为进度条添加圆角效果：



	

		实例

	

	
    
		
  1. 
			 <div class="progress">
    2. 
		
  2. 
			  <span class="meter" style="width:50%"></span>
    3. 
		
  3. 
			</div>
    4. 
		
  4. 
			 
    5. 
		
  5. 
			<div class="progress radius">
    6. 
		
  6. 
			  <span class="meter" style="width:50%"></span>
    7. 
		
  7. 
			</div>
    8. 
		
  8. 
			 
    9. 
		
  9. 
			<div class="progress rounded">
    10. 
		
  10. 
			  <span class="meter" style="width:50%"></span>
    11. 
		
  11. 
			</div>   
    12. 
	

	

		复制

	实例预览 »



	进度条尺寸



	可以使用 .small-num 或 .large-num 来修改进度条的宽度，num 是一个数字在 1(8.33%) 和 12(default (100%)) 之间:



	

		实例

	

	
    
		
  1. 
			 <div class="progress large-1">
    2. 
		
  2. 
			  <span class="meter" style="width:50%"></span>
    3. 
		
  3. 
			</div>
    4. 
		
  4. 
			 
    5. 
		
  5. 
			<div class="progress large-6">
    6. 
		
  6. 
			  <span class="meter" style="width:50%"></span>
    7. 
		
  7. 
			</div>
    8. 
		
  8. 
			 
    9. 
		
  9. 
			<div class="progress large-9">
    10. 
		
  10. 
			  <span class="meter" style="width:50%"></span>
    11. 
		
  11. 
			</div>
    12. 
		
  12. 
			 
    13. 
		
  13. 
			<div class="progress large-11">
    14. 
		
  14. 
			  <span class="meter" style="width:50%"></span>
    15. 
		
  15. 
			</div>
    16. 
		
  16. 
			 
    17. 
		
  17. 
			<!-- Default width -->
    18. 
		
  18. 
			<div class="progress large-12">
    19. 
		
  19. 
			  <span class="meter" style="width:50%"></span>
    20. 
		
  20. 
			</div> 
    21. 
	

	

		复制

	实例预览 »



	进度条标签



	可以使用 CSS 为进度条添加标签。以下实例中我们添加了<span> 元素来显示百分比：



	

		实例

	

	
    
		
  1. 
			<style>
    2. 
		
  2. 
			.percentage {
    3. 
		
  3. 
			  position: absolute;
    4. 
		
  4. 
			  top: 50%;
    5. 
		
  5. 
			  left: 50%;
    6. 
		
  6. 
			  color: white; 
    7. 
		
  7. 
			  transform: translate(-50%, -50%);
    8. 
		
  8. 
			  font-size: 12px;
    9. 
		
  9. 
			}
    10. 
		
  10. 
			</style>
    11. 
		
  11. 
			 
    12. 
		
  12. 
			<div class="progress">
    13. 
		
  13. 
			  <span class="meter" style="position:relative;width:75%">
    14. 
		
  14. 
			    <span class="percentage">75%</span>
    15. 
		
  15. 
			  </span>
    16. 
		
  16. 
			</div>
    17. 
		
  17. 
			 
    18. 
		
  18. 
			<div class="progress success">
    19. 
		
  19. 
			  <span class="meter" style="position:relative;width:50%">
    20. 
		
  20. 
			    <span class="percentage">50%</span>
    21. 
		
  21. 
			  </span>
    22. 
		
  22. 
			</div>
    23. 
		
  23. 
			 
    24. 
		
  24. 
			<div class="progress alert">
    25. 
		
  25. 
			  <span class="meter" style="position:relative;width:25%">
    26. 
		
  26. 
			    <span class="percentage">25%</span>
    27. 
		
  27. 
			  </span>
    28. 
		
  28. 
			</div>
    29. 
	

	

		复制

	实例预览 »



	 


      



  

  
  

   
    
    
   

  

  
 
 

 
 
  
 
 
 
 






 






相关教程