友链交换网站,网页的风格有哪些方面,百度信息流广告怎么收费,观澜小学 网站建设Bootstrap 5 进度条语法知识点及案例代码
Bootstrap 5 提供了强大的进度条组件#xff0c;用于显示任务的完成进度。
一、Bootstrap 5 进度条语法知识点
1. 基本结构
进度条的基本结构由一个父容器#xff08;通常使用 div 元素#xff09;和一个子元素#xf…Bootstrap 5 进度条语法知识点及案例代码
Bootstrap 5 提供了强大的进度条组件用于显示任务的完成进度。
一、Bootstrap 5 进度条语法知识点
1. 基本结构
进度条的基本结构由一个父容器通常使用 div 元素和一个子元素表示进度组成。父容器使用 classprogress子元素使用 classprogress-bar。
div classprogressdiv classprogress-bar roleprogressbar aria-valuenow0 aria-valuemin0 aria-valuemax100/div
/div2. 设置进度
通过设置子元素progress-bar的 width 属性或使用 style 属性来控制进度。例如设置进度为 25%
div classprogressdiv classprogress-bar roleprogressbar stylewidth: 25% aria-valuenow25 aria-valuemin0 aria-valuemax100/div
/div3. 添加标签
可以在进度条内部添加文本标签显示当前进度百分比
div classprogressdiv classprogress-bar roleprogressbar stylewidth: 50% aria-valuenow50 aria-valuemin0 aria-valuemax10050%/div
/div4. 颜色样式
Bootstrap 5 提供了多种颜色样式来区分不同类型的进度
bg-successbg-infobg-warningbg-dangerbg-primarybg-secondarybg-darkbg-light
示例
div classprogressdiv classprogress-bar bg-success roleprogressbar stylewidth: 75% aria-valuenow75 aria-valuemin0 aria-valuemax10075%/div
/div5. 条纹和动画效果
通过添加 progress-bar-striped 类可以创建条纹效果添加 progress-bar-animated 类可以实现动画效果。
div classprogressdiv classprogress-bar progress-bar-striped progress-bar-animated bg-warning roleprogressbar stylewidth: 60% aria-valuenow60 aria-valuemin0 aria-valuemax10060%/div
/div6. 多重进度条
可以在一个 progress 容器内添加多个 progress-bar实现多重进度显示。
div classprogressdiv classprogress-bar bg-success roleprogressbar stylewidth: 40% aria-valuenow40 aria-valuemin0 aria-valuemax10040%/divdiv classprogress-bar bg-warning roleprogressbar stylewidth: 30% aria-valuenow30 aria-valuemin0 aria-valuemax10030%/divdiv classprogress-bar bg-danger roleprogressbar stylewidth: 20% aria-valuenow20 aria-valuemin0 aria-valuemax10020%/div
/div7. 高度调整
通过设置 height 属性可以调整进度条的高度。
div classprogress styleheight: 30px;div classprogress-bar roleprogressbar stylewidth: 50% aria-valuenow50 aria-valuemin0 aria-valuemax10050%/div
/div8. 响应式调整
使用 Bootstrap 的响应式类可以根据屏幕尺寸调整进度条的外观。例如使用 w-75 类设置宽度为 75%
div classprogressdiv classprogress-bar w-75 roleprogressbar aria-valuenow75 aria-valuemin0 aria-valuemax10075%/div
/div二、案例代码
以下是一个综合应用上述知识点的完整案例代码包含详细注释
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleBootstrap 5 进度条案例/title!-- 引入 Bootstrap 5 CSS --link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.3.0/dist/css/bootstrap.min.css relstylesheetstyle/* 自定义样式可选 */.custom-progress {margin: 20px 0;}/style
/head
bodydiv classcontainer mt-5h2Bootstrap 5 进度条示例/h2!-- 基本进度条 --div classcustom-progressh5基本进度条/h5div classprogressdiv classprogress-bar roleprogressbar stylewidth: 25% aria-valuenow25 aria-valuemin0 aria-valuemax10025%/div/div/div!-- 不同颜色的进度条 --div classcustom-progressh5不同颜色的进度条/h5div classprogress mb-3div classprogress-bar bg-success roleprogressbar stylewidth: 40% aria-valuenow40 aria-valuemin0 aria-valuemax100成功 (40%)/div/divdiv classprogress mb-3div classprogress-bar bg-info roleprogressbar stylewidth: 60% aria-valuenow60 aria-valuemin0 aria-valuemax100信息 (60%)/div/divdiv classprogress mb-3div classprogress-bar bg-warning roleprogressbar stylewidth: 80% aria-valuenow80 aria-valuemin0 aria-valuemax100警告 (80%)/div/divdiv classprogressdiv classprogress-bar bg-danger roleprogressbar stylewidth: 100% aria-valuenow100 aria-valuemin0 aria-valuemax100危险 (100%)/div/div/div!-- 条纹和动画效果 --div classcustom-progressh5条纹和动画效果/h5div classprogress mb-3div classprogress-bar progress-bar-striped roleprogressbar stylewidth: 50% aria-valuenow50 aria-valuemin0 aria-valuemax100条纹 (50%)/div/divdiv classprogressdiv classprogress-bar progress-bar-striped progress-bar-animated bg-danger roleprogressbar stylewidth: 75% aria-valuenow75 aria-valuemin0 aria-valuemax100动画条纹 (75%)/div/div/div!-- 多重进度条 --div classcustom-progressh5多重进度条/h5div classprogressdiv classprogress-bar bg-success roleprogressbar stylewidth: 30% aria-valuenow30 aria-valuemin0 aria-valuemax100前端 (30%)/divdiv classprogress-bar bg-warning roleprogressbar stylewidth: 20% aria-valuenow20 aria-valuemin0 aria-valuemax100后端 (20%)/divdiv classprogress-bar bg-danger roleprogressbar stylewidth: 15% aria-valuenow15 aria-valuemin0 aria-valuemax100数据库 (15%)/div/div/div!-- 高度调整 --div classcustom-progressh5高度调整/h5div classprogress styleheight: 25px;div classprogress-bar bg-info roleprogressbar stylewidth: 50% aria-valuenow50 aria-valuemin0 aria-valuemax100高度 25px (50%)/div/divdiv classprogress styleheight: 40px; margin-top: 10px;div classprogress-bar bg-warning roleprogressbar stylewidth: 75% aria-valuenow75 aria-valuemin0 aria-valuemax100高度 40px (75%)/div/div/div!-- 响应式调整 --div classcustom-progressh5响应式调整/h5div classprogressdiv classprogress-bar w-50 roleprogressbar aria-valuenow50 aria-valuemin0 aria-valuemax100宽度 50%/div/divdiv classprogress mt-3div classprogress-bar w-75 roleprogressbar aria-valuenow75 aria-valuemin0 aria-valuemax100宽度 75%/div/divdiv classprogress mt-3div classprogress-bar w-100 roleprogressbar aria-valuenow100 aria-valuemin0 aria-valuemax100宽度 100%/div/div/div/div!-- 引入 Bootstrap 5 JS 和依赖的 Popper.js --script srchttps://cdn.jsdelivr.net/npm/bootstrap5.3.0/dist/js/bootstrap.bundle.min.js/script
/body
/html代码说明 引入 Bootstrap 5 CSS 和 JS link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.3.0/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.3.0/dist/js/bootstrap.bundle.min.js/script使用 CDN 引入 Bootstrap 5 的 CSS 和 JS 文件确保进度条组件的样式和功能正常。 自定义样式 .custom-progress {margin: 20px 0;
}为每个进度条示例添加上下间距使页面更美观。 基本进度条 div classprogressdiv classprogress-bar roleprogressbar stylewidth: 25% aria-valuenow25 aria-valuemin0 aria-valuemax10025%/div
/div显示一个基本的进度条宽度为 25%。 不同颜色的进度条 使用 bg-success, bg-info, bg-warning, bg-danger 等类来设置进度条的颜色。 div classprogress-bar bg-success roleprogressbar stylewidth: 40% aria-valuenow40 aria-valuemin0 aria-valuemax100成功 (40%)/div条纹和动画效果 div classprogress-bar progress-bar-striped progress-bar-animated bg-danger roleprogressbar stylewidth: 75% aria-valuenow75 aria-valuemin0 aria-valuemax100动画条纹 (75%)/div添加 progress-bar-striped 和 progress-bar-animated 类实现条纹和动画效果。 多重进度条 在一个 progress 容器内添加多个 progress-bar实现多重进度显示。 div classprogressdiv classprogress-bar bg-success roleprogressbar stylewidth: 30% aria-valuenow30 aria-valuemin0 aria-valuemax100前端 (30%)/divdiv classprogress-bar bg-warning roleprogressbar stylewidth: 20% aria-valuenow20 aria-luamin0 aria-valuemax100后端 (20%)/divdiv classprogress-bar bg-danger roleprogressbar stylewidth: 15% aria-valuenow15 aria-valuemin0 aria-valuemax100数据库 (15%)/div
/div高度调整 通过设置 styleheight: 25px; 和 styleheight: 40px; 来调整进度条的高度。 div classprogress styleheight: 25px;div classprogress-bar bg-info roleprogressbar stylewidth: 50% aria-valuenow50 aria-valuemin0 aria-valuemax100高度 25px (50%)/div
/div响应式调整 使用 Bootstrap 的响应式类 w-50, w-75, w-100 来设置进度条的宽度。 div classprogress-bar w-50 roleprogressbar aria-valuenow50 aria-valuemin0 aria-valuemax100宽度 50%/div三、总结
通过以上语法知识点和案例代码Bootstrap 5 的进度条组件可以满足多种需求包括基本进度显示、不同颜色、条纹动画、多重进度条、高度调整以及响应式设计等。初学者可以根据具体需求灵活运用这些组件创建出功能丰富且美观的网页界面。
