บทนี้จะมุ่งเน้นไปที่เมนูดรอปดาวน์ Bootstrap เมนูแบบเลื่อนลงสามารถสลับได้และเป็นเมนูบริบทที่แสดงลิงก์ในรูปแบบรายการ สิ่งนี้สามารถทำได้ผ่านการโต้ตอบกับเมนูแบบเลื่อนลง (แบบเลื่อนลง) ปลั๊กอิน JavaScript
หากต้องการใช้เมนูต่อไปนี้เพียงเพิ่มเมนูแบบหล่นลงในชั้นเรียน DROPDOWN ตัวอย่างต่อไปนี้แสดงให้เห็นถึงเมนูแบบเลื่อนลงพื้นฐาน:
<! doctype html> <html> <head> <head> <title> อินสแตนซ์ bootstrap - เมนูดรอปดาวน์ (ดรอปดาวน์) </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div> <button type = "ปุ่ม" id = "dropdownmenu1" data-toggle = "dropdown"> การสอน </span> tabindex = "-1" href = "#"> java </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> การขุดข้อมูล </a> </li> การสื่อสาร/เครือข่าย </a> </li> <li role = "การนำเสนอ"> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> ลิงก์ที่แยกออกมา </a> </li>
ผลลัพธ์มีดังนี้:
ตัวเลือกเมนูแบบเลื่อนลงของ Bootstrap
การจัดตำแหน่งเมนูแบบเลื่อนลงของ Bootstrap
จัดเรียงเมนูแบบเลื่อนลงโดยการเพิ่มคลาส. pull-right เป็น. dropdown-menu ตัวอย่างต่อไปนี้แสดงสิ่งนี้:
<! doctype html> <html> <head> <title> bootstrap อินสแตนซ์-เมนูแบบเลื่อนลงด้านขวา </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div> <button type = "ปุ่ม" id = "dropdownmenu1" data-toggle = "dropdown"> toping <span> </span> tabindex = "-1" href = "#"> java </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> การขุดข้อมูล </a> </li> การสื่อสาร/เครือข่าย </a> </li> <li role = "การนำเสนอ"> <a role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> ลิงก์ที่แยกจากกัน </a> </li>
ผลลัพธ์มีดังนี้:
ชื่อเมนูแบบหล่นลง bootstrap
คุณสามารถใช้หัวดรอปดาวน์คลาสเพื่อเพิ่มชื่อไปยังพื้นที่ฉลากของเมนูดรอปดาวน์ ตัวอย่างต่อไปนี้แสดงสิ่งนี้:
<! doctype html> <html> <head> <title> ตัวอย่าง bootstrap - ชื่อเมนูแบบเลื่อนลง </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "StylesHeet"> <script src = "/scripts/jquery.min.het src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div> <button type = "ปุ่ม" id = "dropdownMenu1" data-toggle = "dropdown"> หัวข้อ <span> </span> ชื่อเรื่อง </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> java </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#" tabindex = "-1" href = "#"> การสื่อสารข้อมูล/เครือข่าย </a> </li> <li role = "การนำเสนอ"> </li> <li role = "การนำเสนอ"> ชื่อเมนูแบบดรอปดาวน์ </li> <li role = "การนำเสนอ"> ลิงค์ </a> </li></ul> </div> </body> </html>
ผลลัพธ์มีดังนี้:
ด้านบนเป็นความรู้ที่เกี่ยวข้องของเมนูแบบหล่นลงของ bootstrap ของการสอนการสอนเค้าโครง bootstrap ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!