广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >Bootstrap如何实现各种进度条
  • 822

0
分享到

Bootstrap如何实现各种进度条

2024-04-02 19:04:59 822人浏览 独家记忆
摘要

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

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

一：默认的进度条

创建一个基本的进度条的步骤如下：

  1. 添加一个带有 class .progress 的 <div>。

  2. 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。

  3. 添加一个带有百分比表示的宽度的 style 属性，例如 ; 表示进度条在 60% 的位置。

让我们看看下面的实例：

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 进度条</title>

<link href="/bootstrap/CSS/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">

<script src="/scripts/Jquery.min.js"></script>

<script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<div class="progress">

<div class="progress-bar" role="progressbar" aria-valuenow="60"

aria-valuemin="0" aria-valuemax="100" >

<span class="sr-only">40% 完成</span>

</div>

</div>

 

</body>

</html>

结果如下所示：

 Bootstrap如何实现各种进度条

二：交替的进度条

创建不同样式的进度条的步骤如下：

  1. 添加一个带有 class .progress 的 <div>。

  2. 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。

  3. 添加一个带有百分比表示的宽度的 style 属性，例如 ; 表示进度条在 60% 的位置。

让我们看看下面的实例：

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 交替的进度条</title>

<link href="/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">

<script src="/scripts/jquery.min.js"></script>

<script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

 

<div class="progress">

<div class="progress-bar progress-bar-success" role="progressbar"

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

>

<span class="sr-only">90% 完成（成功）</span>

</div>

</div>

<div class="progress">

<div class="progress-bar progress-bar-info" role="progressbar"

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

>

<span class="sr-only">30% 完成（信息）</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">20% 完成（警告）</span>

</div>

</div>

<div class="progress">

<div class="progress-bar progress-bar-danger" role="progressbar"

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

>

<span class="sr-only">10% 完成（危险）</span>

</div>

</div>

</body>

</html>

结果如下所示：

Bootstrap如何实现各种进度条 

三：条纹的进度条

创建一个条纹的进度条的步骤如下：

  1. 添加一个带有 class .progress 和 .progress-striped 的 <div>。

  2. 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。

  3. 添加一个带有百分比表示的宽度的 style 属性，例如 ; 表示进度条在 60% 的位置。

让我们看看下面的实例：

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 条纹的进度条</title>

<link href="/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">

<script src="/scripts/jquery.min.js"></script>

<script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

 

<div class="progress progress-striped">

<div class="progress-bar progress-bar-success" role="progressbar"

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

>

<span class="sr-only">90% 完成（成功）</span>

</div>

</div>

<div class="progress progress-striped">

<div class="progress-bar progress-bar-info" role="progressbar"

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

>

<span class="sr-only">30% 完成（信息）</span>

</div>

</div>

<div class="progress progress-striped">

<div class="progress-bar progress-bar-warning" role="progressbar"

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

>

<span class="sr-only">20% 完成（警告）</span>

</div>

</div>

<div class="progress progress-striped">

<div class="progress-bar progress-bar-danger" role="progressbar"

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

>

<span class="sr-only">10% 完成（危险）</span>

</div>

</div>

 

</body>

</html>

结果如下所示：

 Bootstrap如何实现各种进度条

四：动画的进度条

创建一个动画的进度条的步骤如下：

  1. 添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active。

  2. 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。

  3. 添加一个带有百分比表示的宽度的 style 属性，例如 ; 表示进度条在 60% 的位置。

这将会使条纹具有从右向左的运动感。

让我们看看下面的实例：

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 动画的进度条</title>

<link href="/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">

<script src="/scripts/jquery.min.js"></script>

<script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

 

<div class="progress progress-striped active">

<div class="progress-bar progress-bar-success" role="progressbar"

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

>

<span class="sr-only">40% 完成</span>

</div>

</div>

 

</body>

</html>

结果如下所示：

 Bootstrap如何实现各种进度条

五：堆叠的进度条

您甚至可以堆叠多个进度条。把多个进度条放在相同的 .progress 中即可实现堆叠，如下面的实例所示：

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 堆叠的进度条</title>

<link href="/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">

<script src="/scripts/jquery.min.js"></script>

<script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

 

<div class="progress">

<div class="progress-bar progress-bar-success" role="progressbar"

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

>

<span class="sr-only">40% 完成</span>

</div>

<div class="progress-bar progress-bar-info" role="progressbar"

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

>

<span class="sr-only">30% 完成（信息）</span>

</div>

<div class="progress-bar progress-bar-warning" role="<a href="Http://www.itxm.net/" target="_blank">progressbar</a>"

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

>

<span class="sr-only">20% 完成（警告）</span>

</div>

</div>

 

</body>

</html>

结果如下所示：

Bootstrap如何实现各种进度条

以上是“Bootstrap如何实现各种进度条”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网node.js频道！

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

--结束END--

本文标题: Bootstrap如何实现各种进度条

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

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

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

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

下载Word文档
去做题
猜你喜欢
  • Bootstrap如何实现各种进度条
    小编给大家分享一下Bootstrap如何实现各种进度条，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一：默认的进度条创建一个基本...
    99+
    2022-10-19
  • Spring Boot+AngularJS+BootStrap如何实现进度条
    小编给大家分享一下Spring Boot+AngularJS+BootStrap如何实现进度条，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！Spring Boot+AngularJS+Bo...
    99+
    2022-10-19
  • 如何使用HTML/CSS实现各类进度条
    这篇文章主要讲解了“如何使用HTML/CSS实现各类进度条”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何使用HTML/CSS实现各类进度条”吧！HTML...
    99+
    2022-10-19
  • bootstrap中如何实现路径导航、分页、进度条
    这篇文章给大家分享的是有关bootstrap中如何实现路径导航、分页、进度条的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。路径导航<ol class="...
    99+
    2022-10-19
  • python实现进度条的多种实现
    有时候在使用Python处理比较耗时操作的时候，为了便于观察处理进度，这时候就需要通过进度条将处理情况进行可视化展示，以便我们能够及时了解情况。这对于第三方库非常丰富的Python来说，想要实现这一功能并不是什么难事...
    99+
    2022-06-02
    python 进度条
  • bootstrap进度条动态加载效果怎么实现
    要实现进度条的动态加载效果，可以使用Bootstrap的进度条组件，并结合JavaScript来更新进度条的值。首先，在HTML中添...
    99+
    2023-08-24
    bootstrap
  • CSS如何实现进度条和订单进度条
    小编给大家分享一下CSS如何实现进度条和订单进度条，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！简单地效果图如下：CSS实现进度条：html结构：<div&...
    99+
    2023-06-08
  • bootstrap如何实现滚动条
    本篇内容介绍了“bootstrap如何实现滚动条”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ ...
    99+
    2022-10-19
  • Bootstrap3如何实现进度条
    这篇文章将为大家详细讲解有关Bootstrap3如何实现进度条，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。基本样式<div class="pr...
    99+
    2022-10-19
  • html5如何实现进度条
    本篇内容主要讲解“html5如何实现进度条”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html5如何实现进度条”吧! 在html5...
    99+
    2022-10-19
  • css横向进度条和竖向进度条如何实现
    这篇文章将为大家详细讲解有关css横向进度条和竖向进度条如何实现，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。一、横向进度条<html><head><title>横向进...
    99+
    2023-06-08
  • BootStrap中如何实现导航条
    这篇文章给大家分享的是有关BootStrap中如何实现导航条的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。一、默认的导航条制作默认的导航条，可分以下几步：1.在ul里加上（ul ...
    99+
    2022-10-19
  • Android如何实现pk进度条
    要实现Android上的PK进度条，可以使用ProgressBar控件来实现。以下是一个简单的示例：1. 在XML布局文件中添加Pr...
    99+
    2023-08-12
    Android
  • Jupyter Notebook如何实现进度条
    这篇文章主要介绍了Jupyter Notebook如何实现进度条，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。进度条可以使用python外部...
    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
  • javascript如何实现网页进度条
    这篇文章将为大家详细讲解有关javascript如何实现网页进度条，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。实例代码：<!DOCTYPE html&g...
    99+
    2022-10-19
  • 如何利用CSS3实现进度条
    这篇文章主要介绍了如何利用CSS3实现进度条，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。效果图如下：  第一种姿势如下...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作