如何在Django站点中仅用Bootstrap进度条而不影响全站样式？

要解决这个问题，核心是隔离Bootstrap进度条的CSS作用域，避免其全局样式污染你的自定义CSS。具体步骤如下：

1. 提取并封装Bootstrap进度条核心CSS #

Bootstrap进度条的显示依赖专属CSS规则，但完整的Bootstrap CSS会全局生效。我们只提取进度条相关的核心样式，并给它们添加自定义父级命名空间，让样式仅作用于指定区域：

/* 仅包含Bootstrap 4.0进度条核心样式，带作用域隔离 */
.bootstrap-progress-container .progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}

.bootstrap-progress-container .progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #007bff;
  transition: width 0.6s ease;
}

/* 如需条纹/动画进度条，添加以下样式 */
.bootstrap-progress-container .progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.bootstrap-progress-container .progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
  0% { background-position: 1rem 0; }
  100% { background-position: 0 0; }
}

2. 在模板中隔离进度条区域 #

将包含进度条的表格单元格（或整个表格）用我们定义的命名空间类包裹，确保只有这个区域内的进度条会应用上述样式：

<td class="bootstrap-progress-container">
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">value</div>
    </div>
</td>

3. 加载必要的资源（无需完整Bootstrap CSS） #

在base.html中，只加载jQuery、封装好的进度条CSS，以及bootstrap-progressbar.js（如果需要动态更新进度条功能），不要引入完整的Bootstrap CSS文件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- 内联或引入封装好的进度条CSS -->
<style>
/* 粘贴上述CSS代码 */
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-progressbar/0.8.5/bootstrap-progressbar.min.js" integrity="sha512-ShSScKTSdSD7IiMKfgTdqaEY8gOGm5cNfqMr6Wc5BZvMgc1UveS+UqpS0TNUtRD1CZ9KhmbGtzwUN7HJlXxY8Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

关键说明 #

• bootstrap-progressbar.js仅负责进度条的动态交互（如平滑过渡更新），静态进度条的显示完全依赖CSS，所以必须保留提取的进度条样式。
• 通过命名空间类bootstrap-progress-container，所有进度条相关样式只会作用于该类的子元素，不会影响全站其他元素的自定义CSS。
• 如果需要使用Bootstrap进度条的其他变体（如不同颜色的进度条），只需提取对应颜色的.progress-bar-*样式并添加命名空间即可。

内容的提问来源于stack exchange，提问作者kingx26