Rumah hujung hadapan web Tutorial Bootstrap bootstrap4如何设置进度条

bootstrap4如何设置进度条

Jul 12, 2019 am 10:05 AM

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!

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimanakah saya tetap terkini dengan siaran dan kemas kini bootstrap terkini? Bagaimanakah saya tetap terkini dengan siaran dan kemas kini bootstrap terkini? Mar 14, 2025 pm 07:40 PM

Artikel ini membincangkan strategi untuk terus dikemas kini dengan siaran bootstrap, mengakses dokumentasi rasmi, amalan terbaik untuk integrasi, dan sumber komuniti untuk perbincangan.

Apakah komponen utama kerangka bootstrap (sistem grid, tipografi, komponen, utiliti)? Apakah komponen utama kerangka bootstrap (sistem grid, tipografi, komponen, utiliti)? Mar 14, 2025 pm 07:42 PM

Artikel membincangkan komponen bootstrap utama: sistem grid, tipografi, komponen, dan utiliti. Memberi tumpuan kepada meningkatkan reka bentuk responsif dan penciptaan UI interaktif.

Bagaimana saya mengatasi gaya bootstrap tanpa mengubah fail kerangka teras? Bagaimana saya mengatasi gaya bootstrap tanpa mengubah fail kerangka teras? Mar 14, 2025 pm 07:44 PM

Artikel ini membincangkan kaedah untuk mengatasi gaya Bootstrap menggunakan CSS tersuai, memberi tumpuan kepada mewujudkan fail berasingan, menggunakan kekhususan, dan amalan terbaik untuk organisasi.

Bagaimanakah saya menggunakan sistem grid Bootstrap untuk membuat susun atur responsif untuk saiz skrin yang berbeza? Bagaimanakah saya menggunakan sistem grid Bootstrap untuk membuat susun atur responsif untuk saiz skrin yang berbeza? Mar 14, 2025 pm 07:43 PM

Artikel membincangkan menggunakan sistem grid Bootstrap untuk susun atur responsif merentasi peranti, memperincikan struktur, penyesuaian, dan alat ujian.

Bagaimanakah saya menyesuaikan penampilan dan tingkah laku komponen Bootstrap? Bagaimanakah saya menyesuaikan penampilan dan tingkah laku komponen Bootstrap? Mar 18, 2025 pm 01:06 PM

Artikel membincangkan penyesuaian penampilan dan tingkah laku Bootstrap menggunakan pembolehubah CSS, SASS, CSS adat, JavaScript, dan pengubahsuaian komponen. Ia juga meliputi amalan terbaik untuk mengubahsuai gaya dan memastikan responsif merentasi peranti.

Di mana saya boleh mencari templat dan tema bootstrap? Di mana saya boleh mencari templat dan tema bootstrap? Mar 14, 2025 pm 07:39 PM

Artikel ini membincangkan sumber untuk templat dan tema bootstrap, baik percuma dan premium. Ia meliputi penyesuaian dan menyenaraikan tapak yang bereputasi untuk muat turun.

Bagaimana saya menyumbang kepada komuniti bootstrap? Bagaimana saya menyumbang kepada komuniti bootstrap? Mar 14, 2025 pm 07:38 PM

Artikel ini menggariskan cara untuk menyumbang kepada bootstrap, termasuk penyerahan kod, penambahbaikan dokumentasi, pelaporan pepijat, dan penglibatan masyarakat. Ia menyediakan langkah -langkah terperinci untuk mengemukakan permintaan tarik dan isu pelaporan.

Bolehkah saya menggunakan blok sebaris dalam gambar bootstrap yang berpusat? Bolehkah saya menggunakan blok sebaris dalam gambar bootstrap yang berpusat? Mar 04, 2025 pm 03:06 PM

Artikel ini mengkaji keberkesanan menggunakan blok sebaris untuk memusatkan imej dalam bootstrap. Ia berpendapat bahawa walaupun secara teknikal dilaksanakan, kaedah ini tidak praktikal kerana kerumitan dalam mencapai pusat dan penyelenggaraan menegak responsif

See all articles