Bootstrap จาก Twitter เป็นเฟรมเวิร์กส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript มันง่ายและยืดหยุ่นทำให้การพัฒนาเว็บเร็วขึ้น
แถบความคืบหน้าโดยเฟรมเวิร์ก Bootstrap เช่นรหัสในการสอนสามเณร
<div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 40% เสร็จสมบูรณ์ </span> </div> </div>
ให้ฉันสามเณรอย่างฉันไม่รู้ว่าจะ ... ปล่อยให้มันกลายเป็นแถบความก้าวหน้าที่แท้จริง อย่างไรก็ตามหลังจากเข้าสู่ Baidu สองสามครั้งคุณสามารถทำได้โดยการเพิ่มรหัส jQuery เพื่อร่วมมือ ในที่สุดปริญญาของฉันก็รับรู้ได้ในที่สุดก็มีความสุขเล็กน้อย
<div id = "mymodal1" tabindex = "-1" role = "กล่องโต้ตอบ" Aria-labelledby = "mymodallabel" aria-hidden = "true" data-backdrop = "คงที่"> <div> <div> </span> <br/> <div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
ย่อหน้าข้างต้นคือการใช้กล่องป๊อปอัพเพื่อบรรจุแถบความคืบหน้า มิฉะนั้นฉันจะบรรลุสิ่งที่เริ่มซ่อนได้อย่างไร? เมื่อใช้ bootstrap เป็นแถบความคืบหน้าหรือกล่องป๊อปอัพคงที่การเพิ่ม data-backdrop = "คงที่" ดีกว่าเพราะหากไม่มีการดัดแปลงนี้คุณเพียงแค่คลิกเมาส์และกล่องป๊อปอัพจะหายไป
<สคริปต์> var p = 101; var stop = 1; ฟังก์ชั่นเรียกใช้ () {p += 4; $ ("div [class = bar]"). CSS ("ความกว้าง", p + "%"); ตัวจับเวลา var = settimeout ("run ()", 500); if (p> 100 && หยุด <1) {p = 0; }} $ ('#btnsubmit') คลิก (ฟังก์ชั่น () {$ ('#mymodal1'). modal ('show'); p = 0; stop = 0; run (); $ ('#upload'). ส่ง ();}); </scripts>ในความเป็นจริงแถบความคืบหน้าของ bootstrap จะแสดงผ่านสไตล์ CSS ตราบใดที่คุณยังคงปรับเปลี่ยนค่าของความกว้างสไตล์คุณสามารถแสดงได้ แน่นอนในวัฏจักรของฉันหน้ารีเฟรชสามารถค้นพบและซ่อนเร้นได้เท่านั้น ถ้าเป็นเช่นนั้นส่งมันด้วยโพสต์จากนั้นตัดสินตามค่าการส่งคืนแล้วซ่อนไว้ด้วย $ ('#mymodal1'). modal ('ซ่อน'); และเปลี่ยนค่าที่สอดคล้องกันของการหยุดเป็น 1 มิฉะนั้นมันจะทำงานต่อไป