masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial Bootstrap > bootstrap4如何设置进度条

bootstrap4如何设置进度条

(*-*)浩
Lepaskan： 2019-07-27 16:54:38
asal
2823 orang telah melayarinya

bootstrap组件在前端开发中经常会用到，今天本文给大家分享bootstrap组件之进度条的基本用法，需要的朋友参考下吧

bootstrap4如何设置进度条

进度条基本用法（推荐学习：Bootstrap视频教程）

主要依赖.progress和.progress-bar

aria-valuenow表示当前值

aria-valuemin表示最小值

aria-valuemax表示最大值

width:60%表示当前进度条位置

进度条可以显示用户任务的完成过程。

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

添加一个带有 .progress 类的

。

接着，在上面的

内，添加一个带有 class .progress-bar 的空的
。

添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。

实例：

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>
Salin selepas log masuk

更多Bootstrap相关技术文章，请访问Bootstrap教程栏目进行学习！

Atas ialah kandungan terperinci bootstrap4如何设置进度条. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
bootstrap4
Artikel sebelumnya：bootstrap4如何设置模态框 Artikel seterusnya：bootstrap4如何设置弹出框
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kita Penafian Sitemap

© php.cn All rights reserved