เวลานี้เราจะดูการใช้ส่วนประกอบ JS บทความนี้จะค่อนข้างยาว ฉันหวังว่าทุกคนจะอ่านได้อย่างอดทนและฉันเชื่อว่าจะมีผลกำไรมากมาย เพื่อนในสวนหลายคนเพิ่มฉันให้เพื่อนของฉันและแสดงรูปแบบการเขียนของฉัน มันง่ายและชัดเจน ที่นี่ขอขอบคุณอีกครั้งสำหรับการสนับสนุนของคุณ ในอีกด้านหนึ่งเทคโนโลยีของฉันมี จำกัด และฉันเขียนสิ่งต่าง ๆ ค่อนข้างพื้นฐาน ในทางกลับกันฉันเขียนสิ่งต่าง ๆ ตามความเข้าใจของตัวเองและแสดงสิ่งที่ซับซ้อนในภาษาที่ง่ายที่สุด ดังนั้นหากมีบางอย่างผิดปกติกับการเขียนโปรดให้ฉันแก้ไข
1. การอ้างอิงไฟล์ JS
หมายเหตุ: jQuery จะต้องแนะนำก่อนไฟล์ JS อื่น ๆ เนื่องจากปลั๊กอินอื่น ๆ พึ่งพา jQuery
<!-<สคริปต์ src = "js/jQuery-1.11.3.min.js"> </script> ไฟล์โหลดที่นำเข้าในเครื่อง-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js" src = "js/bootstrap.min.js"> </script>
2. คุณลักษณะข้อมูล
ฟังก์ชั่น: ผ่านแอตทริบิวต์ข้อมูลคุณสามารถใช้ปลั๊กอิน bootstrap ใด ๆ โดยไม่ต้องเขียนรหัส JS ใด ๆ ปลั๊กอินเมนูอ้างอิงที่กล่าวถึงก่อนหน้านี้เช่น data-toggle = "ดรอปดาวน์" และเมนูอ้างอิงอื่น ๆ
ดังนั้นเนื่องจากมีฟังก์ชั่นการเปิดใช้งานวิธีปิดฟังก์ชั่น? เพิ่มรหัสต่อไปนี้ใน JavaScript:
<script type = "text/javascript"> $ (เอกสาร) .off ('. data-api'); </script>หากคุณต้องการปิดฟังก์ชั่นของปลั๊กอินเฉพาะให้เพิ่มรหัสต่อไปนี้:
<script type = "text/javascript"> // ปิดฟังก์ชั่นปลั๊กอินของกล่องพรอมต์ $ (เอกสาร) .off ('Alert.data-Api'); </script>ปลั๊กอิน JS ทั้งหมดเป็นขั้นตอนต่อไปนี้:
1: ใช้งานได้อย่างไร? --- วิธีการเขียนคลาสที่เกี่ยวข้อง?
2: โทรหาอย่างไร? --- หลังจากเขียนชั้นเรียนวิธีการทำให้ชั้นเรียนมันเขียนมีผล?
3: การประมวลผลเหตุการณ์-รวมถึงการเกิดขึ้นก่อนที่การกระทำจะถูกทริกเกอร์และเกิดขึ้นหลังจากการดำเนินการเริ่มต้นขึ้น
หมายเหตุ: การกระทำทั้งหมดเกิดขึ้นก่อนที่จะทริกเกอร์ Bootstrap ให้ PreventDefault ซึ่งใช้การหยุดการกระทำก่อนที่จะดำเนินการ รหัสมีดังนี้:
$ ('#mymodal'). on ('show.bs.modal', ฟังก์ชั่น (e) {ถ้า (! ข้อมูล) ส่งคืน e.preventdefault () // ป้องกันการแสดงผลของกล่องโมดอลแน่นอนว่าคุณสามารถสลับเพื่อป้องกันการปรากฏตัวของปลั๊กอินอื่น ๆ })หมายเหตุ: Bootstrap ไม่ได้ใช้มาตรการแก้ไขสำหรับเบราว์เซอร์ที่ปิดการใช้งาน JavaScript ดังนั้นเราจำเป็นต้องเขียนรหัสชิ้นหนึ่งเพื่อแก้ไขตัวเองและฉันเชื่อว่าทุกคนรู้
<Noscript> เบราว์เซอร์ของคุณไม่รองรับ JavaScript โปรดดาวน์โหลดเบราว์เซอร์ล่าสุด </oscript>
3. ส่วนประกอบกล่องโมดอล (modal.js)
บันทึก:
1: ไม่รองรับการเปิดกล่องโมดอลหลายกล่องในเวลาเดียวกัน
2: กล่องโมดอลควรอยู่ที่องค์ประกอบของเด็กร่างกายให้มากที่สุดเพื่อหลีกเลี่ยงส่วนประกอบอื่น ๆ ที่มีผลต่อการแสดงผลและฟังก์ชั่นของกล่องโมดอล
3: คำแนะนำเทอร์มินัลมือถือ
4: เพิ่มความสามารถในการเข้าถึง-แอตทริบิวต์บทบาท ADD
5: มุมมองสามารถฝังอยู่ในกล่องโมดอลนั่นคือ data-toggle = "modal"
มาดูคอลัมน์ด้านล่าง คลิกที่ปุ่มและกล่องโมดอลจะปรากฏขึ้น เกี่ยวกับคุณสมบัติที่นี่หากคุณได้อ่านบทความก่อนหน้านี้ฉันเชื่อว่ามันไม่ยากที่จะเข้าใจ ฉันจะไม่อธิบายรายละเอียดที่นี่ คุณสามารถโพสต์รหัสเพื่อทดสอบด้วยตัวเอง:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua content =" ede = edge "> และเนื้อหาอื่น ๆ * ต้อง * ติดตามพวกเขา! -> <title> </title> <link href = "css/bootstrap.css" rel = "stylesheet"> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <link href = "css/style.csss data-toggle = "modal" data-target = ". bs-example-modal-lg"> กล่องโมดอลขนาดใหญ่ปรากฏขึ้น </button> <div id = "mymodal" tabindex = "-1" role = "กล่องโต้ตอบ" diving-labelledby = "mylargemodallabel" aria-label = "ปิด"> <span aria-hidden = "true"> × </span> </pution> <h4> ชื่อโมดอล </h4> </div> <div> <p> ร่างกายที่ดีหนึ่งตัว… </p> </div> <div> <button = "button" button " </div> </div> <!-เปลี่ยนขนาดของกล่องโมดอลและเพิ่มคลาส Modal-Sm-> <button type = "ปุ่ม" data-toggle = "modal" data-target = ". bs-example-modal-sm"> กล่องโมดอลขนาดเล็กปรากฏขึ้น </button> <div id = "mymodal" aria-labelledby = "mylargemodallabel"> <div> --- กล่องโมดอลขนาดเล็ก <div> <div> <button type = "ปุ่ม" data-dismiss = "modal" aria-label = "close"> <span aria-hidden = "true"> × </pan> <div> <button type = "ปุ่ม" data-dismiss = "modal"> ปิด </button> <button type = "ปุ่ม"> บันทึกการเปลี่ยนแปลง </button> </div> </div> </div> </div> </div> <! src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> <script type = "ข้อความ/javascript"> $ ("#mymodal") --- การเรียกรหัสนี้เพื่อให้ปลั๊กอินทำงาน </script> </body> </html>เอฟเฟกต์มีดังนี้:
เมื่อรวมกับกล่องโมดอล คุณยังสามารถเพิ่มฟังก์ชั่นอื่น ๆ ลงในเนื้อหาของร่างกายเช่นกล่องอินพุตที่ฝังอยู่ในรูปแบบ ฯลฯ และไม่มีการโพสต์รหัสที่นี่
สำหรับเหตุการณ์ในกล่องโมดอล เพิ่มรหัสต่อไปนี้ใน JavaScript ดังที่แสดงด้านล่าง:
คัดลอกรหัสดังนี้: <script src = "http://cdn.bootcss.com/jquery/1.11.3/jQuery.min.js"> </script> <script src = "js/bootstrap.min.js"> --- การเรียกรหัสนี้เพื่อให้ปลั๊กอิน Modal Box มีเอฟเฟกต์และแสดง $ ('#mymodal') บน ('hidden.bs.modal', ฟังก์ชั่น (e) {
การแจ้งเตือน ("111");
}) --- เหตุการณ์นี้หมายความว่าเหตุการณ์การแจ้งเตือนจะถูกเรียกใช้หลังจากปิดกล่องโมดอล </script>
ลองมาดูกันว่ากล่องโมดอลฝังอยู่ในวิดีโออย่างไร เราจำเป็นต้องเพิ่มรหัสการเล่นอัตโนมัติหยุดและฟังก์ชั่นอื่น ๆ มาดูรหัสก่อน
<a href = "#" data-toggle = "modal" data-target = "#videomodal" data-thevideo = "http://v.youku.com/v_show/id_xmtu2odmymduyma==.html"> วิดีโอ </a> aria-labelledby = "videomodal" aria-hidden = "true"> <div> <div> <div> <diving type = "ปุ่ม" data-dismiss = "modal" aria-hidden = "true"> × </button> <div> <iframe src = ""> </iframe> src = "js/jQuery-1.11.3.min.js"> </script> ไฟล์โหลดท้องถิ่น-> <สคริปต์ src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js" type = "text/javascript"> // ดูฟังก์ชัน AutoplayModal () {var trigger = $ ("body") ค้นหา ('[data-toggle = "modal"]'); trigger.click (function () {var themodal = $ (this) .data ("target"); var videosrc = $ (นี่) .attr ("data-thevideo"); var videosrcauto = videosrc+"? autoplay = 1"; button.close '). คลิก (function () {$ (Themodal+' iframe '). attr (' src ', videosrc);});}); - - - } // เรียกฟังก์ชัน $ (เอกสาร) .ready (function () {autoplaymodal ();}); </script> <noscript> ไม่รองรับ JavaScript Browser </noscript>เอฟเฟกต์ไม่ได้เป็นภาพหน้าจออีกต่อไป SRC ด้านบนแนะนำที่อยู่ของ Youku
4. การเลื่อนส่วนประกอบการตรวจสอบ
ที่ระบุไว้ในแถบนำทางนั่นคือสลับแท็บโดยอัตโนมัติตามตำแหน่งการเลื่อน ดูรหัสกันเถอะ
1: ตรวจสอบให้แน่ใจว่าแถบเลื่อนจะปรากฏขึ้น
2: มักจะเพิ่มข้อมูลลงในร่างกายนั่นคือใช้ data-spy = "scroll" <body data-spy = "scroll" data-target = ". navbar" data-offset = "70"> <div id = "myscrollspy" href = "#home"> home </a> </li> <li> <a href = "#message"> ข้อความ </a> </li> <li> <a href = "#เกี่ยวกับ"> เกี่ยวกับ </a> </li> <li> เมนู <b> </b> </a> <ul> <li> <a href = "#one"> หนึ่ง </a> <li> <a href = "#สอง"> สอง </a> <li> <a href = "#สาม"> สาม </a> </ul> </li> id = "home"> home </h1> <p> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <p> 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 id = "เกี่ยวกับ"> เกี่ยวกับ </h1> <p> 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <Hr> <h1 id = "หนึ่ง"> หนึ่ง </h1> <p> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 </p> <h1 id = "สอง"> สอง </h1> <p> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
ทำความเข้าใจกับความหมายของการชดเชยข้อมูล: นั่นคือออฟเซ็ตจากด้านบนเมื่อตำแหน่งการเลื่อนเป็น ประการที่สองการประมวลผลเหตุการณ์คล้ายกับการใช้กล่องโมดอลและจะไม่ถูกอธิบาย
ผลกระทบมีดังนี้:
5. ส่วนประกอบกล่องพรอมต์
สังเกต:
1: ใช้ data-toggle = "Tooltip"
2: การวางข้อมูลแสดงถึงทิศทางของกล่องพรอมต์มีสี่ทิศทางด้านซ้ายขวาด้านล่างด้านบน
3: การอนิเมชั่นข้อมูลคือการตั้งค่าเอฟเฟกต์ภาพเคลื่อนไหวเป็นเท็จนั่นคือหลังจากที่เมาส์ถูกเคลื่อนย้ายมันจะเปลี่ยนจากการค่อยเป็นค่อยไปดั้งเดิมเข้าและออกไปเป็นลักษณะทันทีโดยไม่ต้องบัฟเฟอร์เอฟเฟกต์
<div> <p> <!-การผ่อนคลาย-> นี่คือชื่อทดสอบ <a href = "#" id = "clickEvent" data-toggle = "Tooltip" data-placement = "Bottom" data-original-title = "cnblog.com/jtjds" data-animation = "False" src = "js/jQuery-1.11.3.min.js"> </script> ไฟล์โหลดท้องถิ่น-> <สคริปต์ src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js" type = "text/javascript"> $ ('[data-toggle = "tooltip"]'). tooltip (); // เริ่มต้น $ ('#clickevent') tooltip ('show') // เปิดมันโดยตรงและแสดงโดยตรง ('#clickevent') แสดง}) </script>6. ส่วนประกอบเฟรมป๊อปอัพ
สังเกต:
1: กล่องป๊อปอัพเพิ่มเลเยอร์ขนาดเล็กที่ถูกระงับลงในองค์ประกอบใด ๆ เพื่อจัดเก็บข้อมูลที่ไม่ได้อยู่ด้วย
2: เมื่อความยาวของเนื้อหาคือ 0 กล่องป๊อปอัพจะไม่ปรากฏขึ้น ใช้ data-toggle = "popover"
3: พึ่งพาปลั๊กอินกล่องพรอมต์และจำเป็นต้องเริ่มต้นด้วยตนเอง (ดูการเริ่มต้นใน JavaScript)
ดูรหัสต่อไปนี้และไม่มีภาพหน้าจอเพิ่มเติม:
คัดลอกรหัสดังต่อไปนี้: <!-คลิกปุ่มเพื่อปรากฏขึ้นจากนั้นคลิกปุ่มเพื่อซ่อน->
<button type = "button" data-toggle = "popover" data-content = "และนี่คือเนื้อหาที่น่าทึ่งบางอย่างมันมีส่วนร่วมมากใช่มั้ย"> คลิกฉันเพื่อป๊อปอัพ/ซ่อนกล่องป๊อปอัป </button>
เมื่อคลิกที่ปุ่มจะปรากฏขึ้นจากนั้นคลิกที่ปุ่มและหายไป ฉันควรทำอย่างไรถ้าฉันต้องการคลิกในพื้นที่ว่างและซ่อนไว้?
เพียงเพิ่ม data-trigger = "โฟกัส" เพื่อซ่อนโฟกัสทริกเกอร์หมายถึงทริกเกอร์
คัดลอกรหัสดังต่อไปนี้: <!- คลิกปุ่มที่จะปรากฏขึ้นคลิกที่ว่างใด ๆ เพื่อซ่อน เป็นการดีที่สุดที่จะใช้แท็กแน่นอนว่าคุณสามารถใช้ปุ่ม->
<a tabindex = "0" id = "myPopover" role = "ปุ่ม" data-toggle = "popover"
data-trigger = "focus" data-content = "และนี่คือเนื้อหาที่สวยงาม"> คลิกฉันเพื่อหายไป </a>
7. ส่วนประกอบกล่องคำเตือน
สังเกต:
1: ใช้ data-dismiss = "Alert"
2: ปลั๊กอินสามารถเพิ่มคลิกและหายไปในข้อความเตือน
3: เมื่อใช้ปุ่มปิดนั่นคือเมื่อใช้คลาสปิดจะต้องเป็นองค์ประกอบลูกแรกของการแจ้งเตือนและข้อความไม่ได้รับอนุญาตให้ปรากฏก่อนหน้า
มาดูรหัส:
<!-กล่องคำเตือน-> <div id = "myalert"> <button type = "ปุ่ม" data-dismiss = "Alert" Aria-label = "Close"> <span aria-hidden = "true"> × </span> </button> <span> ยินดีต้อนรับ </span> aria-label = "ปิด"> <span aria-hidden = "true"> × </span> </pution> <span> ยินดีต้อนรับ </span> <button type = "ปุ่ม"> รายละเอียด </button> </div>
หากมีกล่องเตือนหลายกล่องใน JavaScript และคุณต้องการปิดกล่องคำเตือนให้เพิ่มรหัสต่อไปนี้ใน JavaScript ดังนี้:
$ (" #myalert"). การแจ้งเตือน ('ปิด') // เมื่อกล่องคำเตือนแรกถูกปิดหรือเมื่อ #myalert ถูกแทนที่ด้วย #myalert1 กล่องคำเตือนที่สองจะปิด $ (' #myalert1') บน ('ปิดตัวลง8. ส่วนประกอบปุ่ม
สังเกต:
1: สลับสถานะของปุ่ม (ปิดใช้งานหรือเปิด)-นี่คือการใช้งาน Autocomplete = "OFF"
2: สร้างหลายปุ่มลงในแถบเครื่องมือ ฯลฯ
3: ตั้งค่าสถานะการโหลดโดยการตั้งค่าการโหลดข้อมูล-ข้อความ = "การโหลด ... "
<!-ปุ่ม-> <button type = "ปุ่ม" id = "myButton" ข้อมูลการโหลดข้อมูล = "การโหลด ... " Autocomplete = "ปิด"> สถานะการโหลด </button> <button type = "button" data-toggle = "ปุ่ม" aria-pressed = "false" Autocomplete = "ปิด" type = "ช่องทำเครื่องหมาย" autocomplete = "ปิด" ตรวจสอบ> home </label> <lable> <อินพุต type = "ช่องทำเครื่องหมาย" Autocomplete = "ปิด"> ข้อความ </label> <label> <อินพุต type = "ช่องทำเครื่องหมาย" Autocomplete = "ปิด"> โปรไฟล์ </label
หากคุณต้องการเปลี่ยนเนื้อหาหลังจากคลิกที่ปุ่มให้เพิ่ม data-complete-text = "xxxx" และเพิ่มรหัส JavaScript ดังต่อไปนี้:
คัดลอกรหัสรหัสดังต่อไปนี้: <!-หลังจากคลิกทริกเกอร์แล้วให้เปลี่ยนข้อความ-ข้อความข้อมูลที่สมบูรณ์แสดงเนื้อหาที่เสร็จสมบูรณ์->
<button type = "ปุ่ม" data-complete-text = "เสร็จสิ้น" Autocomplete = "OFF"> เนื้อหาจะเปลี่ยนโดยอัตโนมัติหลังจากคลิก </button> <script> $ ('mybtn') บน ('คลิก', function () {$ (นี้).
ในการตั้งค่าปุ่มเพื่อสลับสถานะและตั้งค่าเวลาในการสลับสถานะคุณสามารถเพิ่มรหัสต่อไปนี้เป็น JavaScript:
<script> $ ('#myButton') บน ('คลิก', ฟังก์ชั่น (e) {var btn = $ (นี่) .button ('โหลด'); settimeout (ฟังก์ชั่น (e) {btn.button ('รีเซ็ต'); // ตั้งค่าคืนสู่สถานะดั้งเดิม}, 3000)})9. ชุดประกอบกรอบพับ
หมายเหตุ: ใช้ data-toggle = "ยุบ" เพื่อดูรหัส:
<a role = "button" data-toggle = "การล่มสลาย" href = "#collapseExample" expanded = "false" aria-controls = "collapseExample"> ลิงก์ด้วย href </a> <div id = "collapeExample"> <div> สวัสดี </div> </div>
นอกจากนี้ยังสามารถใช้ร่วมกับกลุ่มแผงดังที่แสดงด้านล่าง:
<!-กลุ่มพาเนล-> <div id = "myPanel" role = "tablist"> <!-แผงแรก-> <div> <div role = "tab" id = "headingone"> <h4> <a data-toggle = "การล่มสลาย" data-parent = "#myPanel" href = "#collapseOne" role = "tabpanel"> <div> สวัสดีเกี่ยวกับฉัน </div> </div> </div> <!-แผงที่สอง-> </div>
เมื่อคลิกที่บ้านเพื่อควบคุมส่วนเนื้อหาจะตั้งค่า href = "#clolapseone" ซึ่งเป็นรหัสที่สอดคล้องกับเนื้อหา
เกี่ยวกับเหตุการณ์คล้ายกับที่ใช้ก่อนหน้านี้ส่วนประกอบเหล่านี้มีการใช้เวลาใกล้เคียงกันดังนี้
<script type = "text/javascript"> $ ('#mypanel') บน ('hidden.bs.collapse', function () {alert ("2222");}) </script>10. ส่วนประกอบการเลื่อน Carsoul
หมายเหตุ: ใช้ data-ride = "Carousel" เช่นม้าหมุนที่เรามักจะทำ ก่อนอื่นให้ดูที่รหัสไดอะแกรม Carousel ที่ฉันทำ:
<div id = "myContainer"> --- หมายเหตุเป้าหมายของเป้าหมายข้อมูล <div id = "carousel1" data-ride = "Carousel"> <ol>-indicators เป็นตัวแทนของตัวบ่งชี้การเลื่อนนั่นคือหนึ่งเลื่อนจากหนึ่ง data-target = "#carousel1" data-slide-to = "1"> </li> <li data-target = "#carousel1" datalide-to = "2"> </li> </lu> <!-การแสดงเนื้อหา-> <div role = "ListBox"> <div> <img Src = "bg.jpeg"> <carousel-cap <p> อารมณ์ของแสงแดดคุณและฉันจะไปกับคุณ </p> </div> </div> <div> <img src = "timg.jpg"> </div> <div> <img src = "xx.jpg"> </div> </div> <! <span aria-hidden = "true"> </span> <span> ก่อนหน้า </span> </a> <a href = "#carousel1" role = "ปุ่ม" data-slide = "next"> <span aria-hidden = "true"> </span> <span>
ผลกระทบมีดังนี้:
เกี่ยวกับความเร็วของการเลื่อนคุณสามารถเพิ่มข้อมูล interval = "2000" โดยตรงเพื่อตั้งค่าสลับสวิตช์ 2 วินาที แต่ปัญหาของวิธีนี้คือ
เมื่อคุณรีเฟรชเบราว์เซอร์คุณต้องคลิกปุ่มซ้ายและขวาด้วยตนเองก่อนที่จะสลับ วิธีที่ดีที่สุดคือการตั้งค่าใน JavaScript ดังที่แสดงในรหัสต่อไปนี้
<script type = "text/javascript"> $ (". Carousel"). Carousel ({Interval: 2000;}) </script>11. ส่วนประกอบ Affix
หมายเหตุ: ใช้ตำแหน่ง: แก้ไขสำหรับการวางตำแหน่งใช้ data-spy = "affix" รวมกับการชดเชยข้อมูลเพื่อให้ได้การตรวจสอบและเมื่อเหตุการณ์บางอย่างเกิดขึ้นมันจะถูกชดเชย โปรดอ่านรหัสต่อไปนี้:
<div> <!-เลย์เอาต์ของระบบกริด-> <div> <ul> <li> 11111111111 </li> <li> 222222222222 </li> <li> 333333333333333333 <li> 55555555550 </li> <li> 666666666666 </li> <li>7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 77777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <p> 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <div> <ul> <li> 1111111111111 </li> <li> 22222222222222222222222222222222222222222220 <li> 66666666666666666666666666666666666666666666666666666666666666666666 <li>777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> <script type = "text/javascript"> $ (' }}) $ ('. js-affixed-element-bottom'). Affix ({Offset: {Bottom: 200} --- เมื่อเมาส์ม้วนไปด้านล่าง DIV จะเปลี่ยนเป็น 200px โดยอัตโนมัติจากด้านล่าง}) </script>องค์ประกอบ JS เกือบจะอยู่ที่นี่และการเรียนรู้กรอบของ bootstrap เกือบจะจบลงแล้ว บทความถัดไปสิ้นสุดลงแล้ว ฉันวางแผนที่จะออกแบบหน้าโดยเฉพาะกับ Bootstrap เพื่อสร้างและแบ่งปันกับคุณ หากคุณกำลังเรียนรู้เฟรมเวิร์ก Bootstrap โปรดสื่อสารและเรียนรู้!
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น