引导中进度条组件的示例分析

　　介绍

这篇文章给大家分享的是有关引导中进度条组件的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等,通过简单、灵活的进度条,可以为当前工作流程或动作提供实时反馈。下面我们来看看引导中的进度条组件。

<>强基本样式

引导框架中对于进度条提供了一个基本样式,一个100%宽度的背景色,然后一个高亮的颜色表示完成进度。其实制作这样的进度条非常容易,一般是使用两个容器,外容器具有一定的宽度,并且设置一个背景颜色,子元素设置一个宽度,比如完成度是30%(也就是父容器的宽度比例值),同时给其设置一个高亮的背景色

引导框架中也是按这样的方式实现的,它提供了两个容器,外容器使用“进步”样式,子容器使用“进度条”样式。其中进步用来设置进度条的容器样式,而进度条用于限制进度条的进度

.progress  { 　　,,身高:20 px; 　　,,margin-bottom: 20 px; 　　,,溢出:隐藏。 　　,,背景颜色:# f5f5f5; 　　,,这个特性:4 px; 　　,,-webkit-box-shadow: inset  0, 1 px  2 px  rgba (0, 0, 0, 1。); 　　,,不必:inset  0, 1 px  2 px  rgba (0, 0, 0, 1。); 　　} 　　.progress-bar  { 　　浮:,才能离开; 　　,,宽度:0; 　　,,身高:100%; 　　,,字体大小:12 px; 　　,,行高:20 px; 　　,,颜色:# fff; 　　,,text-align:中心; 　　,,背景颜色:# 428 bca; 　　,,-webkit-box-shadow: inset  0, 1 px  0, rgba(0, 0, 0,,酒精含量); 　　,,,,,,,,,不必:,inset  0, 1 px  0, rgba(0, 0, 0,,酒精含量); 　　-webkit-transition才能:width  .6s 缓解; 　　,,,,,,,,,的转变:,width  .6s 缓解; 　　} 
 & lt; div 类=皃rogress"比;
　　,,,,,,& lt; div 类=皃rogress-bar",风格=翱矶?“40%;在& lt;/div>
　　& lt;/div>

无障碍性更好的写法如下

& lt; div 类=皃rogress"比; 　　,,,& lt; div 类=皃rogress-bar",风格=翱矶?40%;“,角色=皃rogressbar", aria-valuenow=?0“, aria-valuemin=?“, aria-valuemax=?00“比; 　　,,,,,,,& lt; span 类=皊r-only"在40%,Complete 　　,,,& lt;/div> 　　& lt;/div>

作用属性告诉搜索引擎这个p的作用是进度条;aria-valuenow=?0“属性告知当前进度条的进度为40%;aria-valuemin=?”;属性告知进度条的最小值为0%;aria-valuemax=?00“属性告知进度条的最大值为100%

引导中进度条组件的示例分析

<强>彩色进度条

引导框架中的进度条和警告信息框一样,为了能给用户一个更好的体验,也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条,其主要包括以下四种:

?progress-bar-info:表示信息进度条,进度条颜色为蓝色

?progress-bar-success:表示成功进度条,进度条颜色为绿色

?progress-bar-warning:表示警告进度条,进度条颜色为黄色

?progress-bar-danger:表示错误进度条,进度条颜色为红色

具体使用非常简单,只需要在基础的进度上增加对应的类名即可,彩色进度条与基本进度条相比,就是进度条颜色做了一定的变化

.progress-bar-success  { 　　,,背景颜色:# 5 cb85c; 　　} 　　.progress-bar-info  { 　　,,背景颜色:# 5 bc0de; 　　} 　　.progress-bar-warning  { 　　,,背景颜色:# f0ad4e; 　　} 　　.progress-bar-danger  { 　　,,背景颜色:# d9534f; 　　} 
　　& lt;/div>
　　& lt; div 类=皃rogress"祝辞
　　,,,& lt; div 类=皃rogress-bar  progress-bar-info",风格=翱矶?“60%;在& lt;/div>
　　& lt;/div>
　　& lt; div 类=皃rogress"祝辞
　　,,,& lt; div 类=皃rogress-bar  progress-bar-warning",风格=翱矶?“80%;在& lt;/div>
　　& lt;/div>
　　& lt; div 类=皃rogress"祝辞
　　,,,& lt; div 类=皃rogress-bar  progress-bar-danger",风格=翱矶?“50%;在& lt;/div>
　　& lt;/div>

引导中进度条组件的示例分析

<强>条纹进度条

在引导框架中除了提供了彩色进度条之外,还提供了一种条纹进度条,这种条纹进度条采用CSS3的线性渐变来实现,并未借助任何图片。使用引导框架中的条纹进度条只需要在进度条的容器“进步”基础上增加类名“progress-striped”,当然,如果要让进度条条纹像彩色进度一样,具有彩色效果,只需要在进度条上增加相应的颜色类名

引导中进度条组件的示例分析