bootstrap 进度条

最新推荐文章于 2025-10-12 10:12:23 发布

原创最新推荐文章于 2025-10-12 10:12:23 发布 · 372 阅读

0 ·

CC 4.0 BY-SA版权

css总结专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种利用Bootstrap框架创建动态进度条的方法，通过不同的数值来改变进度条的长度，实现了进度显示的功能。该方法适用于展示数据占比或完成度等场景。

由于项目需求需要使用bootstrap 进度条，根据数量的不同从而使进度条的长度发生变化，并且以当前页的最大数量为指数1进行判断。

实例：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<div class="container" style="width:100%;float:right;margin:0;padding:0;clear:both;margin-top:<s:property value="dyHotTopsHeight"/>px">
       <s:if test="hotTopList != null && hotTopList.size() > 0"> 
			    <s:iterator value="hotTopList" var="hot" status="stat">
			     <div  style="width:100%;padding:0;margin:0;">
				      <div style="width:14%;height:10px;;float:left;margin-top:0px;">
				       	   <p style="color:#499BA8;font-family:'微软雅黑';font-size:16px; "><strong><s:property value="name"/></strong></p>
				      </div>
				      <div class="progress" style="width:72%;float:left;height:17px;border-radius:0px;background-color:#001E3B;">
						   <div class="progress-bar" role="progressbar" aria-valuenow="<s:property value="value"/>" aria-valuemin="0" aria-valuemax="100" style="width:<s:property value="percent"/>%;background-color:#063A83;">
						   </div>
						   <span class="sr-only"><s:property value="value"/></span>
					  </div> 
					  <div style="width:10%;height:10px;;float:left;margin-left:10px;">
					   	  <p style="color:#499BA8;font-family:'微软雅黑';font-size:16px; "><s:property value="value"/></p>
					   </div> 
				  </div>
				  <div style="clear:both;margin-bottom:5px"></div>
			    </s:iterator>
		</s:if>
		<s:else>
			<p style="width:300px;">
				    没有符合条件的数据...
			</p>
		</s:else>
</div>