Tiến triển - thanh tiến trình bootstrap 5

Tài liệu và ví dụ để sử dụng thanh tiến trình tùy chỉnh Bootstrap có hỗ trợ cho các thanh xếp chồng lên nhau, hình nền động và nhãn văn bản.

Bạn đang xem : thanh tiến trình bootstrap 5

Tài liệu và ví dụ để sử dụng thanh tiến trình tùy chỉnh Bootstrap có hỗ trợ cho các thanh xếp chồng, nền động và nhãn văn bản.

Cách hoạt động

Các thành phần tiến trình được tạo bằng hai phần tử HTML, một số CSS để đặt chiều rộng và một vài thuộc tính. Chúng tôi không sử dụng phần tử HTML5 & lt; process & gt; , đảm bảo bạn có thể xếp chồng các thanh tiến trình, tạo hiệu ứng cho chúng và đặt nhãn văn bản lên chúng.

Chúng tôi sử dụng .progress làm trình bao bọc để chỉ ra giá trị tối đa của thanh tiến trình.
Chúng tôi sử dụng .progress-bar bên trong để biểu thị tiến trình cho đến nay.
.progress-bar yêu cầu kiểu nội tuyến, lớp tiện ích hoặc CSS tùy chỉnh để đặt chiều rộng của chúng.
.progress-bar cũng yêu cầu một số thuộc tính role và aria để có thể truy cập được.

Tổng hợp tất cả những điều đó lại với nhau và bạn có các ví dụ sau.

   & lt; 
  div 
  lớp 
  = 
 " tiến trình "
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar" 
  role 
  = 
  "thanh tiến trình" 
  aria-valuenow 
  = 
  "0" 
  aria-valuemin 
  = 
  "0" 
  aria-valuemax 
  = 
  "100" 
  & gt; & lt; / 
  div 
  & gt; 
 & lt; / 
  div 
  & gt; 
 & lt; 
  div 
  class 
  = < / p> 
 "tiến trình" 
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar" 
  role 
  = 
  "thanh tiến trình" 
  style 
  = 
  "width: 25% "
  aria-valuenow 
  = 
 " 25 "
  aria-valuemin 
  = 
  "0" 
  aria -valuemax 
  = 
  "100" 
  & gt; & lt; /  
 div 
  & gt; 
 & lt; / 
  div 
  & gt; 
 & lt; 
  div 
  class 
  = < / p> 
 "tiến trình" 
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar" 
  role 
  = 
  "thanh tiến trình" 
  style 
  = 
  "width: 50% "
  aria-valuenow 
  = 
 " 50 "
  aria-valuemin 
  = 
  "0" 
  aria -valuemax 
  = 
  "100" 
  & gt; & lt; /  
 div 
  & gt; 
 & lt; / 
  div 
  & gt; 
 & lt; 
  div 
  class 
  = < / p> 
 "tiến trình" 
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar" 
  role 
  = 
  "thanh tiến trình" 
  style 
  = 
  "width: 75% "
  aria-valuenow 
  = 
 " 75 "
  aria-valuemin 
  = 
  "0" 
  aria -valuemax 
  = 
  "100" 
  & gt; & lt; /  
 div 
  & gt; 
 & lt; / 
  div 
  & gt; 
 & lt; 
  div 
  class 
  = < / p> 
 "tiến trình" 
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar" 
  role 
  = 
  "thanh tiến trình" 
  style 
  = 
  "width: 100% "
  aria-valuenow 
  = 
 " 100 "
  aria-valuemin
  = 
  "0" 
  aria-valuemax 
  = 
  "100" 
  & gt; & lt; / 
  div 
  & gt; 
 & lt; / 
  div 
  & gt;

Bootstrap cung cấp một số tiện ích để thiết lập chiều rộng . Tùy thuộc vào nhu cầu của bạn, những điều này có thể giúp bạn nhanh chóng định cấu hình tiến trình.

   & lt; 
  div 
  lớp 
  = 
 " tiến trình "
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar w-75" 
  role 
  = 
 < p class = "s"> "thanh tiến trình" 
  aria-valuenow 
  = 
  "75" 
  aria-valuemin 
  = 
  "0" 
  aria-valuemax 
  = 
  "100" 
  & gt; & lt; / 
  div 
  & gt; 
 & lt; / 
  div 
  & gt;

Nhãn

Thêm nhãn vào thanh tiến trình của bạn bằng cách đặt văn bản trong .progress-bar .

25%

   & lt; 
  div 
  lớp 
  = 
 " tiến trình "
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar" 
  role 
  = 
  "thanh tiến trình" 
  style 
  = 
  "width: 25% ; "
  aria-valuenow 
  = 
 " 25 "
 < p class = "na"> aria-valuemin 
  = 
  "0" 
  aria-valuemax 
  = 
  "100" 
  & gt; 
 25 %  & lt; / 
  div 
  & gt; 
 & lt; / 
  div 
  & gt;

Chiều cao

Chúng tôi chỉ đặt giá trị height trên .progress , vì vậy nếu bạn thay đổi giá trị đó, .progress-bar bên trong sẽ tự động thay đổi kích thước theo đó.

   & lt; 
  div 
  lớp 
  = 
 " tiến trình "
  phong cách 
 < p class = "o"> = 
  "height: 1px;" 
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar" 
  role 
  = 
  "thanh tiến trình" 
  style 
  = 
  "width: 25% ; "
  aria-valuenow 
  = 
 " 25 "
 < p class = "na"> aria-valuemin 
  = 
  "0" 
  aria-valuemax 
  = 
  "100" 
  & gt; & lt; /  
 div 
  & gt; 
 & lt; / 
  div 
  & gt; 
 & lt; 
  div 
  class 
  = < / p> 
 "tiến độ" 
  style 
  = 
 " height: 20px; "
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar" 
  role 
  = 
  "thanh tiến trình" 
  style 
  = 
  "width: 25% ; "
  aria-valuenow 
  = 
 " 25 "
 < p class = "na"> aria-valuemin 
  = 
  "0" 
  aria-valuemax 
  = 
  "100" 
  & gt; & lt; /  
 div 
  & gt; 
 & lt; / 
  div 
  & gt;

Nền

Sử dụng các lớp tiện ích nền để thay đổi giao diện của từng thanh tiến trình.

   & lt; 
  div 
  lớp 
  = 
 " tiến trình "
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "Progress-bar bg-success" 
  vai trò 
  = 
 < p class = "s"> "thanh tiến trình" 
  style 
  = 
  "width : 25% "
  aria-valuenow 
  = 
 " 25 " 
 aria-valuemin 
  = 
  "0" 
 aria-valuemax 
  = 
  "100" 
  & gt; & lt; / 
  div 
  & gt; 
 & lt; / 
  div 
  & gt; 
 & lt; 
  div 
  class 
  = < / p> 
 "tiến trình" 
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar bg-info" 
  role 
  = 
 < p class = "s"> "thanh tiến trình" 
  style 
  = 
  "width : 50% "
  aria-valuenow 
  = 
 " 50 " 
 aria-valuemin 
  = 
  "0" 
  aria-valuemax 
  = 
 " 100 "
  & gt; & lt; / 
  div 
  & gt; 
 & lt; / 
  div 
  & gt; 
 & lt; 
  div 
  class 
  = < / p> 
 "tiến trình" 
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar bg-warning" 
  role 
  = 
 < p class = "s"> "thanh tiến trình" 
  style 
  = 
  "width : 75% "
  aria-valuenow 
  = 
 " 75 " 
 aria-valuemin 
  = 
  "0" 
  aria-valuemax 
  = 
 " 100 "
  & gt; & lt; / 
  div 
  & gt; 
 & lt; / 
  div 
  & gt; 
 & lt; 
  div 
  class 
  = < / p> 
 "tiến trình" 
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar bg-risk" 
  role 
  = 
 < p class = "s"> "thanh tiến trình" 
  style 
  = 
  "width : 100% "
  aria-valuenow 
  = 
 " 100 " 
 aria-valuemin 
  = 
  "0" 
  aria-valuemax 
  = 
 " 100 "
  & gt; & lt; / 
  div 
  & gt; 
 & lt; / 
  div 
  & gt;

Nhiều thanh

Bao gồm nhiều thanh tiến trình trong một thành phần tiến trình nếu bạn cần.

   & lt; 
  div 
  lớp 
  = 
 " tiến trình "
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar" 
  role 
  = 
  "thanh tiến trình" 
  style 
  = 
  "width: 15% "
  aria-valuenow 
  = 
 " 15 "
  aria-valuemin 
  = 
  "0" 
  aria -valuemax 
  = 
  "100" 
  & gt; & lt; /  
 div 
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "Progress-bar bg-success" 
  vai trò 
  = 
 < p class = "s"> "thanh tiến trình" 
  style 
  = 
  "width : 30% "
  aria-valuenow 
  = 
 " 30 " 
 aria-valuemin 
  = 
  "0" 
  aria-valuemax 
  = 
 " 100 "
  & gt; & lt; / 
  div 
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar bg-info" 
  role 
  = 
 < p class = "s"> "thanh tiến trình" 
  style 
  = 
  "width : 20% "
  aria-valuenow 
  = 
 " 20 " 
 aria-valuemin 
  = 
  "0" 
  aria-valuemax 
  = 
 " 100 "
  & gt; & lt; / 
  div 
  & gt; 
 & lt; / 
  div 
  & gt;

Có sọc

Thêm .progress-bar-sọc vào bất kỳ .progress-bar nào để áp dụng một sọc qua CSS gradient trên màu nền của thanh tiến trình.

   & lt; 
  div 
  lớp 
  = 
 " tiến trình "
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar process-bar-sọc" 
  vai trò 
  =  
 "thanh tiến trình" 
  style 
  = 
  "width: 10%" 
  aria-valuenow 
  = 
  "10" < / p> 
 aria-valuemin 
  = 
  "0" 
  aria-valuemax 
  = 
  "100" 
  & gt; & lt ; / 
  div 
  & gt; 
 & lt; / 
  div 
  & gt; 
 & lt; 
  div 
  class 
  = < / p> 
 "tiến trình" 
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar process-bar-sọc bg-success" 
  vai trò 
  = 
  "thanh tiến trình" 
  style 
  = 
 " width: 25% "
  aria-valuenow 
  = 
 " 25 "
  aria-valuemin 
  = 
 " 0 "
 < p class = "na"> aria-valuemax 
  = 
  "100" 
  & gt; & lt; / 
  div 
  & gt; 
 & lt; / 
  div 
  & gt; 
 & lt; 
  div 
  class 
  = < / p> 
 "tiến trình" 
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar process-bar-sọc bg-info" 
  vai trò 
  = 
  "thanh tiến trình" 
  style 
  = 
 " width: 50% "
  aria-valuenow 
  = 
 " 50 "
  aria-valuemin 
  = 
 " 0 "
 < p class = "na"> aria-valuemax 
  = 
  "100" 
  & gt; & lt; / 
  div 
  & gt; 
 & lt; / 
  div 
  & gt; 
 & lt; 
  div 
  class 
  = < / p> 
 "tiến trình" 
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar process-bar-sọc bg-warning" 
  vai trò 
  = 
  "thanh tiến trình" 
  style 
  = 
 " width: 75% "
  aria-valuenow 
  = 
 " 75 "
  aria-valuemin 
  = 
 " 0 "
 < p class = "na"> aria-valuemax 
  = 
  "100" 
  & gt; & lt; / 
  div 
  & gt; 
 & lt; / 
  div 
  & gt; 
 & lt; 
  div 
  class 
  = < / p> 
 "tiến trình" 
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar process-bar-sọc bg-risk" 
  vai trò 
  = 
  "thanh tiến trình" 
  style 
  = 
 " width: 100% "
  aria-valuenow 
  = 
 " 100 "
  aria-valuemin 
  = 
 " 0 "
 < p class = "na"> aria-valuemax 
  = 
  "100" 
  & gt; & lt; / 
  div 
  & gt; 
 & lt; / 
  div 
  & gt;

Các sọc hoạt hình

Gradient sọc cũng có thể được làm động. Thêm .progress-bar-animation vào .progress-bar để tạo hoạt ảnh cho các sọc từ phải sang trái thông qua hoạt ảnh CSS3.

   & lt; 
  div 
  lớp 
  = 
 " tiến trình "
  & gt; 
   & lt; 
  div 
  class 
  = < / p> 
 "process-bar process-bar-sọc process-bar-animation" 
  vai trò 
  = 
  "thanh tiến trình" 
  aria-valuenow 
  = 
 < p class = "s"> "75" 
  aria-valuemin 
  = 
  "0" 
  aria-valuemax 
  = 
  "100" 
  style 
  = 
  "width: 75%" 
 & gt; & lt; / 
  div 
  & gt; 
 & lt; / 
  div 
  & gt;

Sass

Biến

   $ process-height 
 : 
  1 
  rem 
 ; 
 $ process-font-size 
 : 
  $ font-size-base 
 < p class = "o"> * 
 . 75 
 ; 
 $ process-bg 
 : 
  $ gray-200 
 ; 
 $ progressive-border-radius 
 : 
  $ border-radius 
 ; 
 $ process-box-shadow 
 : 
  $ box-shadow-inset 
 < p class = "p">; 
 $ process-bar-color 
 : 
  $ white 
 ; 
 $ process-bar-bg 
 : 
  $ primary 
 ; 
 $ process-bar-animation-timing 
 : 
  1 
  s 
  tuyến tính 
  vô hạn 
 ; 
 $ process-bar-transfer 
 : 
  width 
  .6 
  s 
  dễ dàng 
 ;

Khung hình chính

Được sử dụng để tạo hoạt ảnh CSS cho .progress-bar-animation . Có trong scss / _progress-bar.scss .

   @ if 
  $ enable-transitions 
  {
   @ keyframes 
  process-bar-sọc 
  {
     0 
 % 
  {
  background-position -x 
 : 
  $ process-height 
 ; 
 } 
  } 
}

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

Bootstrap 5 advanced Tutorial – SASS/CSS

Tác giả: Vaxa Code
Ngày đăng: 2021-05-31
Đánh giá: 4 ⭐ ( 4173 lượt đánh giá )
Khớp với kết quả tìm kiếm: Learn Bootstrap 5 complete advanced tutorial by creating a website project from scratch.
*********************
Subscribe for more WEB DEVELOPMENT TUTORIALS : https://www.youtube.com/c/VaxaCode
*********************

SECTION TITLES & TIME CODES

00:00 – PART 1 – Intro to Website Project
01:59 – PART 2-1 – SASS Setup
19:13 – PART 2-2 – Customize Bootstrap
35:25 – PART 3 – File structure
43:18 – PART 4 – The Navbar Section
1:13:11 – PART 5 – The Intro Section
1:56:46 – PART 6 – The Campanies Section
2:10:57 – PART 7 – The Services Section
2:41:06 – PART 8 – Testimonials Section
3:10:56 – PART 9 – The F.a.q Section
3:19:59 – PART 10 – The Portfolio Section
3:45:07 – PART 11 – Get started Section
4:10:10 – PART 11 – The Footer Section

BELOW ARE LINKS AND USEFUL RESOURCES USED ON THE PROJECT

********* COLORS UDED ON THE PROJECT
$purple-dark: 9926f0;
$purple-light: BB6EF5;
$pink: d122e3;
$footer: 151414;

********** ACCORDION OVERRIDES
$accordion-padding-y: 1.5rem;
$accordion-padding-x: 1.5rem;
$accordion-icon-color: $primary;
$accordion-icon-active-color: $secondary;
$accordion-icon-width: 1.875rem;
$accordion-button-icon:
$accordion-button-active-icon:

DOWNLOAD ALL IMAGE
https://drive.google.com/file/d/1T_CUN3s0jgYKNR-ivEwWM9jeHQ60GZi_/view?usp=sharing
********** LINK TO THE COMPLETE PROJECT ON GITHUB
https://github.com/MuriungiPatrick/Bootstrap-5-portfolio-template

*********** LINK TO THEMING-KIT.HTML ON GITHUB
https://github.com/MuriungiPatrick/Bootstrap-5-Theming-Kit

SASS – https://sass-lang.com/guide
BOOTSTRAP 5 : – https://getbootstrap.com/docs/5.0/get…

******* FONTS
GOOGLE FONTS – https://fonts.google.com
FONTAWESOME – https://fontawesome.com/start

******* FREE SVG ILLUSTRATIONS & ICONS

TABLERICONS – https://tablericons.com
BOOTSTRAP ICONS – https://icons.getbootstrap.com
FONT AWESOME – https://fontawesome.com/start
ILLUSTRATIONS – https://www.manypixels.co/gallery
FONT AWESOME ICON CHEATSHEET https://fontawesome.com/cheatsheet

*********************************************
Let’s connect:

EMAIL:
Twitter – http://twitter.com/itsmuriungi
GITHUB – http://github.com/MuriungiPatrick

*********************************************

I hope you’re enjoying every bit of this video and gaining a lot
remember to subscribe & like the videos

Tạo thanh tiến trình

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

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

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

Cách thiết kế thanh tiến trình bằng Bootstrap

Tác giả: hocwebgiare.com
Đánh giá: 5 ⭐ ( 9998 lượt đánh giá )
Khớp với kết quả tìm kiếm: Trong bài thực hành học thiết kế web này các Bạn sẽ được hướng dẫn cách thiết kế thanh tiến trình bằng Bootstrap

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

Tác giả: v1study.com
Đánh giá: 5 ⭐ ( 2493 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 progress với Bootstrap

Tác giả: xuanthulab.net
Đánh giá: 4 ⭐ ( 9275 lượt đánh giá )
Khớp với kết quả tìm kiếm: Sử dụng progress, progress-bar để tạo thanh biểu thị tiến trình đang xử lý nào đó

Các thành phần của Bootstrap

Tác giả: getbootstrap.com.vn
Đánh giá: 3 ⭐ ( 9616 lượt đánh giá )
Khớp với kết quả tìm kiếm: Các thành phần tạo nên bootstrap xây dụng bộ công cụ lập trình web chuyên sâu. Công cụ phát triển website thân thiên người dùng

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 Sự khác biệt giữa các khóa trong SQL - chìa khóa trong sql là gì

Tiến triển – thanh tiến trình bootstrap 5

Byads_php