ดรอปดาวน์
สลับการวางซ้อนตามบริบทเพื่อแสดงรายการลิงก์และอื่นๆ ด้วยปลั๊กอินดรอปดาวน์ Bootstrap
ภาพรวม
ดรอปดาวน์สามารถสลับได้ การวางซ้อนตามบริบทสำหรับแสดงรายการลิงก์และอื่นๆ มีการโต้ตอบกับปลั๊กอิน JavaScript แบบเลื่อนลง Bootstrap ที่รวมอยู่ พวกเขากำลังสลับโดยการคลิก ไม่ใช่โดยการวางเมาส์เหนือ; นี่คือ การตัดสินใจออกแบบ โดยเจตนา
ดรอปดาวน์สร้างขึ้นบนไลบรารีของบุคคลที่สามPopperซึ่งให้ตำแหน่งแบบไดนามิกและการตรวจจับวิวพอร์ต อย่าลืมใส่popper.min.jsก่อน JavaScript ของ Bootstrap หรือใช้bootstrap.bundle.min.js
/ bootstrap.bundle.js
ซึ่งมี Popper Popper ไม่ได้ใช้เพื่อวางตำแหน่งดรอปดาวน์ใน navbars แม้ว่าจะไม่มีการกำหนดตำแหน่งแบบไดนามิก
การเข้าถึง
มาตรฐานWAI ARIAกำหนดrole="menu"
วิดเจ็ต จริง แต่นี่เฉพาะสำหรับเมนูที่เหมือนแอปพลิเคชันซึ่งทริกเกอร์การทำงานหรือฟังก์ชัน เมนู ARIAมีได้เฉพาะรายการเมนู รายการเมนูช่องทำเครื่องหมาย รายการเมนูปุ่มตัวเลือก กลุ่มปุ่มตัวเลือก และเมนูย่อยเท่านั้น
ในทางกลับกัน ดรอปดาวน์ของ Bootstrap ได้รับการออกแบบมาให้เป็นแบบทั่วไปและใช้ได้กับสถานการณ์และโครงสร้างมาร์กอัปที่หลากหลาย ตัวอย่างเช่น สามารถสร้างดรอปดาวน์ที่มีอินพุตเพิ่มเติมและการควบคุมแบบฟอร์ม เช่น ช่องค้นหาหรือแบบฟอร์มการเข้าสู่ระบบ ด้วยเหตุนี้ Bootstrap จึงไม่คาดหวัง (หรือเพิ่มโดยอัตโนมัติ) role
และaria-
แอตทริบิวต์ที่จำเป็นสำหรับเมนูARIA ที่แท้จริง ผู้เขียนจะต้องรวมคุณลักษณะเฉพาะเหล่านี้ไว้ด้วย
อย่างไรก็ตาม Bootstrap จะเพิ่มการรองรับในตัวสำหรับการโต้ตอบกับเมนูคีย์บอร์ดมาตรฐานส่วนใหญ่ เช่น ความสามารถในการย้ายผ่านแต่ละ.dropdown-item
องค์ประกอบโดยใช้ปุ่มเคอร์เซอร์และปิดเมนูด้วยESCปุ่ม
ตัวอย่าง
รวมการสลับของดรอปดาวน์ (ปุ่มหรือลิงก์ของคุณ) และเมนูดรอปดาวน์ภายใน หรือองค์ประกอบอื่น ที่.dropdown
ประกาศ position: relative;
ดรอปดาวน์สามารถเรียกใช้จาก<a>
หรือ<button>
องค์ประกอบเพื่อให้เหมาะสมกับความต้องการที่เป็นไปได้ของคุณมากขึ้น ตัวอย่างที่แสดงที่นี่ใช้<ul>
องค์ประกอบเชิงความหมายตามความเหมาะสม แต่รองรับมาร์กอัปที่กำหนดเอง
ปุ่มเดียว
ตัวเดียว.btn
สามารถเปลี่ยนเป็นปุ่มสลับแบบเลื่อนลงได้โดยมีการเปลี่ยนแปลงมาร์กอัป ต่อไปนี้คือวิธีที่คุณสามารถนำไปใช้งานกับองค์ประกอบใด<button>
องค์ประกอบหนึ่งได้:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
และด้วย<a>
องค์ประกอบ:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
ส่วนที่ดีที่สุดคือคุณสามารถทำเช่นนี้กับปุ่มต่างๆ ได้เช่นกัน:
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
ปุ่มแยก
ในทำนองเดียวกัน สร้างดรอปดาวน์ของปุ่มแยกโดยมีมาร์กอัปเหมือนกันกับดรอปดาวน์ของปุ่มเดียว แต่มีการเพิ่ม.dropdown-toggle-split
ระยะห่างที่เหมาะสมรอบๆ เครื่องหมายรูปหมวกแบบเลื่อนลง
เราใช้คลาสพิเศษนี้เพื่อลดแนวนอนpadding
ที่ด้านใดด้านหนึ่งของคาเร็ตลง 25% และลบmargin-left
ที่เพิ่มสำหรับดรอปดาวน์ของปุ่มปกติ การเปลี่ยนแปลงเพิ่มเติมเหล่านั้นทำให้คาเร็ตอยู่ตรงกลางปุ่มแยก และให้พื้นที่โจมตีที่มีขนาดเหมาะสมกว่าถัดจากปุ่มหลัก
<!-- Example split danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
ขนาด
ดรอปดาวน์ของปุ่มใช้งานได้กับปุ่มทุกขนาด รวมถึงปุ่มดรอปดาวน์เริ่มต้นและปุ่มแบบแยก
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-lg" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Small button
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm" type="button">
Small split button
</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
ดรอปดาวน์มืด
เลือกใช้ดรอปดาวน์ที่เข้มกว่าเพื่อจับคู่แถบนำทางสีเข้มหรือสไตล์ที่กำหนดเองโดยเพิ่ม.dropdown-menu-dark
ลงใน.dropdown-menu
ไฟล์ . ไม่จำเป็นต้องเปลี่ยนแปลงรายการดรอปดาวน์
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
และนำไปใช้ในแถบนำทาง:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
ทิศทาง
RTL
ทิศทางจะถูกมิเรอร์เมื่อใช้ Bootstrap ใน RTL ความหมาย.dropstart
จะปรากฏทางด้านขวา
Dropup
ทริกเกอร์เมนูแบบเลื่อนลงเหนือองค์ประกอบโดยเพิ่ม.dropup
ไปยังองค์ประกอบหลัก
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Dropright
เมนูแบบเลื่อนลงทริกเกอร์ที่ด้านขวาขององค์ประกอบโดยการเพิ่ม.dropend
องค์ประกอบหลัก
<!-- Default dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary">
Split dropend
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropright</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Dropleft
ทริกเกอร์เมนูแบบเลื่อนลงทางด้านซ้ายขององค์ประกอบโดยเพิ่ม.dropstart
ไปยังองค์ประกอบหลัก
<!-- Default dropstart button -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropstart button -->
<div class="btn-group">
<div class="btn-group dropstart" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropstart</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<button type="button" class="btn btn-secondary">
Split dropstart
</button>
</div>
รายการเมนู
คุณสามารถใช้<a>
หรือ<button>
องค์ประกอบเป็นรายการดรอปดาวน์
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
คุณยังสามารถสร้างรายการดรอปดาวน์ที่ไม่โต้ตอบด้วย.dropdown-item-text
. รู้สึกอิสระที่จะจัดสไตล์เพิ่มเติมด้วย CSS หรือยูทิลิตี้ข้อความที่กำหนดเอง
<ul class="dropdown-menu">
<li><span class="dropdown-item-text">Dropdown item text</span></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
คล่องแคล่ว
เพิ่ม.active
ไปยังรายการในรายการดรอปดาวน์เพื่อจัดรูปแบบเป็นใช้งานอยู่ ในการถ่ายทอดสถานะใช้งานไปยังเทคโนโลยีช่วยเหลือ ให้ใช้aria-current
แอตทริบิวต์ — โดยใช้page
ค่าสำหรับหน้าปัจจุบัน หรือtrue
สำหรับรายการปัจจุบันในชุด
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
พิการ
เพิ่ม.disabled
ในรายการแบบเลื่อนลงเพื่อจัดรูปแบบเป็นปิดใช้งาน
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
การจัดตำแหน่งเมนู
โดยค่าเริ่มต้น เมนูแบบเลื่อนลงจะอยู่ในตำแหน่ง 100% จากด้านบนและด้านซ้ายของระดับบนสุดโดยอัตโนมัติ คุณสามารถเปลี่ยนสิ่งนี้ได้ด้วยคลาสทิศทาง.drop*
แต่คุณยังสามารถควบคุมพวกมันได้ด้วยคลาสตัวปรับแต่งเพิ่มเติม
เพิ่ม.dropdown-menu-end
เพื่อ.dropdown-menu
จัดตำแหน่งเมนูดรอปดาวน์ให้ชิดขวา ทิศทางจะถูกมิเรอร์เมื่อใช้ Bootstrap ใน RTL ความหมาย.dropdown-menu-end
จะปรากฏทางด้านซ้าย
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu example
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
การจัดตำแหน่งตอบสนอง
หากคุณต้องการใช้การจัดตำแหน่งแบบตอบสนอง ให้ปิดใช้งานการจัดตำแหน่งแบบไดนามิกโดยเพิ่มdata-bs-display="static"
แอตทริบิวต์และใช้คลาสรูปแบบที่ปรับเปลี่ยนตามอุปกรณ์
หากต้องการจัดแนวเมนูแบบเลื่อนลงให้ตรงกับเบรกพอยต์ที่กำหนดหรือใหญ่กว่าให้.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end
เพิ่ม
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
หากต้องการจัดวางเมนูแบบเลื่อนลงทางซ้าย ด้วยเบรกพอยต์ที่กำหนดหรือใหญ่ กว่า ให้เพิ่ม .dropdown-menu-end
และ.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
โปรดทราบว่าคุณไม่จำเป็นต้องเพิ่มdata-bs-display="static"
แอตทริบิวต์ให้กับปุ่มดรอปดาวน์ในแถบนำทาง เนื่องจากไม่มีการใช้ Popper ในแถบนำทาง
ตัวเลือกการจัดตำแหน่ง
จากตัวเลือกส่วนใหญ่ที่แสดงด้านบน ต่อไปนี้คือตัวอย่างอ่างล้างจานขนาดเล็กของตัวเลือกการจัดตำแหน่งแบบเลื่อนลงในที่เดียว
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned, right-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned, left-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
เนื้อหาเมนู
ส่วนหัว
เพิ่มส่วนหัวเพื่อติดป้ายกำกับส่วนของการดำเนินการในเมนูแบบเลื่อนลง
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
วงเวียน
แยกกลุ่มรายการเมนูที่เกี่ยวข้องด้วยตัวแบ่ง
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
ข้อความ
วางข้อความรูปแบบอิสระภายในเมนูดรอปดาวน์ที่มีข้อความ และใช้ ยูทิลิตี้ การเว้นวรรค โปรดทราบว่าคุณอาจต้องใช้รูปแบบการปรับขนาดเพิ่มเติมเพื่อจำกัดความกว้างของเมนู
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
แบบฟอร์ม
ใส่แบบฟอร์มในเมนูดรอปดาวน์ หรือทำให้เป็นเมนูดรอปดาวน์ และใช้ยูทิลิตี้ระยะขอบหรือช่องว่างภายในเพื่อให้มีพื้นที่ว่างในเชิงลบที่คุณต้องการ
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
<div class="mb-3">
<label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword2" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
ตัวเลือกแบบเลื่อนลง
ใช้data-bs-offset
หรือdata-bs-reference
เพื่อเปลี่ยนตำแหน่งของรายการแบบเลื่อนลง
<div class="d-flex">
<div class="dropdown me-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Reference</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
พฤติกรรมปิดอัตโนมัติ
โดยค่าเริ่มต้น เมนูแบบเลื่อนลงจะปิดเมื่อคลิกภายในหรือภายนอกเมนูแบบเลื่อนลง คุณสามารถใช้autoClose
ตัวเลือกเพื่อเปลี่ยนลักษณะการทำงานนี้ของรายการแบบเลื่อนลง
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
ซาส
ตัวแปร
ตัวแปรสำหรับดรอปดาวน์ทั้งหมด:
$dropdown-min-width: 10rem;
$dropdown-padding-x: 0;
$dropdown-padding-y: .5rem;
$dropdown-spacer: .125rem;
$dropdown-font-size: $font-size-base;
$dropdown-color: $body-color;
$dropdown-bg: $white;
$dropdown-border-color: rgba($black, .15);
$dropdown-border-radius: $border-radius;
$dropdown-border-width: $border-width;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg: $dropdown-border-color;
$dropdown-divider-margin-y: $spacer * .5;
$dropdown-box-shadow: $box-shadow;
$dropdown-link-color: $gray-900;
$dropdown-link-hover-color: shade-color($gray-900, 10%);
$dropdown-link-hover-bg: $gray-200;
$dropdown-link-active-color: $component-active-color;
$dropdown-link-active-bg: $component-active-bg;
$dropdown-link-disabled-color: $gray-500;
$dropdown-item-padding-y: $spacer * .25;
$dropdown-item-padding-x: $spacer;
$dropdown-header-color: $gray-600;
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x;
ตัวแปรสำหรับดรอปดาวน์ที่มืด :
$dropdown-dark-color: $gray-300;
$dropdown-dark-bg: $gray-800;
$dropdown-dark-border-color: $dropdown-border-color;
$dropdown-dark-divider-bg: $dropdown-divider-bg;
$dropdown-dark-box-shadow: null;
$dropdown-dark-link-color: $dropdown-dark-color;
$dropdown-dark-link-hover-color: $white;
$dropdown-dark-link-hover-bg: rgba($white, .15);
$dropdown-dark-link-active-color: $dropdown-link-active-color;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color: $gray-500;
ตัวแปรสำหรับคาเร็ตแบบ CSS ซึ่งระบุการโต้ตอบของดรอปดาวน์:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
มิกซ์อิน
มิกซ์อินถูกใช้เพื่อสร้างคาเร็ตแบบ CSS และสามารถพบได้ในscss/mixins/_caret.scss
.
@mixin caret-down {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
}
@mixin caret-up {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
@mixin caret-end {
border-top: $caret-width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
@mixin caret-start {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
}
@mixin caret($direction: down) {
@if $enable-caret {
&::after {
display: inline-block;
margin-left: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@if $direction == down {
@include caret-down();
} @else if $direction == up {
@include caret-up();
} @else if $direction == end {
@include caret-end();
}
}
@if $direction == start {
&::after {
display: none;
}
&::before {
display: inline-block;
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@include caret-start();
}
}
&:empty::after {
margin-left: 0;
}
}
}
การใช้งาน
ผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript ปลั๊กอินแบบเลื่อนลงจะสลับเนื้อหาที่ซ่อนอยู่ (เมนูแบบเลื่อนลง) โดยการสลับ.show
คลาสบนพา.dropdown-menu
เรนต์ แอตทริบิวต์data-bs-toggle="dropdown"
นี้ใช้สำหรับการปิดเมนูแบบเลื่อนลงที่ระดับแอปพลิเคชัน ดังนั้นจึงควรใช้แอตทริบิวต์นี้เสมอ
mouseover
ตัวจัดการที่ว่างเปล่าให้กับลูกที่อยู่ใกล้เคียงของ
<body>
องค์ประกอบ การแฮ็กที่น่าเกลียดที่ยอมรับได้นี้เป็นสิ่งจำเป็นเพื่อแก้ไขจุด
บกพร่องในการมอบสิทธิ์เหตุการณ์ของ iOSซึ่งมิฉะนั้นจะป้องกันไม่ให้แตะที่ใดก็ได้นอกดรอปดาวน์จากการเรียกรหัสที่ปิดรายการแบบเลื่อนลง เมื่อปิดรายการแบบหล่นลง ตัวจัดการว่างเพิ่มเติมเหล่านี้
mouseover
จะถูกลบออก
ผ่านแอตทริบิวต์ข้อมูล
เพิ่มdata-bs-toggle="dropdown"
ในลิงก์หรือปุ่มเพื่อสลับรายการแบบเลื่อนลง
<div class="dropdown">
<button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
ผ่านจาวาสคริปต์
เรียกดรอปดาวน์ผ่าน JavaScript:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
ยังต้องการ
ไม่ว่าคุณจะเรียกดรอปดาวน์ของคุณผ่าน JavaScript หรือใช้ data-api แทน คุณdata-bs-toggle="dropdown"
จำเป็นต้องแสดงบนองค์ประกอบทริกเกอร์ของดรอปดาวน์เสมอ
ตัวเลือก
ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-bs-
เช่นเดียวกับในdata-bs-offset=""
. อย่าลืมเปลี่ยนประเภทเคสของชื่อตัวเลือกจาก camelCase เป็น kebab-case เมื่อส่งตัวเลือกผ่านแอตทริบิวต์ข้อมูล ตัวอย่างเช่น แทนที่จะใช้data-bs-autoClose="false"
ให้ใช้data-bs-auto-close="false"
.
ชื่อ | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
boundary |
สตริง | ธาตุ | 'clippingParents' |
ขอบเขตจำกัดโอเวอร์โฟลว์ของเมนูดรอปดาวน์ (ใช้เฉพาะกับตัวแก้ไขป้องกันโอเวอร์โฟลว์ของ Popper) โดยค่าเริ่มต้น จะเป็น'clippingParents' และสามารถยอมรับการอ้างอิง HTMLElement (ผ่าน JavaScript เท่านั้น) สำหรับข้อมูลเพิ่มเติม โปรดดูที่เอกสาร detectOverflowของ Popper |
reference |
สตริง | องค์ประกอบ | วัตถุ | 'toggle' |
องค์ประกอบอ้างอิงของเมนูแบบเลื่อนลง ยอมรับค่าของ'toggle' , 'parent' , การอ้างอิง HTMLElement หรืออ็อบเจ็กต์ที่getBoundingClientRect ให้ สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารคอนสตรั ค เตอร์ของPopper และ เอกสาร องค์ประกอบเสมือน |
display |
สตริง | 'dynamic' |
โดยค่าเริ่มต้น เราใช้ Popper สำหรับการจัดตำแหน่งแบบไดนามิก ปิดใช้งานสิ่งนี้ด้วยstatic . |
offset |
อาร์เรย์ | สตริง | การทำงาน | [0, 2] |
ออฟเซ็ตของดรอปดาวน์ที่สัมพันธ์กับเป้าหมาย คุณสามารถส่งสตริงในแอตทริบิวต์ข้อมูลด้วยค่าที่คั่นด้วยเครื่องหมายจุลภาค เช่น: เมื่อใช้ฟังก์ชันเพื่อกำหนดออฟเซ็ต ฟังก์ชันจะถูกเรียกด้วยออบเจ็กต์ที่มีการจัดวางแบบป๊อปเปอร์ การอ้างอิง และการแก้ไขแบบป๊อปอัปเป็นอาร์กิวเมนต์แรก องค์ประกอบทริกเกอร์โหนด DOM ถูกส่งผ่านเป็นอาร์กิวเมนต์ที่สอง ฟังก์ชันต้องส่งคืนอาร์เรย์ที่มีตัวเลขสองตัว: |
autoClose |
บูลีน | สตริง | true |
กำหนดค่าพฤติกรรมการปิดอัตโนมัติของดรอปดาวน์:
|
popperConfig |
null | วัตถุ | การทำงาน | null |
หากต้องการเปลี่ยนการกำหนดค่า Popper เริ่มต้นของ Bootstrap โปรดดู การกำหนดค่า ของPopper เมื่อใช้ฟังก์ชันเพื่อสร้างการกำหนดค่า Popper ฟังก์ชันนี้จะถูกเรียกใช้ด้วยอ็อบเจ็กต์ที่มีการกำหนดค่า Popper เริ่มต้นของ Bootstrap ช่วยให้คุณใช้และรวมค่าเริ่มต้นเข้ากับการกำหนดค่าของคุณเอง ฟังก์ชันต้องส่งคืนอ็อบเจ็กต์การกำหนดค่าสำหรับ Popper |
การใช้ฟังก์ชันกับpopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
วิธีการ
วิธี | คำอธิบาย |
---|---|
toggle |
สลับเมนูดรอปดาวน์ของแถบนำทางที่กำหนดหรือการนำทางแบบแท็บ |
show |
แสดงเมนูแบบเลื่อนลงของแถบนำทางที่กำหนดหรือการนำทางแบบแท็บ |
hide |
ซ่อนเมนูดรอปดาวน์ของแถบนำทางที่กำหนดหรือการนำทางแบบแท็บ |
update |
อัปเดตตำแหน่งของรายการแบบเลื่อนลงขององค์ประกอบ |
dispose |
ทำลายรายการดรอปดาวน์ขององค์ประกอบ (ลบข้อมูลที่เก็บไว้ในองค์ประกอบ DOM) |
getInstance |
วิธีการแบบคงที่ซึ่งช่วยให้คุณได้รับอินสแตนซ์แบบเลื่อนลงที่เชื่อมโยงกับองค์ประกอบ DOM คุณสามารถใช้ได้ดังนี้:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
วิธีการแบบคงที่ซึ่งส่งคืนอินสแตนซ์แบบเลื่อนลงที่เกี่ยวข้องกับองค์ประกอบ DOM หรือสร้างใหม่ในกรณีที่ไม่ได้เริ่มต้น คุณสามารถใช้ได้ดังนี้:bootstrap.Dropdown.getOrCreateInstance(element) |
เหตุการณ์
เหตุการณ์ดรอปดาวน์ทั้งหมดเริ่มต้นที่องค์ประกอบการสลับแล้วทำให้เป็นฟองขึ้น ดังนั้นคุณสามารถเพิ่มตัวฟังเหตุการณ์ใน.dropdown-menu
องค์ประกอบหลักของ ' hide.bs.dropdown
และhidden.bs.dropdown
เหตุการณ์มีclickEvent
คุณสมบัติ (เฉพาะเมื่อประเภทเหตุการณ์ดั้งเดิมคือclick
) ที่มีวัตถุเหตุการณ์สำหรับเหตุการณ์การคลิก
วิธี | คำอธิบาย |
---|---|
show.bs.dropdown |
เริ่มทำงานทันทีเมื่อมีการเรียกเมธอดการแสดงตัวอย่าง |
shown.bs.dropdown |
เริ่มทำงานเมื่อผู้ใช้มองเห็นเมนูแบบเลื่อนลงและการเปลี่ยน CSS เสร็จสิ้นแล้ว |
hide.bs.dropdown |
เริ่มทำงานทันทีเมื่อมีการเรียกเมธอดซ่อนอินสแตนซ์ |
hidden.bs.dropdown |
เริ่มทำงานเมื่อรายการดรอปดาวน์ถูกซ่อนจากผู้ใช้เสร็จแล้ว และการเปลี่ยน CSS เสร็จสมบูรณ์ |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})