สองบทความก่อนหน้านี้พูดถึงวิธีการใช้ส่วนประกอบโดยทั่วไปไม่ได้เกี่ยวกับ JS บล็อกนี้ควรมีการหารือร่วมกับ JS
ให้ฉันอธิบายองค์ประกอบหลายอย่าง
1. กล่องโมดอล
2. การตรวจสอบเลื่อน
3. หน้าแท็ก
4. คำแนะนำเครื่องมือ
5. กล่องป๊อปอัพ
6. ปุ่ม
7. ซ้อนกัน
8. หน้าหมุน
9. แถบด้านข้าง
นำเข้า CSS และ JS ก่อน
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css"> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3 src = "js/jQuery-3.1.0.min.js"> </script> <script src = "js/bootstrap.min.js"> </script>
1. กล่องโมดอล
เรามักจะใช้กล่องโมดอลนี้เมื่อเข้าสู่ระบบหรืออ่านกฎระเบียบบางอย่างดังนั้นกล่องโมดอลจึงเป็นเรื่องธรรมดามาก
ก่อนเขียนปุ่มเพื่อเปิดกล่องโมดอล
<!-เป้าหมายข้อมูลคือ ID ของกล่องโมดอลของเราและ data-whathen = "@ime" คือแท็กและค่าของกล่องโมดอลที่เราส่งผ่าน-> <button type = "ปุ่ม" data-toggle = "modal" data-target = "#mymodal" ข้อมูลใด ๆ = "@ime"> เปิดกล่อง
จากนั้นเขียนกล่องโมดอล
<div id = "mymodal" role = "กล่องโต้ตอบ" aria-label = "mymodallabel" aria-hidden = "true"> <!-นี่คือกล่องโมดอลขนาดเล็ก เปลี่ยน Modal-SM เป็น Modal-LG เป็นกล่องโมดอลขนาดใหญ่-> <div> <!-หัวกล่องโมดอล-> <div> <!-ปิดปุ่มที่มุมบนขวา-> <button type = "ปุ่ม" data-dismiss = "modal" aria-label = "ปิด"> เนื้อหา-> <div> <!-เนื้อหาเฟรมโมดอลอาจเป็นข้อความหรือตาราง-> <!-<p> สวัสดี </p>-> <form> <div> <dable> ชื่อผู้ใช้ </label> <อินพุตประเภท = "ข้อความ"> </div> <dable footd> </div> </div> < data-dismiss = "modal"> close </button> <button type = "ปุ่ม"> บันทึก </button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
หากคุณคลิกปุ่มแล้วส่งพารามิเตอร์ไปยังตารางในกล่องโมดอล
เพิ่มป้ายข้อมูลลงในแอตทริบิวต์ของปุ่ม: ค่า
ข้อมูลข้างต้น-อะไรก็ตาม =”@ime” ถูกเพิ่มเป็นตัวอย่าง พารามิเตอร์ที่มีฉลากอะไรก็ตามและเพิ่มค่า @IME
ต่อไปนี้คือการดำเนินการ JS
// method $ ("#mymodal"). on ("show.bs.modal", ฟังก์ชั่น (e) {// รับปุ่มที่คุณคลิกเพื่อเปิดปุ่ม var = $ (e.RelatedTarget) // รับพารามิเตอร์ที่ส่งผ่านโดยปุ่ม var -acceient = button.data ( modal.find (". modal-title") ข้อความ ("สวัสดี"+ผู้รับ); // เปลี่ยนค่าของอินพุตใน body modal.find (". อินพุต modal-body"). val (ผู้รับ)})2. การตรวจสอบเลื่อน
เลื่อนไปยังเนื้อหาที่แตกต่างกันหน้าแท็บจะเปลี่ยนไป
ก่อนเขียนแอตทริบิวต์ของร่างกาย
<!-ออฟเซ็ตถูกตั้งค่าเป็น 70 ค่านี้เป็นค่าที่ดีที่สุดที่ทดสอบ->
<body data-spy = "scroll" data-target = ". navbar" data-offset = "70">
จากนั้นเขียนแท็บ
<!-ด้านบนของเนื้อหาที่แสดงอยู่ในแถบแท็บ-> <nav role = "การนำทาง"> <div> <div id = "myscrollspy"> <ul> <!-การเชื่อมต่อในแท็กคือรหัสของชื่อด้านล่าง-> <li> <a href = "#iwen"> iwen </a> เมนูแบบดรอปดาวน์ในแท็ก-> <li> <a href = "#" data-toggle = "dropdown"> เมนูแบบเลื่อนลง <pan> </span> </a> <ul role = "เมนู"> <li> <a href = "#one" tabindex = "-1"> หนึ่ง </a> </li> <li> <a href = "#สาม" tabindex = "-1"> สาม </a> </li></ul> </li> </li></ul> </viv> </div> </av>
จากนั้นเขียนเนื้อหา
<h2 id = "iwen">@iwen </h2> <p> นี่คือบุคคลนี้เป็นบุคคล </p> <h2 id = "ime">@ime </h2> <p> นี่คือบุคคลนี้เป็นบุคคล </p> <h2 id = "หนึ่ง">@ id = "สอง">@สอง </h2> <p> นี่คือบุคคลนี่คือบุคคล </p> <h2 id = "สาม">@สาม </h2> <p> นี่คือบุคคลนี้เป็นบุคคล </p> <h2 id = "สาม">@สาม </h2> <p>
ขอแนะนำให้เขียนเนื้อหานานขึ้นเพื่อให้เอฟเฟกต์ชัดเจนขึ้น ไม่สะดวกที่จะเขียนคำที่ไร้ประโยชน์มากเกินไปที่นี่
คุณยังสามารถเขียนวิธี JS ได้บ้าง
// method $ ("#myscrollspy"). on ("activate.bs.scrollspy", ฟังก์ชั่น (e) {alert ("hello");})3. หน้าแท็ก
คลิกที่แท็กอื่นเพื่อแสดงเนื้อหาที่แตกต่างกัน
เขียนแท็กบาร์ก่อน
<ul id = "mytab"> <!-แท็กลิงก์สอดคล้องกับรหัสของแท็บ-บานด้านล่าง-> <li> <a href = "#home" data-toggle = "tab"> home </a> </li> <li> <a href = "#profile" data-toggle = "tab"> โปรไฟล์ </a> data-toggle = "dropdown"> เมนูแบบเลื่อนลง <pan> </span> </a> <ul role = "เมนู"> <!-ไม่เหมือนกับเมนูดรอปดาวน์ธรรมดา, เพิ่ม data-toggle = "แท็บ"-> <li> data-toggle = "tab"> สอง </a> </li></ul> </li> </li></ul>
จากนั้นเขียนเนื้อหาของแท็กที่แตกต่างกัน
<div id = "myTabContent"> <div id = "home"> <p> home </p> <div id = "โปรไฟล์"> <p> โปรไฟล์ </p> <div id = "หนึ่ง"> <p> หนึ่ง </p> <div id = "สอง"> <p> สอง </p>
คุณสามารถเริ่มต้นหน้าแท็บที่แสดงด้วย JS
มีหลายวิธีในการเลือกหน้าแท็บ
$ ('#mytabs a [href = "#profile"]'). แท็บ ('show') // เลือก $ ('#mytabs a: แรก') แท็บ ('show') // เลือกหน้าแท็บแรก $ ('mytabs a: last') แท็บ (show ' (เพราะ 0 เป็นคนแรก) หากเป็นหน้าแท็บในเมนูแบบเลื่อนลงหมายเลขควรเพิ่มโดย 14. คำแนะนำเครื่องมือ
<p> <!-หากเนื้อหาชื่อว่างเปล่าเนื้อหาของ data-original-title จะปรากฏขึ้น ตำแหน่งคือตำแหน่งการแสดงผลซึ่งสามารถตั้งค่าไว้ด้านบน | ด้านล่าง | ซ้าย | ขวา-> <!-พารามิเตอร์สามารถตั้งค่าในข้อมูล-**** ---> ยินดีต้อนรับสู่ <a data-animation = "false" id = "myToolTip" href = "#" data-toggle = "tooltip
จากนั้นคุณต้องเริ่มต้นด้วย JS มิฉะนั้นจะไม่มีผล
// เริ่มต้นคำแนะนำเครื่องมือชี้ไปที่แสดง
$ ('[data-toggle = "tooltip"]'). tooltip ();
5. กล่องป๊อปอัพ
กล่องป๊อปอัพนั้นคล้ายกับคำแนะนำเครื่องมือ แต่จะแสดงให้เห็นได้ดีกว่าคำแนะนำเครื่องมือและยังใช้กันทั่วไป
<!-data-trigger = "foucus" คลิกที่ว่างเพื่อหายไป หากคุณไม่ได้เพิ่มให้คลิกปุ่มที่จะหายไป หากคุณตั้งค่าเป็นโฮเวอร์ปุ่มที่คุณย้ายจะปรากฏขึ้น ลบและหายไป-> <!-กล่องป๊อปอัพนี้มีชื่อว่าและเนื้อหาคือเนื้อหา-> <button type = "ปุ่ม" data-trigger = "foucus" data-placement = "Bottom" data-toggle = "popover" data-content = "เนื้อหา"> box </button>
จากนั้นเริ่มต้นด้วย JS
// เริ่มต้นป๊อปโอเวอร์
$ (". JS-Popover"). popover ();
6. ปุ่ม
สองบทความแรกพูดถึงรูปแบบพื้นฐานของปุ่ม เวลานี้เป็นขั้นสูงช่วยให้ปุ่มสามารถแสดงข้อความที่แตกต่างกันเมื่อโหลด
<!-คุณสามารถตั้งค่าข้อความของปุ่มเมื่อโหลด-> <button type = "button" data-loading-text = "Loding สำหรับ 3S"> สถานะการโหลด </ button>
จากนั้นใช้ js เพื่อผูกเหตุการณ์คลิก
// เหตุการณ์คลิกของปุ่มการเชื่อมโยง $ (". js-loading-btn") บน ("คลิก" ฟังก์ชั่น (e) {// หลังจากคลิกตั้งค่าเป็นสถานะโหลดแสดงข้อความของการโหลด var btn = $ (นี้). button ("โหลด");7. ซ้อนกัน
เอฟเฟกต์การสแต็กสามารถประหยัดการควบคุมหน้าจอได้จำนวนมากซึ่งใช้งานได้จริงมาก
นี่คือการคลิกปุ่มเพื่อเปิดสแต็ก
<!-href เป็นรหัสของเนื้อหา-> <a data-toggle = "ล่มสลาย" href = "#clotapsexample"> คลิกเพื่อดู </a> <div id = "collapsexample"> <div> สวัสดี </div> </div>
นี่คือสแต็คของกลุ่มแผง
<div id = "หีบเพลง" role = "tablist"> <div> <div role = "แท็บ" id = "headingone"> <!-ชื่อเรื่อง-> <h4> <!-data-parent ถ้า id ของกลุ่มพาเนล-> <a data-toggle = "การล่มสลาย" การซ่อน-> <div id = "collapseOne" role = "tabpanel"> <div> สวัสดี <br> สวัสดี <br> สวัสดี <br> </div> </div> </div> <div> <div> <div role = "tab" id = "headingtwo"> <h4> <a data-toggle = "collapse" </div> <div id = "clapsetwo" role = "tabpanel"> <div> สวัสดี <br> สวัสดี <br> สวัสดี <br> </div> </div> </div> <div> <div role = "tab" id = "headingthree"> <h4> <a data-toggle = "การล่มสลาย" </div> <div id = "clinpethree" role = "tabpanel"> <div> สวัสดี <br> สวัสดี <br> สวัสดี <br> </div> </div> </div> </div> </div> </div> </div>
8. หน้าหมุน
เรามักจะเห็นมันในหน้าแรกของเว็บไซต์
<div id = "carousel-example-generic"> <!-นี่คือวงกลมสีขาวสามวงด้านล่างตัวบ่งชี้-> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> data-target = "#carousel-example-generic" data slide-to = "2"> </li> </ol> <!-เนื้อหาของหน้าการหมุน-> <div> <img src = "images/4.jpg"> <! src = "images/2.jpg"> <div> <h3> u3d </h3> <p> การเปิดตัวผลิตภัณฑ์ใหม่ </p> </div> </div> </div> <img src = "images/3.jpg"> <div> <h3> แอปเปิ้ล <h3> <p> แอปเปิ้ล <p> href = "#carousel-example-generic" data-slide = "prew"> <span> </span> </a> <a href = "#carousel-example-generic" data-slide = "next"
คุณสามารถตั้งค่าช่วงเวลาและเริ่มต้นโดยอัตโนมัติด้วย JS
// ตั้งค่าช่วงเวลาเป็น 2S และ Carousel $ (". Carousel"). Carousel ({Interval: 2000})9. แถบด้านข้าง
เนื้อหาหลักของแถบด้านข้างคือรายการ
<!-ในการตั้งค่าความกว้างซ่อนไว้บนหน้าจอโทรศัพท์-> <div><ul> <a href = "#"> สวัสดี </a> <a href = "#"> สวัสดี </a> <a href = "#"> สวัสดี </a> <a href = "#"> สวัสดี </a> href = "#"> สวัสดี </a> <a href = "#"> สวัสดี </a> <a href = "#"> สวัสดี </a> <a href = "#"> สวัสดี </a> </ul> </div>
เขียนสไตล์อีกครั้ง
<style> .Affixed-Element-top.affix { /*หากคุณต้องการอยู่ที่ด้านล่างคุณสามารถเปลี่ยนเป็นด้านล่าง: 10px;* / top: 10px; } .Affixed-Element-top.affix-bottom {ตำแหน่ง: ญาติ; } </style>เพิ่ม js บางส่วน
$ (". JS-Affixed-Element-Top"). Affix ({Offset: {}})นี่คือการใช้งานพื้นฐานของ boostrap หลังจากเรียนรู้แล้วคุณสามารถสร้างหน้าเว็บที่ดี
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น