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
. processlà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-barbên trong để biểu thị tiến trình cho đến nay. -
. Progress-baryê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-barcũng yêu cầu một sốrolevàariathuộ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 .
& 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.ukBase project code link (Tutorial 6)
https://github.com/SonarSystems/Bootstrap-3-Tutorial-6—Different-Grid-Sizes.gitSource code link
https://github.com/SonarSystems/Bootstrap-3-Tutorial-63—Stacked-Progress-Bar.gitEmail us at
support@sonarsystems.co.ukOur 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=6DF2Q8TR5FB3EOur 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=8Space 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=8Our games made using Cocos2d
————————————————-
Glo Breaker
https://itunes.apple.com/us/app/glo-breaker/id672545938?mt=8Check 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
- Tác giả: isolution.pro
- Đánh giá: 3 ⭐ ( 4139 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Chúng ta hãy xem một ví dụ đơn giản với bố cục lưới đơn giản – hai cột, hai đoạn trên mỗi cột. (Ở đây việc tạo kiểu cho từng cột được sử dụng. Bạn có thể tránh nó.)
Hello, world!
Thanh điều hướng Bootstrap 4 hiển thị các mục tự động được xếp chồng lên nhau khi màn hình được thay đổi kích thước- Tác giả: vi.dpbhouse.com
- Đánh giá: 3 ⭐ ( 8032 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Tôi đã tạo hai thanh điều hướng, trong đó thanh điều hướng bên dưới được đưa vào biểu tượng chuyển đổi thả xuống khi màn hình trở nên nhỏ. Trên thanh điều hướng đầu tiên, tôi có hai mục được đẩy sang ngoài cùng bên phải. Whe …
xếp chồng lên nhau
- Tác giả: thanhnien.vn
- Đánh giá: 4 ⭐ ( 7062 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Tin nhanh, hình ảnh, video clip, bình luận mới về xếp chồng lên nhau. Cập nhật nhiều tin tức độc quyền 24h về xếp chồng lên nhau nhanh và nóng nhất liên tục trong ngày
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
By ads_php