Thanh tiến trình trong Bootstrap 4 – thanh tiến trình bootstrap 4

Progress Bar trong Bootstrap

Progress Bar trong Bootstrap (hay còn gọi là thanh tiến trình) là một thanh được sử dụng để hiển thị cho người dùng xem họ đã đi được bao xa trong một quá trình.

Bootstrap cung cấp một số loại thanh tiến trình.

Tạo Progress Bar trong Bootstrap

Để tạo thanh tiến trình trong Bootstrap, đơn giản bạn chỉ cần thêm lớp .progress làm phần tử chứa và lớp .progress-bar để thêm các phần tử con. Sau đây là ví dụ tạo một thanh tiến trình đơn giản với tiến độ thực hiện được là 70%.

Basic Progress Bar

70% Complete

 
<
html
 
lang
=
"en"
>

<
head
>

<
title
>
Bootstrap Example
</
title
>

<
meta
 
charset
=
"utf-8"
>

<
meta
 
name
=
"viewport"
 
content
=
"width=device-width, initial-scale=1"
>

<
link
 
rel
=
"stylesheet"
 
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
>

<
script
 
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
>
</
script
>

<
script
 
src
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
>
</
script
>

</
head
>

<
body
>

<
div
 
class
=
"container"
>

<
h2
>
Basic Progress Bar
</
h2
>

<
div
 
class
=
"progress"
>

<
div
 
class
=
"progress-bar"
 
role
=
"progressbar"
 
aria-valuenow
=
"70"
 
aria-valuemin
=
"0"
 
aria-valuemax
=
"100"
 
style
=
"width:70%"
>

<
span
 
class
=
"sr-only"
>
70% Complete
</
span
>

</
div
>

</
div
>

</
div
>

</
body
>

</
html
>

Code language:
 
HTML, XML
 
(
xml
)

Lưu ý:

• Thanh tiến trình không được hỗ trợ trong Internet Explorer 9 trở về trước.
• Để giúp cải thiện khả năng tiếp cận cho những người sử dụng trình đọc màn hình, bạn nên bao gồm các thuộc tính aria- *.

Chiều cao của Progress Bar trong Bootstrap

Trong Bootstrap 4, mặc định chiều cao là 16px. Bạn có thể sử dụng thuộc tính height trong CSS để điều chỉnh, lưu ý đặt cùng 1 giá trị height cho phần tử chứa và phần tử con thanh tiến trình.

 
<
html
 
lang
=
"en"
>

<
head
>

<
title
>
Bootstrap Example
</
title
>

<
meta
 
charset
=
"utf-8"
>

<
meta
 
name
=
"viewport"
 
content
=
"width=device-width, initial-scale=1"
>

<
link
 
rel
=
"stylesheet"
 
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
>

<
script
 
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
>
</
script
>

<
script
 
src
=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"
>
</
script
>

<
script
 
src
=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
>
</
script
>

</
head
>

<
body
>

<
div
 
class
=
"container"
>

<
h2
>
Chiều cao thanh tiến trình
</
h2
>

<
p
>
Chiều cao mặc định của thanh tiến trình là 1rem (16px). Bạn có thể thay đổi thuộc tính height để thay đổi chiều cao:
</
p
>
 
<
div
 
class
=
"progress"
 
style
=
"height:20px"
>

<
h6
>
Chiều cao thanh tiến trình 20px
</
h6
>

<
div
 
class
=
"progress-bar"
 
style
=
"width:40%;height:20px"
>
</
div
>

</
div
>

<
br
>

<
div
 
class
=
"progress"
 
style
=
"height:30px"
>

<
h6
>
Chiều cao thanh tiến trình 30px
</
h6
>

<
div
 
class
=
"progress-bar"
 
style
=
"width:50%;height:30px"
>
</
div
>

</
div
>

<
br
>

<
div
 
class
=
"progress"
 
style
=
"height:45px"
>

<
h6
>
Chiều cao thanh tiến trình 45px
</
h6
>

<
div
 
class
=
"progress-bar"
 
style
=
"width:60%;height:45px"
>
</
div
>

</
div
>

</
div
>

</
body
>

</
html
>
Code language:
 
HTML, XML
 
(
xml
)

Gán nhãn tên cho Progress Bar trong Bootstrap

Bạn có thể thêm nhãn cho thanh tiến trình đơn giản như ví dụ sau. Xóa lớp .sr-only khỏi thanh tiến trình để hiển thị phần trăm hiển thị:

Progress Bar With Label

70%

 
<
html
 
lang
=
"en"
>

<
head
>

<
title
>
Bootstrap Example
</
title
>

<
meta
 
charset
=
"utf-8"
>

<
meta
 
name
=
"viewport"
 
content
=
"width=device-width, initial-scale=1"
>

<
link
 
rel
=
"stylesheet"
 
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
>

<
script
 
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
>
</
script
>

<
script
 
src
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
>
</
script
>

</
head
>

<
body
>

<
div
 
class
=
"container"
>

<
h2
>
Progress Bar With Label
</
h2
>

<
div
 
class
=
"progress"
>

<
div
 
class
=
"progress-bar"
 
role
=
"progressbar"
 
aria-valuenow
=
"70"
 
aria-valuemin
=
"0"
 
aria-valuemax
=
"100"
 
style
=
"width:70%"
>

70%
</
div
>

</
div
>

</
div
>

</
body
>

</
html
>

Code language:
 
HTML, XML
 
(
xml
)

Chèn màu cho Progress Bar trong Bootstrap

Theo mặc định thì thanh tiến trình có màu xanh dương (blue), tuy nhiên bạn có thể thêm màu khác cho thanh tiến trình bằng cách dùng các lớp như .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-white, .bg-secondary, .bg-light, và .bg-dark.

Colored Progress Bars

The contextual classes colors the progress bars:

40% Complete (success)

50% Complete (info)

60% Complete (warning)

70% Complete (danger)

 
<
html
 
lang
=
 "vi" 
 & gt; 

 & lt; 
 head 
 & gt; 

 & lt; 
 title 
 & gt; 
 Ví dụ về Bootstrap 
 & lt; / 
 title 
 & gt; 

 & lt; 
 meta 
 
 bộ ký tự 
 = 
" utf-8 "
 & gt; 

 & lt; 
 meta 
 
 name 
 = 
" viewport "
 
 content 
 = 
" width = device-width, initial-scale = 1 "< / p> & gt; 
 & lt; 
 liên kết 
 
 rel 
 = 
" stylesheet "
 
 href 
 = 
" https://maxcdn.bootstrapcdn.com/bootstrap/3.4 .1 / css / bootstrap.min.css "
 & gt; 

 & lt; 
 script 
 
 src 
 = 
" https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js "
 & gt; 
 
 & lt; / 
 script 
 & gt; 

 & lt; 
 script 
 
 src 
 = 
" https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js "
 & gt; 
 
 & lt; / 
 script 
 & gt; 

 & lt; / 
 head 
 & gt; 

 & lt; 
 body 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" container "
 & gt; 

 & lt; 
 h2 
 & gt; 
 Thanh tiến trình có màu 
 & lt; / < p class = "hljs-name"> h2 
 & gt; 

 & lt; 
 p 
 & gt; 
 Các lớp ngữ cảnh tô màu cho các thanh tiến trình: 
 & lt; / 
 p 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" tiến trình "
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" process-bar process-bar-success "
 
 role 
 = 
" processbar "
 
 aria-valuenow 
 = 
 "40" 
 
 aria-valuemin  = 
 "0" 
 
 aria-valuemax 
 = 
 "100 "
 
 style 
 = 
" width: 40% "
 & gt; 

40% Hoàn thành (thành công)
 & lt; / 
 div 
 & gt; 

 & lt; / 
 div 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" tiến trình "
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" process-bar process-bar-info "
 
 role 
 = 
" processbar "
 
 aria-valuenow 
 = 
 "50" 
 
 aria-valuemin  = 
 "0" 
 
 aria-valuemax 
 = 
 "100 "
 
 style 
 = 
" width: 50% "
 & gt; 

Hoàn thành 50% (thông tin)
 & lt; / 
 div 
 & gt; 

 & lt; / 
 div 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" tiến trình "
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" process-bar process-bar-warning "
 
 role 
 = 
" processbar "
 
 aria-valuenow 
 = 
 "60" 
 
 aria-valuemin  = 
 "0" 
 
 aria-valuemax 
 = 
 "100 "
 
 style 
 = 
" width: 60% "
 & gt; 

Hoàn thành 60% (cảnh báo)
 & lt; / 
 div 
 & gt; 

 & lt; / 
 div 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" tiến trình "
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" process-bar process-bar-risk "
 
 role 
 = 
" processbar "
 
 aria-valuenow 
 = 
 "70" 
 
 aria-valuemin  = 
 "0" 
 
 aria-valuemax 
 = 
 "100 "
 
 style 
 = 
" width: 70% "
 & gt; 

70% Hoàn thành (nguy hiểm)
 & lt; / 
 div
 & gt; 

 & lt; / 
 div 
 & gt; 

 & lt; / 
 div 
 & gt; 

 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 

 
 
 Ngôn ngữ mã: 
 
 HTML, XML 
 
 (
 
 xml 
 
) 
 

Tạo vạch cho Thanh tiến trình trong Bootstrap

Để tạo vạch (cross), bạn có thể thêm lớp .progress-bar-sọc vào tiến trình thanh.

Thanh tiến trình có sọc

< p> Lớp .progress-bar-sọc thêm các sọc vào thanh tiến trình:

40% Hoàn thành (thành công)

Hoàn thành 50% (thông tin)

Hoàn thành 60% (cảnh báo)

70% Hoàn thành (nguy hiểm)

 
 
 & lt; 
 html 
 
 lang 
 = 
" vi "
 & gt; 

 & lt; 
 head 
 & gt; 

 & lt; 
 title 
 & gt; 
 Ví dụ về Bootstrap 
 & lt; / 
 title 
 & gt; 

 & lt; 
 meta 
 
 bộ ký tự 
 = 
" utf-8 "
 & gt; 

 & lt; 
 meta 
 
 name 
 = 
" viewport "
 
 content 
 = 
" width = device-width, initial-scale = 1 "< / p> & gt; 
 & lt; 
 liên kết 
 
 rel 
 = 
" stylesheet "
 
 href 
 = 
" https://maxcdn.bootstrapcdn.com/bootstrap/3.4 .1 / css / bootstrap.min.css "
 & gt; 

 & lt; 
 script 
 
 src 
 = 
" https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js "
 & gt; 
 
 & lt; / 
 script 
 & gt; 

 & lt; 
 script 
 
 src 
 = 
" https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js "
 & gt; 
 
 & lt; / 
 script 
 & gt; 

 & lt; / 
 head 
 & gt; 

 & lt; 
 body 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" container "
 & gt; 

 & lt; 
 h2 
 & gt; 
 Thanh tiến trình có sọc 
 & lt; / < p class = "hljs-name"> h2 
 & gt; 

 & lt; 
 p 
 & gt; 
 Lớp .progress-bar-sọc thêm các sọc vào thanh tiến trình: 
 & lt; / 
 p 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" tiến trình "
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" process-bar process-bar-success process-bar-sọc "
 
 vai trò 
 = 
" thanh tiến trình "
 
 aria-valuenow 
 = 
" 40 "
 
 aria-valuemin 
 = 
 "0" 
 
 aria-valuemax 
 = 
" 100 "
 
 style 
 = 
" width: 40% "
 & gt; 
40% Hoàn thành (thành công)
 & lt; / 
 div 
 & gt; 

 & lt; / 
 div 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" tiến trình "
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" process-bar process-bar-information process-bar-sọc "
 
 role 
 = 
" thanh tiến trình "
 
 aria-valuenow 
 = 
" 50 "
 
 aria-valuemin 
 = 
 "0" 
 
 aria-valuemax 
 = 
" 100 "
 
 style 
 = 
" width: 50% "
 & gt; 
Hoàn thành 50% (thông tin)
 & lt; / 
 div 
 & gt; 
 & lt; / 
 div 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" tiến trình "
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" process-bar process-bar-warning process-bar-sọc "
 
 role 
 = 
" thanh tiến trình "
 
 aria-valuenow 
 = 
" 60 "
 
 aria-valuemin 
 = 
 "0" 
 
 aria-valuemax 
 = 
" 100 "
 
 style 
 = 
" width: 60% "
 & gt; 
Hoàn thành 60% (cảnh báo)
 & lt; / 
 div 
 & gt; 

 & lt; / 
 div 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" tiến trình "
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" process-bar-thanh-tiến-trình-thanh-nguy-hiểm-tiến-trình-thanh-sọc "
 
 vai trò 
 = 
" thanh tiến trình "
 
 aria-valuenow 
 = 
" 70 "
 
 aria-valuemin 
 = 
 "0" 
 
 aria-valuemax 
 = 
" 100 "
 
 style 
 = 
" width: 70% "
 & gt; 
70% Hoàn thành (nguy hiểm)
 & lt; / 
 div 
 & gt; 

 & lt; / 
 div 
 & gt; 

 & lt; / 
 div 
 & gt; 

 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 

 
 
 Ngôn ngữ mã: 
 
 HTML, XML 
 
 (
 
 xml 
 
) 
 

Thanh tiến trình động trong Bootstrap

Để làm cho tiến trình bắt mắt hơn, kèm theo chuyển động làm người dùng có cảm giác thanh tiến trình đang hoạt động, bạn có thể thêm lớp .progress-bar-animation as example after.

Thanh tiến trình hoạt ảnh

< p> Lớp .active tạo hoạt ảnh cho thanh tiến trình:

40%

 < p> 
 & lt; 
 html 
 
 lang 
 = 
" vi "
 & gt; 

 & lt; 
 head 
 & gt; 

 & lt; 
 title 
 & gt; 
 Ví dụ về Bootstrap 
 & lt; / 
 title 
 & gt; 

 & lt; 
 meta 
 
 bộ ký tự 
 = 
" utf-8 "
 & gt; 

 & lt; 
 meta 
 
 name 
 = 
" viewport "
 
 content 
 = 
" width = device-width, initial-scale = 1 "< / p> & gt; 
 & lt; 
 liên kết 
 
 rel 
 = 
" stylesheet "
 
 href 
 = 
" https://maxcdn.bootstrapcdn.com/bootstrap/3.4 .1 / css / bootstrap.min.css "
 & gt; 

 & lt; 
 script 
 
 src 
 = 
" https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js "
 & gt; 
 
 & lt; / 
 script 
 & gt; 

 & lt; 
 script 
 
 src 
 = 
" https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js "
 & gt; 
 
 & lt; / 
 script 
 & gt; 

 & lt; / 
 head 
 & gt; 

 & lt; 
 body 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" container "
 & gt; 

 & lt; 
 h2 
 & gt; 
 Thanh tiến trình hoạt ảnh 
 & lt; / < p class = "hljs-name"> h2 
 & gt; 

 & lt; 
 p 
 & gt; 
 Lớp .active tạo hoạt ảnh cho thanh tiến trình: 
 & lt; / 
 p 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" tiến trình "
 & gt; 

 & lt; 
 div 
 
 class 
 =
 "process-bar process-bar-sọc hoạt động" 
 
 role 
 = 
 "thanh tiến trình" 
 
 aria-valuenow 
 = 
 "40" 
 
 aria-valuemin 
 = 
" 0 "
 
 aria-valuemax 
 = 
 "100" 
 
 style 
 = 
 "width: 40%" 
 & gt ; 

40%
 & lt; / 
 div 
 & gt; 

 & lt; / 
 div 
 & gt; 

 & lt; / 
 div 
 & gt; 

 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 

 
 
 Ngôn ngữ mã: 
 
 HTML, XML 
 
 (
 
 xml 
 
) 
 

Tạo nhiều Tiến trình cùng lúc

Cuối cùng, bạn có thể tạo nhiều tiến trình khác nhau trong phần tử có thể hiện các trạng thái khác nhau như sau.

Thanh tiến trình xếp chồng

< p> Tạo thanh tiến trình xếp chồng lên nhau bằng cách đặt nhiều thanh vào cùng một div với class .progress:

Dung lượng trống

Cảnh báo

Nguy hiểm

 
 
 & lt; 
 html 
 
 lang 
 = 
" vi "
 & gt; 

 & lt; 
 head 
 & gt; 

 & lt; 
 title 
 & gt; 
 Ví dụ về Bootstrap 
 & lt; / 
 title 
 & gt; 

 & lt; 
 meta 
 
 bộ ký tự 
 = 
" utf-8 "
 & gt; 

 & lt; 
 meta 
 
 name 
 = 
" viewport "
 
 content 
 = 
" width = device-width, initial-scale = 1 "< / p> & gt; 
 & lt; 
 liên kết 
 
 rel 
 = 
" stylesheet "
 
 href 
 = 
" https://maxcdn.bootstrapcdn.com/bootstrap/3.4 .1 / css / bootstrap.min.css "
 & gt; 

 & lt; 
 script 
 
 src 
 = 
" https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js "
 & gt; 
 
 & lt; / 
 script 
 & gt; 

 & lt; 
 script 
 
 src 
 = 
" https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js "
 & gt; 
 
 & lt; / 
 script 
 & gt; 

 & lt; / 
 head 
 & gt; 

 & lt; 
 body 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" container "
 & gt; 

 & lt; 
 h2 
 & gt; 
 Thanh tiến trình xếp chồng 
 & lt; / < p class = "hljs-name"> h2 
 & gt; 

 & lt; 
 p 
 & gt; 
 Tạo thanh tiến trình xếp chồng lên nhau bằng cách đặt nhiều thanh vào cùng một div với class .progress : 
 & lt; / 
 p 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" tiến trình "
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" process-bar process-bar-success "
 
 role 
 = 
" processbar "
 
 style 
 = 
 "width: 40%" 
 & gt; 

Không gian trông
 & lt; / 
 div 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" process-bar process-bar-warning "
 
 role 
 = 
" processbar "
 
 style 
 = 
 "width: 10%" 
 & gt; 

Cảnh báo
 & lt; / 
 div 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" process-bar process-bar-risk "
 
 role 
 = 
" processbar "
 
 style 
 = 
 "width: 20%" 
 & gt; 

Sự nguy hiểm
 & lt; / 
 div 
 & gt;

</
div
>

</
div
>

</
body
>

</
html
>

Code language:
 
HTML, XML
 
(
xml
)

Hiển thị phần trăm đang thực hiện và chưa thực hiện

Để thực hiện điều này, bạn có thể áp dụng nguyên tắc tạo nhiều thanh tiến trình sao cho tổng độ rộng là 100%, tô màu cho phần chưa thực hiện là màu xám. Hãy xem ví dụ đơn giản sau.

Tựa đề thanh tiến trình

65%

35%

 
<
html
 
lang
=
"en"
>

<
head
>

<
title
>
Ví dụ Bootstrap
</
title
>

<
meta
 
charset
=
"utf-8"
>

<
meta
 
name
=
"viewport"
 
content
=
"width=device-width, initial-scale=1"
>

<
link
 
rel
=
"stylesheet"
 
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
>

<
script
 
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
>
</
script
>

<
script
 
src
=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"
>
</
script
>

<
script
 
src
=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
>
</
script
>

</
head
>

<
body
>

<
div
 
class
=
"container"
>

<
div
 
class
=
"progress-wrapper"
>

<
div
>

<
div
>

<
span
>
Tựa đề thanh tiến trình
</
span
>

</
div
>

</
div
>

<
div
 
class
=
"progress"
>

<
div
 
class
=
"progress-bar"
 
style
=
"width: 65%;"
>
65%
</
div
>

<
div
 
class
=
"progress-bar bg-light"
 
style
=
"width:35%"
>
<
span
 
style
=
"color:black"
>
35%
</
span
>
</
div
>

</
div
>

</
div
>

</
div
>

</
body
>

</
html
>
Code language:
 
HTML, XML
 
(
xml
)

Kết luận

Bài viết đã hướng dẫn cho bạn cách tạo thanh tiến trình trong Bootstrap 4 thông qua nhiều ví dụ. Mời bạn tiếp tục theo dõi bài tiếp theo.

Các bạn có thể tham khảo các bài viết hay về Bootstrap tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Chia sẻ

Bài viết liên quan