- 1.Colored Progress Bars แถบความคืบหน้าสามารถนำสีเข้ามาใส่ได้ดังนี้
- - .progress-bar-success
- .progress-bar-info
- .progress-bar-warning
- .progress-bar-danger
ผลลัพธ์ 2.Striped Progress Bars การนำลายเข้ามาใช้ใน Progress Bars โดยเราต้องเพิ่ม class .progress-bar-striped ไปยัง Striped Progress Barsโค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html lang="en"> <head> <title>ทดสอบการใช้งานแบบ Colored Progress Bars</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.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>ทดสอบการใช้งานแบบ Colored Progress Bars</h2> <p>การนำสีเข้ามาใส่ใน Progress Bars:</p> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 50% Progress Bars (info) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 60% Progress Bars (success) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% Progress Bars (danger) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"> 80% Progress Bars (warning) </div> </div> </div> </body> </html>
ตัวอย่างผลลัพธ์ 3.Animated Progress Bar เป็นการทำให้ Progress Bar เคลื่อนไหวได้ โดยเราต้องใส่ class .active ลงใน Animated Progress Barโค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html lang="en"> <head> <title>ทดสอบการใช้งาน Striped Progress Bars</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.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>ทดสอบการใช้งาน Striped Progress Bars</h2> <p>การนำสีและลายเข้ามาใส่ใน Progress Bars:</p> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 50% Progress Bars (info) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 60% Progress Bars (success) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% Progress Bars (danger) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"> 80% Progress Bars (warning) </div> </div> </div> </body> </html>
ตัวอย่างผลลัพธ์ 4.Stacked Progress Bars Progress Bars สามารถนำมาซ้อนๆกันได้โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html lang="en"> <head> <title>ทดสอบการใช้งาน Animated Progress Bar</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.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>ทดสอบการใช้งาน Animated Progress Bar</h2> <p>การนำการเคลื่อนไหวเข้ามาใช้กับ Progress Bar:</p> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 60% </div> </div> </div> </body> </html>
ตัวอย่างผลลัพธ์โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html lang="en"> <head> <title>ทดสอบการใช้งาน Stacked Progress Bars</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.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>ทดสอบการใช้งาน Stacked Progress Bars</h2> <p>การนำ Progress Bars มาซ้อนๆกันได้:</p> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" style="width:45%"> progress bars1 </div> <div class="progress-bar progress-bar-warning" role="progressbar" style="width:15%"> progress bars2 </div> <div class="progress-bar progress-bar-success" role="progressbar" style="width:25%"> progress bars3 </div> </div> </div> </body> </html>
- - .progress-bar-success
การใช้งาน Progress Bar ในBootstrap
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP VIP Members
- โพสต์: 4859
- ลงทะเบียนเมื่อ: 08/01/2018 10:03 am
การใช้งาน Progress Bar ในBootstrap
Progress Bar เป็นแถบความคืบหน้าสามารถใช้เพื่อแสดงให้ผู้ใช้เห็นว่าเราอยู่ในขั้นตอนไหนเท่าไหร่แล้ว Bootstrapมีแถบความคืบหน้าหลายแบบ ดังนี้
Live Simply, Laugh Often, Love Deeply.....
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ การใช้ Dynamic Progress Bar with Labels ใน CSS
โดย pprn » 10/07/2018 4:11 pm » ใน CSS Knowledge - 0 ตอบกลับ
- 2391 แสดง
-
โพสต์ล่าสุด โดย pprn
10/07/2018 4:11 pm
-
-
-
โพสต์ใหม่ การใช้งาน class "container" ในBootstrap
โดย Parichat » 09/01/2018 2:27 pm » ใน Booststap Knowledge - 0 ตอบกลับ
- 2367 แสดง
-
โพสต์ล่าสุด โดย Parichat
09/01/2018 2:27 pm
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 1