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

Bạn đang xem: bootstrap 4 progress bar

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ẻ


Xem thêm những thông tin liên quan đến chủ đề thanh tiến trình bootstrap 4

Bootstrap 4 Customised Progress Bar – web development

  • Tác giả: FrontEndFunn
  • Ngày đăng: 2019-02-18
  • Đánh giá: 4 ⭐ ( 6220 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap 4 Customized Progress Bars – web development

    Happy Coding 😀

    Bootstrap 4 Theme Customization using SASS | SCSS
    https://www.youtube.com/playlist?list=PLSQ4mck-bvilsEKfRSy9hPmyvqbQTVr1q

    Web development | HTML | CSS | SCSS | javascript Tutorials
    https://www.youtube.com/playlist?list=PLSQ4mck-bvik9o8IJGoMezRsOjqia-y36

    Social Media Icons Animation
    https://www.youtube.com/playlist?list=PLSQ4mck-bvikTgpdp1xeNc9gcT5BUd5J1

    Pure CSS Loading Animation
    https://www.youtube.com/playlist?list=PLSQ4mck-bvikY0wjMXA3sVJMoBRiZQyxN

    Bootstrap 4 Tutorials
    https://www.youtube.com/playlist?list=PLSQ4mck-bvikhDaOKl43lNrdcm1h0o2fw

    frontendfunn
    webdevelopment
    css3
    bootstrap4
    html5

    Code Link
    https://github.com/frontendfunn/bootstrap4-custom-progress-bar

Cách tạo thanh tiến trình bằng Bootstrap với hiệu ứng CSS3 Gradient & Animate

  • Tác giả: hocwebgiare.com
  • Đánh giá: 5 ⭐ ( 1987 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài thực hành hướng dẫn thiết kế web bằng Bootstrap này các Bạn sẽ được chỉ cách cách tạo thanh tiến trình bằng Bootstrap kết hợp với hiệu ứng CSS3 Gradient & CSS3 Animate

Các thành phần trong bootstrap 4

  • Tác giả: longnv.name.vn
  • Đánh giá: 3 ⭐ ( 7931 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thành phần trong bootstrap 4 thì rất nhiều, bạn dùng chúng để tạo giao diện cho trang. Sau đây là các components thường dùng trong bootstrap 4

Thanh tiến trình (Progress Bars) trong Bootstrap 4

  • Tác giả: hoc.tv
  • Đánh giá: 5 ⭐ ( 6243 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này chúng ta sẽ học cách sử dụng thanh tiến trình trong Bootstrap 4 nhé các bạn !

[Bootstrap 4] Phần 13: Thanh tiến trình

  • Tác giả: www.dammio.com
  • Đánh giá: 4 ⭐ ( 7971 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bootstrap: Thanh tiến trình (Progress bars)

  • Tác giả: v1study.com
  • Đánh giá: 5 ⭐ ( 3152 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thanh tiến trình (Progress bars)

Tạo thanh tiến trình

  • Tác giả: hiepsiit.net
  • Đánh giá: 5 ⭐ ( 6234 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Biến toàn cục trong JavaScript - cách đặt biến toàn cục trong javascript

By ads_php