cari
Rumahhujung hadapan webhtml tutorialBootstrap各种进度条的实例讲解

Bootstrap各种进度条的实例讲解

Jul 18, 2017 pm 04:43 PM
bootstrapjadual

本章将讲解 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!

Kenyataan
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
Bagaimana anda boleh mengesahkan kod HTML anda?Bagaimana anda boleh mengesahkan kod HTML anda?Apr 24, 2025 am 12:04 AM

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 vs CSS dan JavaScript: Membandingkan Teknologi WebHTML vs CSS dan JavaScript: Membandingkan Teknologi WebApr 23, 2025 am 12:05 AM

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.

Html sebagai bahasa markup: fungsinya dan tujuannyaHtml sebagai bahasa markup: fungsinya dan tujuannyaApr 22, 2025 am 12:02 AM

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.

Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan WebMasa Depan HTML, CSS, dan JavaScript: Trend Pembangunan WebApr 19, 2025 am 12:02 AM

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.

HTML: Struktur, CSS: Gaya, JavaScript: Tingkah LakuHTML: Struktur, CSS: Gaya, JavaScript: Tingkah LakuApr 18, 2025 am 12:09 AM

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: Evolusi dan Trend dalam Reka Bentuk WebMasa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebApr 17, 2025 am 12:12 AM

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.

HTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganHTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganApr 16, 2025 am 12:04 AM

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.

HTML: Adakah bahasa pengaturcaraan atau yang lain?HTML: Adakah bahasa pengaturcaraan atau yang lain?Apr 15, 2025 am 12:13 AM

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

See all articles

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

Video Face Swap

Video Face Swap

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

Alat panas

mPDF

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

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa