ในส่วนก่อนหน้าของชั้นเรียนนี้เราเริ่มออกแบบโครงการแรกซึ่งเป็นเว็บไซต์ของ บริษัท ฝึกอบรมภายในและชั้นเรียนนี้เรียนรู้ส่วนการนำทางที่ตอบสนองได้
ส่วนประกอบการนำทางพื้นฐาน + ตอบสนอง:
// ส่วนประกอบการนำทางพื้นฐาน + การตอบสนอง <AV> <div> <a href = "#" style = "margin: 0; padding: 0;"> <img src = "img/logo.png"> </a> <button type = "button" data-toggle = "collaps" data <span> </span> </button> </div> <div id = "navbar-collapse"> <ul style = "margin-top: 0;"> <li> <a href = "#"> <span> </pan> บ้าน </a> </li> <li> href = "#"> <span> </span> กรณี </a> </li> <li> <a href = "#"> <span> </span> เกี่ยวกับ </a> </li> </ul> </div> </div> </av>
ในส่วนถัดไปเราจะสร้างภาพม้าหมุนด้านล่างแถบการนำทางเพื่อเล่นข่าวสำคัญล่าสุดโดยอัตโนมัติ
// การตอบสนองแบบหมุนเวียนไดอะแกรม <div id = "mycarousel"> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousel" data-slide-to = "1"> <div> <div style = "พื้นหลัง:#223240;"> <a href = "#"> <img src = "img/slide1.png"> </a> </div> <div style = "พื้นหลัง:#f5e4dc;"> <a href = "#" style = "background:#de2a2d;"> <a href = "#"> <img src = "img/slide3.png"> </a> </div> </div> <a href = "#mycarousel" data-slide = "prev">
// การควบคุม jQuery ที่จำเป็น $ ('#mycarousel') Carousel ({// ตั้งค่าอัตโนมัติ/2 วินาทีช่วงเวลา: 3000,}); // ปรับตำแหน่งลูกศร Carousel $ ('. Carousel-Control'). CSS ('Line-Height', $ ('. Carousel-Innerimg'). ความสูง () + 'PX'); $ (window) .resize (function () {var $ height = $ ('carousel-inner img'). eq (0) .Height () || $ ('. carousel-inner img') eq (1) .Height () || $ ('carousel-inner img') img '). eq (2) .Height (); // จำเป็นต้องใช้ cssa: โฟกัส {โครงร่าง: ไม่มี;}. navbar-brand {padding: 0;}#mycarousel {margin: 50px 0 0 0 0;}. carousel-inner .item img {margin: 0 auto;}. carousel-controlหากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้และฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม bootstrap