หลังจากดาวน์โหลดและติดตั้ง bootstrap แล้วคุณสามารถค้นหาไฟล์ 12 JS ใน d:/โปรแกรมโปรแกรม/nodejs/node_modules/bootstrap/js ไฟล์ JS เหล่านี้คือ 12 jQuery plug-ins ที่มาพร้อมกับ bootstrap นอกจากนี้คุณยังสามารถค้นหา bootstrap.js และ bootstrap.min.js ใน d:/โปรแกรมโปรแกรม/nodejs/node_modules/bootstrap/dist/js ไฟล์ทั้งสองมีปลั๊กอิน jQuery 12 ตัว
ในบรรดาปลั๊กอิน jQuery 12 รายการที่ใช้กันมากที่สุดคือ Picture Carousel.js, แท็บการสลับแท็ก, การเลื่อนการฟัง Scrollspy.js, รายการดรอปดาวน์ Dropdown.js, โมดูลโมดูลป๊ อปอัพ
(i) รูปภาพ carousel.js
Picture Carousel สามารถตั้งค่าขนาดภาพตำแหน่ง ฯลฯ ใน CSS ได้ตามต้องการ
Image Carousel ต้องการการแนะนำ jQuery.min.js และ carousel.js หรือ transition.js สามารถแนะนำเพื่อเพิ่มเอฟเฟกต์การเปลี่ยนแปลง
<div> <div> <div> <!-data-ride = "Carousel" แอตทริบิวต์ใช้เพื่อทำเครื่องหมายม้าหมุนที่เริ่มเล่นแอนิเมชั่นเมื่อโหลดหน้า-> <div data-ride = "Carousel" id = "Carousel-332839"> <ol> data-slide-to = "1" data-target = "#carousel-332839"> </li> <li slide-slide-to = "2" data-target = "#carousel-332839"> </li> </ol> <div> <p> cras justo odio, dapibus ac facilisis, egestas eget Quam donec id elit non mi porta gravida ที่ eget metus nullam id dolor id nibh ultricies vehicula ut id elit </p> </div> </div> <div> <img src = "images/desert.jpg"/> <div> <h4> ฉลาก Thumbnail ที่สอง </h4> <p> cras justo odio, dapibus ac facilisis ใน egstas eget Quam donec id elit non mi porta gravida ที่ eget metus nullam id dolor id nibh ultricies vehicula ut id elit </p> </div> </div> <div> <img src = "images/hydrangeas.jpg"> <div> <h4> ป้ายกำกับ Thumbnail ที่สาม </h4> <p> cras justo odio, dapibus ac facilisis ใน egstas eget Quam donec id elit non mi porta gravida ที่ eget metus nullam id dolor id nibh ultricies vehicula ut id elit </p> </div> </div> </div> <a href = "#carousel-332839" data-slide = "prev"> <span> </span> </a> <a href = "#carousel-332839" data slide = "next"
(ii) แท็บการสลับแท็ก. js
การสลับแท็กต้องมีการแนะนำ jQuery.min.js และ tab.js หรือ transition.js สามารถนำมาใช้เพื่อเพิ่มเอฟเฟกต์การเปลี่ยนแปลง
<div> <div> <div> <div id = "tabs-440751"> <ul> <li> <a href = "#panel-1" data-toggle = "tab"> ส่วนที่ 1 </a> </li> <li> <a href = "#panel-2" data-toggle = "tab"> </p> </div> <div id = "panel-2"> <p> ฉันอยู่ในส่วนที่ 2. </p> </div> </div> </div> </div> </div> </div> </div> </div>
(iii) การเลื่อนการฟัง Scrollspy.js และรายการดรอปดาวน์ Dropdown.js
รวมรายการเลื่อนและดรอปดาวน์เพื่อสร้างแถบการนำทางที่สามารถเลื่อนและฟังด้วยรายการแบบเลื่อนลง
คุณต้องตั้งค่าสไตล์สไตล์ของตัวอย่างนี้คือ:
.a, .b {ความสูง: 500px; ความกว้าง: 100%;}. b {พื้นหลังสี: สีขาว;}. A {พื้นหลังสี: ดำ;}jQuery.min.js, dropdown.js, scrollspy.js จำเป็นต้องได้รับการแนะนำ
<body data-spy = "scroll" data-target = "#navbarexample"> <div> <div> <div> <div> <div id = "navbarexample"> <div> <button type = "ปุ่ม" data-toggle = การนำทาง </span> <span> </span> <span> </span> <span> </span> <span> </span> </button> <a href = "#"> ยี่ห้อ </a> </div> <div id = "bs-example-navbar-collapse-1"> <ul> <ul> <li> <li> href = "#2"> ลิงก์ </a> </li> <li> <a href = "#3" data-toggle = "dropdown"> dropdown <strong> </strong> </a> <ul> <li> <a href = "#"> แอ็คชั่น </a> </li> <li> ที่นี่ </a> </li> <li> <a href = "#"> ลิงก์ที่แยกจากกัน </a> </li> <li> <a href = "#"> ลิงก์ที่แยกจากกัน </a> </li> <li> <a href = "#"> ลิงก์ที่แยกออกมาอีกหนึ่งลิงก์ </a> </li> <button type = "ส่ง"> ส่ง </button> </form> <ul> <li> <a href = "#4"> ลิงก์ </a> </li> <li> <a href = "#5" data-toggle = "dropdown"> dropdown <strong> </strong> </a> <ul> <li> การดำเนินการ </a> </li> <li> <a href = "#"> อย่างอื่นที่นี่ </a> </li> <li> </li> <li> <a href = "#"> ลิงก์ที่แยกจากกัน </a> </li> </li> </li> </li> data-target = "#navbarexample">-> <div> <div id = "1"> </div> <div id = "2"> </div> <div id = "3"> </div> <div id = "4"> </div> <div id = "5" </div> </div> </body> </html>
(iv) Modal Frame Pop-Up Layer Modal.js
คุณต้องแนะนำ jQuery.min.js และ modal.js หรือคุณสามารถแนะนำ transition.js เพื่อเพิ่มเอฟเฟกต์การเปลี่ยนแปลง
<div> <div> <a id = "modal-732948" href = "#modal-container-732948" role = "button" data-toggle = "modal"> เปิดตัว Demo Modal </a> <div id = "modal-container-732948" <div> <div> <button type = "ปุ่ม" data-dismiss = "modal" aria-hidden = "true"> × </button> <h4 id = "mymodallabel"> modal title </h4> </div> <div> ... </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
(v) Tooltip.js
คุณต้องแนะนำ jQuery.min.js และ tooltip.js หรือคุณสามารถแนะนำ transition.js เพื่อเพิ่มเอฟเฟกต์การเปลี่ยนแปลง
นอกจากนี้ปลั๊กอินคำแนะนำเครื่องมือไม่เหมือนปลั๊กอินอื่น ๆ แต่ไม่ใช่ปลั๊กอิน CSS บริสุทธิ์ ในการใช้ปลั๊กอินนี้คุณต้องใช้ jQuery เพื่อเปิดใช้งาน
$ (function () {$ ("[data-toggle = 'tooltip']"). tooltip ();}); <body style = "padding: 100px;" > <a href = "#" data-toggle = "tooltip"> คำแนะนำเครื่องมือเริ่มต้น </a> <br/> <a href = "#" data-toggle = "tooltip" data-placement = "left"> tooltip ทางด้านซ้าย </a> <br/> <a href = "#" <a href = "#" data-toggle = "ToolTip" data-placement = "Bottom"> Tooltip ที่ด้านล่าง </a> <br/> <a href = "#" data-toggle = "tooltip" data-placement = "ขวา"> toolfort toolfort tooltip type = "button" data-toggle = "tooltip" data-placement = "left"> คำแนะนำเครื่องมือทางด้านซ้าย </button> <br/> <button type = "button" data-toggle = "Tooltip" data-placement = "top"> tooltip at tooltip-placement " <button type = "button" data-toggle = "Tooltip" data-placement = "Right"> คำแนะนำเครื่องมือทางด้านขวา </button> </body>การแบ่งปันหัวข้อที่ยอดเยี่ยม: ภาพ jQuery Carousel JavaScript รูปภาพ Carousel Bootstrap Picture Carousel
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานตาราง bootstrap
บทความนี้ได้รวบรวมไว้ใน "การสอนการใช้ปลั๊กอิน bootstrap" และทุกคนยินดีที่จะเรียนรู้และอ่าน
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น