Bootstrap3如何实现进度条

2024-04-02 19:04:59 748人浏览安东尼

摘要

这篇文章将为大家详细讲解有关Bootstrap3如何实现进度条，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。基本样式<div class="pr

这篇文章将为大家详细讲解有关Bootstrap3如何实现进度条，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

基本样式

<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >
 <span class="sr-only">60% Complete</span>
 </div>
</div>

自带进度

<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >
 60%
 </div>
</div>

<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" >
 0%
 </div>
</div>
<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" >
 2%
 </div>
</div>

多种颜色

<div class="progress">
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" >
 <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" >
 <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" >
 <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" >
 <span class="sr-only">80% Complete (danger)</span>
 </div>
</div>

条纹

<div class="progress">
 <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" >
 <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" >
 <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" >
 <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" >
 <span class="sr-only">80% Complete (danger)</span>
 </div>
</div>

动态

<div class="progress">
 <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" >
 <span class="sr-only">45% Complete</span>
 </div>
</div>

堆叠

<div class="progress">
 <div class="progress-bar progress-bar-success" >
 <span class="sr-only">35% Complete (success)</span>
 </div>
 <div class="progress-bar progress-bar-warning progress-bar-striped" >
 <span class="sr-only">20% Complete (warning)</span>
 </div>
 <div class="progress-bar progress-bar-danger" >
 <span class="sr-only">10% Complete (danger)</span>
 </div>
</div>

关于“Bootstrap3如何实现进度条”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Bootstrap3如何实现进度条

本文链接: https://www.lsjlt.com/news/69377.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Bootstrap3如何实现进度条

这篇文章将为大家详细讲解有关Bootstrap3如何实现进度条，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。基本样式<div class="pr...

99+

2022-10-19
CSS如何实现进度条和订单进度条

小编给大家分享一下CSS如何实现进度条和订单进度条，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！简单地效果图如下：CSS实现进度条：html结构：<div&...

99+

2023-06-08
html5如何实现进度条

本篇内容主要讲解“html5如何实现进度条”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html5如何实现进度条”吧! 在html5...

99+

2022-10-19
css横向进度条和竖向进度条如何实现

这篇文章将为大家详细讲解有关css横向进度条和竖向进度条如何实现，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。一、横向进度条<html><head><title>横向进...

99+

2023-06-08
Android如何实现pk进度条

要实现Android上的PK进度条，可以使用ProgressBar控件来实现。以下是一个简单的示例：1. 在XML布局文件中添加Pr...

99+

2023-08-12

Android
Jupyter Notebook如何实现进度条

这篇文章主要介绍了Jupyter Notebook如何实现进度条，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。进度条可以使用python外部...

99+

2022-10-19
python实现进度条

import sysimport timedef view_bar(num, total): rate = num / total rate_num = int(rate * 100) r = '\r[%s%s]%d%% ' % ("...

99+

2023-01-31

进度条 python
CSS怎么实现进度条和订单进度条

这篇文章主要讲解了“CSS怎么实现进度条和订单进度条 ”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS怎么实现进度条和订单进度条 ”吧！简单地效果图如下...

99+

2022-10-19
如何在C#中实现进度条

在C#中实现进度条可以使用ProgressBar控件。下面是一个简单的示例代码：```csharpusing System;usin...

99+

2023-09-17

C#
android如何实现圆形进度条

要实现圆形进度条，可以使用Android的自定义控件来实现。首先，在layout文件中定义一个圆形进度条的布局，例如circle_p...

99+

2023-08-20

android
java如何实现进度条显示

在Java中可以通过使用`JProgressBar`类来实现进度条的显示。以下是一个简单的例子，演示了如何在Java中实现进度条的显...

99+

2023-08-24

java
php如何实现下载进度条

本文操作环境：Windows7系统、PHP7.1版、DELL G3电脑php如何实现下载进度条？PHP 远程文件下载的进度条实现download.php<php // 当前文件：download.php $action = @$_G...

99+

2022-03-06

php
Bootstrap如何实现各种进度条

小编给大家分享一下Bootstrap如何实现各种进度条，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一：默认的进度条创建一个基本...

99+

2022-10-19
javascript如何实现网页进度条

这篇文章将为大家详细讲解有关javascript如何实现网页进度条，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。实例代码：<!DOCTYPE html&g...

99+

2022-10-19
如何利用CSS3实现进度条

这篇文章主要介绍了如何利用CSS3实现进度条，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。效果图如下：第一种姿势如下...

99+

2022-10-19
HTML5如何实现进度条特效

这篇文章将为大家详细讲解有关HTML5如何实现进度条特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 <！DOCTY...

99+

2022-10-19
python如何实现一个进度条

这篇文章主要介绍python如何实现一个进度条，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！实现一个进度条from time import sleep ...

99+

2022-10-19
python如何实现普通进度条

这篇文章将为大家详细讲解有关python如何实现普通进度条，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。普通进度条利用打印功能print进行实时刷新显示for ...

99+

2022-10-19
Ajax如何实现加载进度条

这篇文章将为大家详细讲解有关Ajax如何实现加载进度条，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。ajax beforeSend:先说说这个 beforeSend，在请求发送前执行比如可以判断用户...

99+

2023-06-08
AmazeUI如何实现加载进度条

小编给大家分享一下AmazeUI如何实现加载进度条，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！AmazeUI 加载进度条的实现示例，具体如下:<!doct...

99+

2023-06-09