本章将讲解 Bootstrap 进度条。在本教程中,您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。
Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画。
默认的进度条
创建一个基本的进度条的步骤如下:
添加一个带有 class .progress 的 dc6dce4a544fdca2df29d5ac0ea9906b。
接着,在上面的 dc6dce4a544fdca2df29d5ac0ea9906b 内,添加一个带有 class .progress-bar 的空的 dc6dce4a544fdca2df29d5ac0ea9906b。
添加一个带有百分比表示的宽度的 style 属性,例如 style="60%"; 表示进度条在 60% 的位置。
让我们看看下面的实例:
实例
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span class="sr-only">40% 完成</span> </div></div>
基本样式
Bootstrap框架中对于进度条提供了一个基本样式,一个100%宽度的背景色,然后一个高亮的颜色表示完成进度。其实制作这样的进度条非常容易,一般是使用两个容器,外容器具有一定的宽度,并且设置一个背景颜色,子元素设置一个宽度,比如完成度是30%(也就是父容器的宽度比例值),同时给其设置一个高亮的背景色
Bootstrap框架中也是按这样的方式实现的,它提供了两个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式,而progress-bar用于限制进度条的进度
.progress { height: 20px; margin-bottom: 20px; overflow: hidden; background-color: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); }.progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: #428bca; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); -webkit-transition: width .6s ease; transition: width .6s ease; }
b8201876fc96a5058af18d6629bf1b0e 6708c431ccdba4242fbfa419c9b36f9616b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
无障碍性更好的写法如下
b8201876fc96a5058af18d6629bf1b0e9d99875cf552fcccb61087048cf5934b64952123ee1a1d9b385bc3bca58612f040% Complete54bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
role属性告诉搜索引擎这个div的作用是进度条;aria-valuenow="40"属性告知当前进度条的进度为40%;aria-valuemin="0"属性告知进度条的最小值为0%;aria-valuemax="100"属性告知进度条的最大值为100%
彩色进度条
Bootstrap框架中的进度条和警告信息框一样,为了能给用户一个更好的体验,也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条,其主要包括以下四种:
☑ progress-bar-info:表示信息进度条,进度条颜色为蓝色
☑ progress-bar-success:表示成功进度条,进度条颜色为绿色
☑ progress-bar-warning:表示警告进度条,进度条颜色为黄色
☑ progress-bar-danger:表示错误进度条,进度条颜色为红色
具体使用非常简单,只需要在基础的进度上增加对应的类名即可,彩色进度条与基本进度条相比,就是进度条颜色做了一定的变化
.progress-bar-success { background-color: #5cb85c; }.progress-bar-info { background-color: #5bc0de; }.progress-bar-warning { background-color: #f0ad4e; }.progress-bar-danger { background-color: #d9534f; }
b8201876fc96a5058af18d6629bf1b0e014be70db3966d949d52cfc8c08715e916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0ee8b20786e3a3bd8c1a143e1b9dcb1a0516b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e890e49b3313bbdeea090722d783f029916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e357b2aa43d41338b44e3a554d67e03bd16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
条纹进度条
在Bootstrap框架中除了提供了彩色进度条之外,还提供了一种条纹进度条,这种条纹进度条采用CSS3的线性渐变来实现,并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”,当然,如果要让进度条条纹像彩色进度一样,具有彩色效果,只需要在进度条上增加相应的颜色类名
[注意]通过渐变可以为进度条创建条纹效果,IE9-浏览器不支持
.progress-striped .progress-bar { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-size: 40px 40px; }
.progress-striped .progress-bar-success { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); }.progress-striped .progress-bar-info { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); }.progress-striped .progress-bar-warning { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); }.progress-striped .progress-bar-danger { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); }
3a8b4b7f756725c3a8015596652629dcd3a8cd28dd0113c1803d2db27c9892d916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba683a8b4b7f756725c3a8015596652629dc014be70db3966d949d52cfc8c08715e916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba683a8b4b7f756725c3a8015596652629dce8b20786e3a3bd8c1a143e1b9dcb1a0516b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba683a8b4b7f756725c3a8015596652629dc890e49b3313bbdeea090722d783f029916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba683a8b4b7f756725c3a8015596652629dc357b2aa43d41338b44e3a554d67e03bd16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
动态条纹
为了让条纹进度条动起来,Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画,这个动画主要做了一件事,就是改变背景图像的位置,也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的,而linear-gradient实现的正是对应背景中的背景图片
[注意]IE9-浏览器不支持
@-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to {background-position: 0 0; }} @keyframes progress-bar-stripes { from { background-position: 40px 0; } to {background-position: 0 0; }}
在Bootstrap框架中,通过给进度条容器“progress”添加一个类名“active”,并让文档加载完成就触“progress-bar-stripes”动画生效,使其呈现出由右向左运动的动画效果
.progress.active .progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; }
da7fee9992280785cbb141b7b5e9ce54d3a8cd28dd0113c1803d2db27c9892d916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68da7fee9992280785cbb141b7b5e9ce54014be70db3966d949d52cfc8c08715e916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68da7fee9992280785cbb141b7b5e9ce54e8b20786e3a3bd8c1a143e1b9dcb1a0516b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68da7fee9992280785cbb141b7b5e9ce54890e49b3313bbdeea090722d783f029916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68da7fee9992280785cbb141b7b5e9ce54357b2aa43d41338b44e3a554d67e03bd16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
层叠进度条
Bootstrap框架除了提供上述几种进度条之外,还提供了一种层叠进度条。层叠进度条可以将不同状态的进度条放置在一起,按水平方式排列
把多个进度条放入同一个 .progress
中,使它们呈现堆叠的效果
b8201876fc96a5058af18d6629bf1b0e 7f809a2d1738ac40f771f8de45f90c1464952123ee1a1d9b385bc3bca58612f035% Complete (success)54bdf357c58b8a65c66d7c19c8e4d114 16b28748ea4df4d9c2150843fecfba68 695093a9fbb94d989f8d2b1cfdfdf83664952123ee1a1d9b385bc3bca58612f020% Complete (warning)54bdf357c58b8a65c66d7c19c8e4d114 16b28748ea4df4d9c2150843fecfba68 70f0568bf8bd95907c2e4a17779872a264952123ee1a1d9b385bc3bca58612f010% Complete (danger)54bdf357c58b8a65c66d7c19c8e4d114 16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
[注意]层叠的进度条之和不能大于100%
b8201876fc96a5058af18d6629bf1b0e ab4220bd441a1f0392067f147af09e9816b28748ea4df4d9c2150843fecfba68 64a3a6ae05df329d95792612c59b877c16b28748ea4df4d9c2150843fecfba68 8b5d5c690bf4e2e60a71f472e69f82a216b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
提示标签
在实际开发中,有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值,Bootstrap考虑了这种使用场景,只需要在进度条中添加需要的值
b8201876fc96a5058af18d6629bf1b0e2280bf5905e2e71bbdea92945e22be8a20%16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
在展示很低的百分比时,如果需要让文本提示能够清晰可见,可以为进度条设置 min-width
属性
b8201876fc96a5058af18d6629bf1b0ec02538b6b470d7f3269c5214ddb106000%16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e99d28bbb7f49eaebba7b3b32372f31030%16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e586f34b1d57516e3df8ed2b1a3e08cc41%16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e99d28bbb7f49eaebba7b3b32372f31031%16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
Atas ialah kandungan terperinci Bootstrap各种进度条的实例讲解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kod HTML boleh menjadi bersih dengan pengesahan dalam talian, alat bersepadu dan proses automatik. 1) Gunakan W3CMarkupValidationService untuk mengesahkan kod HTML dalam talian. 2) Pasang dan konfigurasikan sambungan HTMLHINT dalam visualStudiocode untuk pengesahan masa nyata. 3) Gunakan HTMLTidy untuk mengesahkan dan membersihkan fail HTML secara automatik dalam proses pembinaan.

HTML, CSS dan JavaScript adalah teknologi teras untuk membina laman web moden: 1. HTML mentakrifkan struktur laman web, 2. CSS bertanggungjawab untuk kemunculan laman web, 3.

Fungsi HTML adalah untuk menentukan struktur dan kandungan laman web, dan tujuannya adalah untuk menyediakan cara yang standard untuk memaparkan maklumat. 1) HTML menganjurkan pelbagai bahagian laman web melalui tag dan atribut, seperti tajuk dan perenggan. 2) Ia menyokong pemisahan kandungan dan prestasi dan meningkatkan kecekapan penyelenggaraan. 3) HTML adalah diperpanjang, membolehkan tag tersuai untuk meningkatkan SEO.

Trend masa depan HTML adalah semantik dan komponen web, trend masa depan CSS adalah CSS-in-JS dan CSShoudini, dan trend masa depan JavaScript adalah webassembly dan tanpa pelayan. 1. Semantik HTML meningkatkan kebolehcapaian dan kesan SEO, dan komponen web meningkatkan kecekapan pembangunan, tetapi perhatian harus dibayar kepada keserasian penyemak imbas. 2. CSS-in-JS meningkatkan fleksibiliti pengurusan gaya tetapi boleh meningkatkan saiz fail. Csshoudini membolehkan operasi langsung rendering CSS. 3.Webassembly mengoptimumkan prestasi aplikasi penyemak imbas tetapi mempunyai keluk pembelajaran yang curam, dan tanpa pelayan memudahkan pembangunan tetapi memerlukan pengoptimuman masalah permulaan sejuk.

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.

Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

PhpStorm versi Mac
Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa