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 xếp chồng lên nhau của bootstrap

Tiến độ

Tài liệu và ví dụ về cách sử dụng thanh tiến trình tùy chỉnh Bootstrap có hỗ trợ cho các thanh xếp chồng, hình 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 hoạt ảnh và đặt nhãn văn bản lên chúng .

  • Chúng tôi sử dụng . process 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 . process-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.
  • . process-bar cũng yêu cầu một số role aria thuộc tính để làm cho nó 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

class =

"tiến trình"

& gt;

& lt; div

class =

"process-bar"

role =

"thanh tiến trình"

aria-valuenow =

" 0 "

aria-valuemin =

" 0 "

aria-valuemax = < / p>

"100"

& gt; & lt; / div & gt;

& lt; / div & gt;

& lt; div

class =

"tiến trình"

& gt;

& lt; div

class =

"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 =

"tiến trình"

& gt;

& lt; div

class =

"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 =

"tiến trình"

& gt;

& lt; div

class =

"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 =

"tiến trình"

& gt;

& lt; div

class =

"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

class =

"tiến trình"

& gt;

& lt; div

class =

"process-bar w-75"

< p class = "na"> role =

"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 . process-bar .

25%

  

& lt; div

class =

"tiến trình"

& gt;

& lt; div

class =

"process-bar"

role =

"thanh tiến trình"

style =

"width: 25%; "

aria-valuenow =

" 25 "

aria-valuemin =

"0"

aria-valuemax =

"100"

& gt;

25%

& lt; / div & gt;

& lt; / div & gt;

Chiều cao

Chúng tôi chỉ đặt một giá trị height trên . process , vì vậy nếu bạn thay đổi giá trị đó thì nội . Progress-bar sẽ tự động thay đổi kích thước cho phù hợp.

  

& lt; div

class =

"tiến trình"

style =

"height: 1px;"

& gt; < / p>

& lt; div

class =

"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 =

"tiến trình"

style =

" height: 20px; "

& gt;

& lt; div

class =

"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;

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

class =

"tiến trình"

& gt;

& lt; div

class =

"process-bar bg-success"

< p class = "na"> role =

"thanh tiến trình"

style =

"width: 25%"

aria-valuenow =

"25"

aria -valuemin =

"0"

aria-valuemax =

"100" < / p>

& gt; & lt; / div & gt;

& lt; / div & gt;

& lt; div

class =

"tiến trình"

& gt;

& lt; div

class =

"process-bar bg-info"

< p class = "na"> role =

"thanh tiến trình"

style =

"width: 50%"

aria-valuenow =

"50"

aria -valuemin =

"0"

aria-valuemax =

"100" < / p>

& gt; & lt; / div & gt;

& lt; / div & gt;

& lt; div

class =

"tiến trình"

& gt;

& lt; div

class =

"thanh tiến trình bg-warning"

< p class = "na"> role =

"thanh tiến trình"

style =

"width: 75%"

aria-valuenow =

"75"

aria -valuemin =

"0"

aria-valuemax =

"100" < / p>

& gt; & lt; / div & gt;

& lt; / div & gt;

& lt; div

class =

"tiến trình"

& gt;

& lt; div

class =

"process-bar bg-risk"

< p class = "na"> role =

"thanh tiến trình"

style =

"width: 100%"

aria-valuenow =

"100"

aria -valuemin =

"0"

aria-valuemax =

"100" < / p>

& 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

class =

"tiến trình"

& gt;

& lt; div

class =

"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 =

"process-bar bg-success"

< p class = "na"> role =

"thanh tiến trình"

style =

"width: 30%"

aria-valuenow =

"30"

aria -valuemin =

"0"

aria-valuemax =

"100" < / p>

& gt; & lt; / div & gt;

& lt; div

class =

"process-bar bg-info"

< p class = "na"> role =

"thanh tiến trình"

style =

"width: 20%"

aria-valuenow =

"20"

aria -valuemin =

"0"

aria-valuemax =

"100" < / p>

& gt; & lt; / div & gt;

& lt; / div & gt;

Có sọc

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

  

& lt; div

class =

"tiến trình"

& gt;

& lt; div

class =

"process-bar process-bar-sọc"

role =

"thanh tiến trình"

style =

" width: 10% "

aria-valuenow =

" 10 "

aria-valuemin =

"0"

aria-valuemax =

"100 "

& gt; & lt; / div & gt;

& lt; / div & gt;

& lt; div

class =

"tiến trình"

& gt;

& lt; div

class =

"process-bar process-bar-sọc bg-success"

role =

"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 =

"tiến trình"

& gt;

& lt; div

class =

"tiến trình-thanh tiến trình-thanh-sọc bg-thông tin"

role =

"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 =

"tiến trình"

& gt;

& lt; div

class =

"process-bar process-bar-sọc bg-warning"

role =

"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 =

"tiến trình"

& gt;

& lt; div

class =

"process-bar process-bar-sọc bg-risk"

role =

"tiến trình"

style =

"width: 100%"

aria-valuenow =

"100"

aria-valuemin =

"0"

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. cộng. process-bar-animation thành . process-bar để tạo hoạt ảnh cho các sọc từ phải sang trái qua hoạt ảnh CSS3.

  

& lt; div

class =

"tiến trình"

& gt;

& lt; div

class =

"tiến trình-thanh tiến trình-thanh-sọc tiến trình-thanh- hoạt hình "

role =

" thanh tiến trình "

aria-valuenow =

"75"

aria-valuemin =

"0"

aria-valuemax =

"100"

style =

"width: 75%"

& gt; & lt; / div & gt;

& lt; / div & gt;


Xem thêm những thông tin liên quan đến chủ đề thanh tiến trình xếp chồng lên nhau của bootstrap

Bootstrap 3 Tutorial 63 – Stacked Progress Bar

  • Tác giả: Sonar Systems
  • Ngày đăng: 2014-12-12
  • Đánh giá: 4 ⭐ ( 3141 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. I’ve been using Kite for 6 months and I love it! https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=sonarsystems&utm_content=description-only

    Hundreds of free videos at
    www.sonarlearning.co.uk

    Base project code link (Tutorial 6)
    https://github.com/SonarSystems/Bootstrap-3-Tutorial-6—Different-Grid-Sizes.git

    Source code link
    https://github.com/SonarSystems/Bootstrap-3-Tutorial-63—Stacked-Progress-Bar.git

    Email us at
    support@sonarsystems.co.uk

    Our Website
    http://www.sonarsystems.co.uk/

    Facebook – https://www.facebook.com/pages/Sonar-Systems/581403125243822
    Twitter – https://twitter.com/SonarSystems
    Google+ – https://plus.google.com/+SonarsystemsCoUk/
    Donate – https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6DF2Q8TR5FB3E

    Our games made using Cocos2d-x
    ——————————————————
    Super Jet Bunny
    https://play.google.com/store/apps/details?id=development.sonarsystems.easter2014
    https://itunes.apple.com/us/app/super-jet-bunny/id860524380?mt=8

    Space Drop Free
    https://play.google.com/store/apps/details?id=learning.sonarsystems.game&hl=en
    https://itunes.apple.com/us/app/space-drop-free/id895893390?ls=1&mt=8

    Our games made using Cocos2d
    ————————————————-
    Glo Breaker
    https://itunes.apple.com/us/app/glo-breaker/id672545938?mt=8

    Check out our Cocos2d-x book to learn how to make games https://www.packtpub.com/game-development/cocos2d-x-game-development-essentials

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

  • Tác giả: hoc.tv
  • Đánh giá: 3 ⭐ ( 3617 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 !

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

  • Tác giả: getbootstrap.com.vn
  • Đánh giá: 4 ⭐ ( 3572 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

Cách xây dựng nhiều thanh bên cố định xếp chồng với CSS thuần túy và Bootstrap 4

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

Hệ thống lưới – xếp chồng lên nhau

By ads_php