bootstrap怎么设置进度条

Freigeben: 2019-07-27 13:51:35
Original
2987 Leute haben es durchsucht

bootstrap怎么设置进度条


1、实现方法如下:

(1)引入bootrap文件:

Nach dem Login kopieren

(2)添加一个

(3)在

中添加一个

Nach dem Login kopieren

aria-valuenow="40"——进度条目前进度值。

aria-valuemax="100"——最大进度值。

aria-valuemin=“0”——最小进度值。

style="width:40%;"——让进度条指在40%的位置。

完整代码如下:

            进度条
            

默认的进度条

Nach dem Login kopieren

以上是实现一个默认进度条,底色的灰色,进度颜色是蓝色,我们还可以在默认进度条的基础上,通过加入不同的样式来实现丰富多彩的进度条。

2、指定颜色.

progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger

Nach dem Login kopieren

2.jpg

3、条纹状,通过在根div添加 progress-striped 即可

Nach dem Login kopieren

4、在根div 添加active,即可实现带动画的进度条。  

Nach dem Login kopieren

推荐:bootstrap入门教程

Das obige ist der detaillierte Inhalt vonbootstrap怎么设置进度条. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!