Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和样式来简化网页设计。在Bootstrap中，进度条是一个常用的元素，用于展示任务或过程的完成状态。在本文中，我们将深入理解Bootstrap进度条的源码，了解如何创建不同的进度条样式。
实现基本的进度条效果需要两个HTML元素：一个外层的`<div>`使用`.progress`类，内部的`<div>`使用`.progress-bar`类。例如：
```html
<div class="progress">
<div class="progress-bar" style="width:40%"></div>
</div>
```
`.progress`类主要负责进度条容器的样式，包括背景色、高度、边距等。默认的样式定义如下：
```css
.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
```
而`.progress-bar`类则设置了实际进度条的样式，包括宽度（通过`width`属性动态调整）、颜色和过渡效果：
```css
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #428bca;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
```
为了创建不同颜色的进度条，Bootstrap提供了预定义的类，如`.progress-bar-info`、`.progress-bar-success`、`.progress-bar-warning`和`.progress-bar-danger`，分别对应蓝色、绿色、黄色和红色的进度条。只需将这些类添加到`.progress-bar`元素上，即可改变进度条的颜色。
```css
.progress-bar-success { background-color: #5cb85c; }
.progress-bar-info { background-color: #5bc0de; }
.progress-bar-warning { background-color: #f0ad4e; }
.progress-bar-danger { background-color: #d9534f; }
```
对于条纹效果的进度条，Bootstrap利用了CSS渐变来实现。添加`.progress-striped`类到`.progress`元素上，或者直接在`.progress-bar`上使用`.progress-bar-striped`，可以创建出带有条纹的进度条：
```css
.progress-striped .progress-bar, .progress-bar-striped {
background-image: -webkit-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-image: -o-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-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);
}
```
动态条纹效果可以通过添加`.active`类到`.progress-striped`元素上实现，条纹会随着进度条的填充方向移动。
如果需要在进度条上显示文字标签，可以将`<span>`或`<div>`元素放入`.progress-bar`内，并设置适当的样式，例如：
```html
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
```
在上面的例子中，`<span>`元素使用了`.sr-only`类，这是一个辅助类，使得文本仅对屏幕阅读器可见，以提供无障碍访问。
Bootstrap的进度条组件非常灵活，可以轻松地通过添加类和调整样式来适应各种需求。无论是简单的进度指示，还是复杂的动画效果，都可以通过源码解析和定制实现。通过理解这些源码，开发者可以更好地控制进度条的外观和行为，提升用户体验。
