欢迎您访问电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
您现在的位置是：首页 > 编程 > 

【Bootstrap】015

2025-07-27 07:07:24
【Bootstrap】015 一、缩略图1、概述通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容；如果你想实现一个类似 Pinterest 的页面效果（不同高度和/宽度的缩略图顺序排列）的话，你需要使用一个第三方插件，比如 Masonry、Isotope 或 Salvattore；2、默认样式的实例Boostrap 缩略图的默认设计仅需最少的标

【Bootstrap】015

一、缩略图

1、概述

通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容；

如果你想实现一个类似 Pinterest 的页面效果（不同高度和/宽度的缩略图顺序排列）的话，你需要使用一个第三方插件，比如 Masonry、Isotope 或 Salvattore；

2、默认样式的实例

Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="row">
		      <div class="col-xs-6 col-md-">
		        <a href="#" class="thumbnail">
		          <img data-src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmvZGluZz0iVVRGLTgiIH0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly9dcudzMubJnLzIwMDAvcZnIiBaWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDEMSAxODAiIHByZXlcnZlQXwZW0UmF0aW89Im5vbmUiPjwhLS0KU291cmlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsbBpbnreSAtIGh0dHA6Ly9pbXreS5jbwotLT48ZGVmcz48cR5bGUgdHlwZT0idGV4dC9jcMiPjwhW0EQVRBWyob2xkZXJfMTc1MDEyMDRjYjIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ubwYWlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xzUwMTIwGiMiI+PHJlYQgd2lkdGg9IjEMSIgaGVpZ2h0PSIxODAiIGZpbGw9IiFRUVFRUUiLz48Zz48dGV4dCB4PSI1OS41MzkwjI1IiB5PSI5C40MDE1jI1Ij4xzF4MTgwPC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true">
		        </a>
		      </div>
		      <div class="col-xs-6 col-md-">
		        <a href="#" class="thumbnail">
		          <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmvZGluZz0iVVRGLTgiIH0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly9dcudzMubJnLzIwMDAvcZnIiBaWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDEMSAxODAiIHByZXlcnZlQXwZW0UmF0aW89Im5vbmUiPjwhLS0KU291cmlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsbBpbnreSAtIGh0dHA6Ly9pbXreS5jbwotLT48ZGVmcz48cR5bGUgdHlwZT0idGV4dC9jcMiPjwhW0EQVRBWyob2xkZXJfMTc1MDExZmQ4YTcgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ubwYWlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xzUwMTFmZDhhyI+PHJlYQgd2lkdGg9IjEMSIgaGVpZ2h0PSIxODAiIGZpbGw9IiFRUVFRUUiLz48Zz48dGV4dCB4PSI1OS41MzkwjI1IiB5PSI5C40MDE1jI1Ij4xzF4MTgwPC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
		        </a>
		      </div>
		      <div class="col-xs-6 col-md-">
		        <a href="#" class="thumbnail">
		          <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmvZGluZz0iVVRGLTgiIH0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly9dcudzMubJnLzIwMDAvcZnIiBaWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDEMSAxODAiIHByZXlcnZlQXwZW0UmF0aW89Im5vbmUiPjwhLS0KU291cmlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsbBpbnreSAtIGh0dHA6Ly9pbXreS5jbwotLT48ZGVmcz48cR5bGUgdHlwZT0idGV4dC9jcMiPjwhW0EQVRBWyob2xkZXJfMTc1MDEyMDQxYTcgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ubwYWlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xzUwMTIwDFhyI+PHJlYQgd2lkdGg9IjEMSIgaGVpZ2h0PSIxODAiIGZpbGw9IiFRUVFRUUiLz48Zz48dGV4dCB4PSI1OS41MzkwjI1IiB5PSI5C40MDE1jI1Ij4xzF4MTgwPC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
		        </a>
		      </div>
		      <div class="col-xs-6 col-md-">
		        <a href="#" class="thumbnail">
		          <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmvZGluZz0iVVRGLTgiIH0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly9dcudzMubJnLzIwMDAvcZnIiBaWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDEMSAxODAiIHByZXlcnZlQXwZW0UmF0aW89Im5vbmUiPjwhLS0KU291cmlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsbBpbnreSAtIGh0dHA6Ly9pbXreS5jbwotLT48ZGVmcz48cR5bGUgdHlwZT0idGV4dC9jcMiPjwhW0EQVRBWyob2xkZXJfMTc1MDExZmVm2EgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ubwYWlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xzUwMTFmZWYYSI+PHJlYQgd2lkdGg9IjEMSIgaGVpZ2h0PSIxODAiIGZpbGw9IiFRUVFRUUiLz48Zz48dGV4dCB4PSI1OS41MzkwjI1IiB5PSI5C40MDE1jI1Ij4xzF4MTgwPC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
		        </a>
		      </div>
		    </div>
	</body>
</html>
运行结果：

、自定义内容

添加一点点额外的标签，就可以把任何类型的 HTML 内容，例如标题、段落或按钮，加入缩略图组件内；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="col-sm-6 col-md-4">
			<div class="thumbnail">
				<img data-src="holder.js/100%x200" alt="100%x200" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmvZGluZz0iVVRGLTgiIH0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly9dcudzMubJnLzIwMDAvcZnIiBaWR0aD0iMjQxIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MSAyMDAiIHByZXlcnZlQXwZW0UmF0aW89Im5vbmUiPjwhLS0KU291cmlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsbBpbnreSAtIGh0dHA6Ly9pbXreS5jbwotLT48ZGVmcz48cR5bGUgdHlwZT0idGV4dC9jcMiPjwhW0EQVRBWyob2xkZXJfMTc1MDEyMjRiDYgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ubwYWlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xzUwMTIyGI0iI+PHJlYQgd2lkdGg9IjI0MSIgaGVpZ2h0PSIyMDAiIGZpbGw9IiFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS4zTE1jI1IiB5PSIxMDUuDA0jgSI+MjQxeDIwMDwvdGV4dD48L2c+PC9nPjwvcZnPg=="
				 data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
				<div class="caption">
					<h>Thumbnail label</h>
					<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
						ullam id dolor id nibh ultricies vehicula ut id elit.</p>
					<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
				</div>
			</div>
		</div>
	</body>
</html>
运行结果：
二、警告框

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息；

1、实例

将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="alert alert-success" role="alert">成功</div>
		<div class="alert alert-info" role="alert">信息</div>
		<div class="alert alert-warning" role="alert">警告</div>
		<div class="alert alert-danger" role="alert">危险</div>
	</body>
</html>
运行结果：

2、可关闭的警告框

为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="alert alert-warning alert-dismissible" role="alert">
		  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		  <strong>Warning!</strong> Better check yourself, you're not looking too good.
		</div>
	</body>
</html>
运行结果：
备注：

、警告框中的链接

用 .alert-link 工具类，可以为链接设置与当前警告框相符的颜；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="alert alert-success" role="alert">
		  <a href="#" class="alert-link">成功</a>
		</div>
		<div class="alert alert-info" role="alert">
		  <a href="#" class="alert-link">信息</a>
		</div>
		<div class="alert alert-warning" role="alert">
		  <a href="#" class="alert-link">警告</a>
		</div>
		<div class="alert alert-danger" role="alert">
		  <a href="#" class="alert-link">危险</a>
		</div>
	</body>
</html>
运行结果：
三、进度条

1、概述

通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈;

2、基本实例

默认样式的进度条；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="progress">
		  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
		    <span class="sr-only">60% Complete</span>
		  </div>
		</div>
	</body>
</html>
运行结果：

、带有提示标签的进度条

将设置了 .sr-only 类的 <span> 标签从进度条组件中移除 类，从而让当前进度显示出来；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="progress">
		  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
		    60%
		  </div>
		</div>
	</body>
</html>
运行结果：

在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性：

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="progress">
		  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
		    60%
		  </div>
		</div>
		<br/>
		<br/>
		<div class="progress">
		  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
		    0%
		  </div>
		</div>
		<div class="progress">
		  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
		    2%
		  </div>
		</div>
	</body>
</html>
运行结果：

4、根据情境变化效果

进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="progress">
		  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
		    <span class="sr-only">40% Complete (success)</span>
		  </div>
		</div>
		<div class="progress">
		  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
		    <span class="sr-only">20% Complete</span>
		  </div>
		</div>
		<div class="progress">
		  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
		    <span class="sr-only">60% Complete (warning)</span>
		  </div>
		</div>
		<div class="progress">
		  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
		    <span class="sr-only">80% Complete (danger)</span>
		  </div>
		</div>
	</body>
</html>
运行结果：

5、条纹效果

通过渐变可以为进度条创建条纹效果，IE9 及更低版本不支持；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="progress">
		  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
		    <span class="sr-only">40% Complete (success)</span>
		  </div>
		</div>
		<div class="progress">
		  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
		    <span class="sr-only">20% Complete</span>
		  </div>
		</div>
		<div class="progress">
		  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
		    <span class="sr-only">60% Complete (warning)</span>
		  </div>
		</div>
		<div class="progress">
		  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
		    <span class="sr-only">80% Complete (danger)</span>
		  </div>
		</div>
	</body>
</html>
运行结果：

6、动画效果

为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="progress">
		  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
		    <span class="sr-only">45% Complete</span>
		  </div>
		</div>
	</body>
</html>
运行结果：

7、堆叠效果

为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持；

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="progress">
		  <div class="progress-bar progress-bar-success" style="width: 5%">
		    <span class="sr-only">5% Complete (success)</span>
		  </div>
		  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
		    <span class="sr-only">20% Complete (warning)</span>
		  </div>
		  <div class="progress-bar progress-bar-danger" style="width: 10%">
		    <span class="sr-only">10% Complete (danger)</span>
		  </div>
		</div>
	</body>
</html>
运行结果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除progressscriptwidthbootstrapclass

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1198397.html

相关标签：无
上传时间： 2025-07-23 11:37:17

上一篇：【Bootstrap】016

下一篇：【Bootstrap】014

推荐阅读

留言与评论（共有 18 条评论）
注册新账号 登录
本站网友 星座查询是阳历还是阴历
2分钟前 发表
initial-scale=1"> <!-- 上述个meta标签*必须*放在最前面
本站网友 老年斑的形成原因
25分钟前 发表
IE9 及更低版本的浏览器不支持；代码演示：代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
本站网友 老钱
22分钟前 发表
需要引入js --> <script src="../js/js"></script> <script src="../js/js"></script> </head> <body> <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <strong>Warning!</strong> Better check yourself
本站网友 孕妇吃橘子好吗
15分钟前 发表
80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div> </body> </html>运行结果：6
本站网友 隆胸的最快方法
18分钟前 发表
100%; display
本站网友 renwu
8分钟前 发表
PD94bWwgdmVyc2lvbj0iMS4wIiBlbmvZGluZz0iVVRGLTgiIH0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly9dcudzMubJnLzIwMDAvcZnIiBaWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDEMSAxODAiIHByZXlcnZlQXwZW0UmF0aW89Im5vbmUiPjwhLS0KU291cmlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsbBpbnreSAtIGh0dHA6Ly9pbXreS5jbwotLT48ZGVmcz48cR5bGUgdHlwZT0idGV4dC9jcMiPjwhW0EQVRBWyob2xkZXJfMTc1MDExZmVm2EgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ubwYWlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xzUwMTFmZWYYSI+PHJlYQgd2lkdGg9IjEMSIgaGVpZ2h0PSIxODAiIGZpbGw9IiFRUVFRUUiLz48Zz48dGV4dCB4PSI1OS41MzkwjI1IiB5PSI5C40MDE1jI1Ij4xzF4MTgwPC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true" style="height
本站网友 炖鸡汤放什么材料好吃
20分钟前 发表
任何其他内容都*必须*跟随其后！ --> <title></title> <!-- 引入bootstrap --> <link rel="stylesheet" href="../css/" /> <!-- 要想实现点击效果
本站网友 京东首关
11分钟前 发表
可以很容易地展示栅格样式的图像
本站网友 雨树林风
30分钟前 发表
egestas eget quam. Donec id elit non mi porta gravida at eget metus. ullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> </body> </html>运行结果：二
本站网友 王庄租房
21分钟前 发表
100%; display
本站网友 宗申动力城
16分钟前 发表
就可以把任何类型的 HTML 内容
本站网友 rrr90
24分钟前 发表
block;" src="data
本站网友 境内游
5分钟前 发表
另外我们还提供了有特殊意义的4个类（例如
本站网友 碧桂园凤凰城南京
0秒前 发表
180px; width
本站网友 小儿支气管哮喘
22分钟前 发表
image/svg+xml;base64
本站网友 openlab
4分钟前 发表
IE9 及更低版本不支持；代码演示：代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
本站网友 尼奥宠物站
30分钟前 发表
PD94bWwgdmVyc2lvbj0iMS4wIiBlbmvZGluZz0iVVRGLTgiIH0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly9dcudzMubJnLzIwMDAvcZnIiBaWR0aD0iMjQxIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MSAyMDAiIHByZXlcnZlQXwZW0UmF0aW89Im5vbmUiPjwhLS0KU291cmlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsbBpbnreSAtIGh0dHA6Ly9pbXreS5jbwotLT48ZGVmcz48cR5bGUgdHlwZT0idGV4dC9jcMiPjwhW0EQVRBWyob2xkZXJfMTc1MDEyMjRiDYgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ubwYWlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xzUwMTIyGI0iI+PHJlYQgd2lkdGg9IjI0MSIgaGVpZ2h0PSIyMDAiIGZpbGw9IiFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS4zTE1jI1IiB5PSIxMDUuDA0jgSI+MjQxeDIwMDwvdGV4dD48L2c+PC9nPjwvcZnPg==" data-holder-rendered="true" style="height