Bootstrap 5学习教程，从入门到精通， Bootstrap 5 进度条语法知识点及案例代码（12）
Bootstrap 5 进度条语法知识点及案例代码
Bootstrap 5 提供了强大的进度条组件，用于显示任务的完成进度。
一、Bootstrap 5 进度条语法知识点
1. 基本结构
进度条的基本结构由一个父容器（通常使用 通过设置子元素（ 可以在进度条内部添加文本标签，显示当前进度百分比： Bootstrap 5 提供了多种颜色样式来区分不同类型的进度： 示例： 通过添加 可以在一个 通过设置 使用 Bootstrap 的响应式类，可以根据屏幕尺寸调整进度条的外观。例如，使用 以下是一个综合应用上述知识点的完整案例代码，包含详细注释： 引入 Bootstrap 5 CSS 和 JS 使用 CDN 引入 Bootstrap 5 的 CSS 和 JS 文件，确保进度条组件的样式和功能正常。 自定义样式 为每个进度条示例添加上下间距，使页面更美观。 基本进度条 显示一个基本的进度条，宽度为 25%。 不同颜色的进度条 使用 条纹和动画效果 添加 多重进度条 在一个 高度调整 通过设置 响应式调整 使用 Bootstrap 的响应式类 通过以上语法知识点和案例代码，Bootstrap 5 的进度条组件可以满足多种需求，包括基本进度显示、不同颜色、条纹动画、多重进度条、高度调整以及响应式设计等。初学者可以根据具体需求，灵活运用这些组件，创建出功能丰富且美观的网页界面。class="progress"，子元素使用 class="progress-bar"。
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">div>
div>
2. 设置进度
progress-bar）的 width 属性或使用 style 属性来控制进度。例如，设置进度为 25%：<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">div>
div>
3. 添加标签
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%div>
div>
4. 颜色样式
bg-successbg-infobg-warningbg-dangerbg-primarybg-secondarybg-darkbg-light<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%div>
div>
5. 条纹和动画效果
progress-bar-striped 类可以创建条纹效果，添加 progress-bar-animated 类可以实现动画效果。<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%div>
div>
6. 多重进度条
progress 容器内添加多个 progress-bar，实现多重进度显示。<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%div>
<div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%div>
div>
7. 高度调整
height 属性，可以调整进度条的高度。<div class="progress" style="height: 30px;">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%div>
div>
8. 响应式调整
w-75 类设置宽度为 75%：<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%div>
div>
二、案例代码
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap 5 进度条案例title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 自定义样式（可选） */
.custom-progress {
margin: 20px 0;
}
style>
head>
<body>
<div class="container mt-5">
<h2>Bootstrap 5 进度条示例h2>
<div class="custom-progress">
<h5>基本进度条h5>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%div>
div>
div>
<div class="custom-progress">
<h5>不同颜色的进度条h5>
<div class="progress mb-3">
<div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">成功 (40%)div>
div>
<div class="progress mb-3">
<div class="progress-bar bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">信息 (60%)div>
div>
<div class="progress mb-3">
<div class="progress-bar bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">警告 (80%)div>
div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">危险 (100%)div>
div>
div>
<div class="custom-progress">
<h5>条纹和动画效果h5>
<div class="progress mb-3">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">条纹 (50%)div>
div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">动画条纹 (75%)div>
div>
div>
<div class="custom-progress">
<h5>多重进度条h5>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">前端 (30%)div>
<div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">后端 (20%)div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">数据库 (15%)div>
div>
div>
<div class="custom-progress">
<h5>高度调整h5>
<div class="progress" style="height: 25px;">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">高度 25px (50%)div>
div>
<div class="progress" style="height: 40px; margin-top: 10px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">高度 40px (75%)div>
div>
div>
<div class="custom-progress">
<h5>响应式调整h5>
<div class="progress">
<div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">宽度 50%div>
div>
<div class="progress mt-3">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">宽度 75%div>
div>
<div class="progress mt-3">
<div class="progress-bar w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">宽度 100%div>
div>
div>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
body>
html>
代码说明
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
.custom-progress {
margin: 20px 0;
}
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%div>
div>
bg-success, bg-info, bg-warning, bg-danger 等类来设置进度条的颜色。<div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">成功 (40%)div>
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">动画条纹 (75%)div>
progress-bar-striped 和 progress-bar-animated 类，实现条纹和动画效果。progress 容器内添加多个 progress-bar，实现多重进度显示。<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">前端 (30%)div>
<div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-luamin="0" aria-valuemax="100">后端 (20%)div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">数据库 (15%)div>
div>
style="height: 25px;" 和 style="height: 40px;" 来调整进度条的高度。<div class="progress" style="height: 25px;">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">高度 25px (50%)div>
div>
w-50, w-75, w-100 来设置进度条的宽度。<div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">宽度 50%div>
三、总结