เมนูแบบดรอปดาวน์ ใช้เพื่อแสดงเมนูที่สลับและเข้ากับบริบทของรายการลิงค์
1. กรณี
ห่อทริกเกอร์เมนูแบบเลื่อนลงและเมนูแบบดรอปดาวน์ใน. DropDown จากนั้นเพิ่มรหัส HTML ที่ประกอบขึ้นเป็นเมนู
<div> <button type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> dropdown <pan> </pan> </button> <ul role = "เมนู" aria-labelledby = "dropdownMenu1"> <li role = "การนำเสนอ"> <a role = "menuitem" role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> การกระทำอื่น </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> tabindex = "-1" href = "#"> ลิงค์คั่นด้วย </a> </li></ul> </div>
คุณสามารถค้นหาผ่านรหัสด้านบนซึ่งอาจมีคลาสหรือคุณลักษณะสไตล์ที่ไม่คุ้นเคยมากมาย
มีปุ่มดรอปดาวน์และไอคอนขนาดเล็กที่เก็บไว้ทางด้านขวา แน่นอนข้อความของไอคอนและปุ่มขนาดเล็กนี้อยู่ในระดับเดียวกัน
ก่อนอื่นมาดูกันว่ามีการเลื่อนลงในปุ่มในปุ่มและแอตทริบิวต์ data-toggle รายการจะปรากฏขึ้นตามแอตทริบิวต์นี้
หลังจากนั้นทันทีควรใช้เมนูแบบเลื่อนลงของฉลาก UL ร่วมกับคลาส Dropdown-toggle สไตล์ของปุ่มด้านบนและผูกปุ่มด้านบนผ่าน Aria-Labelledby
ถัดไปมีตัวแบ่งในแท็ก LI ที่สี่ซึ่งเป็นคลาสสไตล์สำหรับการแบ่งเส้น
บางทีฉันอาจเข้าใจด้วยวิธีนี้ แต่ฉันไม่เข้าใจอย่างถูกต้อง
2. ตัวเลือกการจัดตำแหน่ง
เพิ่ม. ข้อความขวาลงในเมนูแบบเลื่อนลง Dropdown-Menu เพื่อจัดตำแหน่งข้อความขวา
<div> <button type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> dropdown <pan> </pan> </button> <ul role = "เมนู" aria-labelledby = "dropdownMenu1"> <li role = "การนำเสนอ"> <a role = "menuitem" role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> การกระทำอื่น </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> tabindex = "-1" href = "#"> ลิงค์คั่นด้วย </a> </li></ul> </div>
เพียงเพิ่มคลาสสไตล์ข้อความขวาลงในแท็ก UL ในรหัสด้านบน
3. ชื่อ
ชุดของการกระทำสามารถทำเครื่องหมายได้โดยการเพิ่มชื่อในเมนูดรอปดาวน์ใด ๆ
<h1> เมนูแบบเลื่อนลง </h1> <div> <button type = "ปุ่ม" id = "dropdownMenu1" data-toggle = "dropdown"> dropdown <span> </pan> </plow> tabindex = "-1" href = "#"> แอ็คชั่น </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> การกระทำอื่น </a> </li> role = "การนำเสนอ"> </li> <li role = "การนำเสนอ"> ส่วนหัวแบบเลื่อนลง </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> ลิงค์ที่แยกออกมา </a> </li>
สิ่งสำคัญคือการเพิ่มคลาสสไตล์การลดลงของหัวใน <li role = "การนำเสนอ"> ส่วนหัวแบบดรอปดาวน์ </li>
4. รายการเมนูปิดใช้งาน
เพิ่ม. disabled เป็น <li> ในเมนูแบบเลื่อนลงเพื่อปิดการใช้งานลิงก์
ดำเนินการแก้ไขรหัสด้านบนเพื่อแทนที่รหัสในบรรทัดของอย่างอื่นที่นี่
คัดลอกรหัสดังนี้: <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> อย่างอื่นที่นี่ </a> </li>
ส่วนใหญ่เพิ่มคลาสสไตล์. disabled ในแท็ก LI
หลังจากที่คุณเรียกใช้แล้วคุณสามารถดูเอฟเฟกต์ได้ ในความเป็นจริงเอฟเฟกต์นั้นคล้ายกับรูปแบบชื่อเรื่องข้างต้น เมื่อคุณคลิกไอคอนปิดใช้งานจะปรากฏขึ้น
5. กรณีพื้นฐาน
1) เมนูแบบเลื่อนลงประเภทปุ่ม
ใส่ปุ่มใด ๆ ลงใน. BTN-Group และเพิ่มเครื่องหมายเมนูที่ถูกต้องเพื่อให้ทริกเกอร์เมนูแบบเลื่อนลง
เมนูแบบเลื่อนลงปุ่มเดียว
เพียงเปลี่ยนเครื่องหมายพื้นฐานบางส่วนแล้วเปลี่ยนปุ่มเป็นสวิตช์เมนูแบบเลื่อนลง
<div> <button type = "button" data-toggle = "dropdown"> action <span> </span> </button >< ul role = "เมนู"> <li> <a href = "#"> การกระทำ </a> </li> <li> <a href = "#"> การกระทำอื่น </a> </li> <li> <a href = "#"> ลิงก์ที่แยกออกมา </a> </li></ul> </div>
เมนูแบบเลื่อนลงปุ่ม
ในทำนองเดียวกันเมนูแบบเลื่อนลงของปุ่มแยกต้องใช้เครื่องหมายการเปลี่ยนแปลงเดียวกัน แต่มีเพียงปุ่มแยกกันอีกหนึ่งปุ่ม
<div> <button type = "ปุ่ม"> action </button> <div> <button type = "button" data-toggle = "dropdown"> <span> </span> <span> สลับแบบเลื่อนลง </span> </button> <ul role = "menu"> <li> <a href = "#" href = "#"> อย่างอื่นที่นี่ </a> </li> <li> </li> <li> <a href = "#"> ลิงค์ที่แยกออกมา </a> </li> </viv> </viv
คุณสามารถคลิกที่ไอคอนขนาดเล็กที่จะปรากฏขึ้น
2) ขนาด
ปุ่มเมนูแบบเลื่อนลงใช้กับปุ่มทุกขนาด
<div> <button type = "ปุ่ม" data-toggle = "dropdown"> ปุ่มขนาดใหญ่ <san> </span> </ปุ่ม> <ul> ... </ul> </div> <!-กลุ่มปุ่มเล็ก ๆ-> <div> <button type = "ปุ่ม" data-toggle = "dropdown"> ปุ่มเล็ก ๆ data-toggle = "dropdown"> ปุ่มเล็กพิเศษ <span> </span> </pution> <ul> ... </ul> </div>
ควบคุมขนาดของปุ่มผ่านคลาสสไตล์. btn-lg, .btn-sm และ .btn-xs
3) เมนูป๊อปอัพขึ้นด้านบน
การเพิ่ม. dropup ไปยังองค์ประกอบหลักจะทำให้เมนูดรอปดาวน์ทริกเกอร์ด้านบนองค์ประกอบ
<div> <button type = "ปุ่ม"> dropup </button> <button type = "button" data-toggle = "dropdown"> <span> </span> <span> สลับแบบเลื่อนลง </span> </ button> <ul> <!
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
บทความนี้ส่วนใหญ่แนะนำเนื้อหาที่เกี่ยวข้องของเมนูแบบเลื่อนลงและจากนั้นแนะนำการรวมกันของปุ่มและเมนูแบบเลื่อนลง มีการเปลี่ยนแปลงมากมายและสไตล์ก็ดีเช่นกัน ฉันหวังว่าทุกคนจะชอบมัน