Perjunkite kontekstines perdangas, kad būtų rodomi nuorodų sąrašai ir daugiau, naudodami Bootstrap išskleidžiamąjį papildinį.
Apžvalga
Išskleidžiamuosius meniu galima perjungti, kontekstinės perdangos, skirtos nuorodų sąrašams rodyti ir kt. Jie yra interaktyvūs naudojant įtrauktą „Bootstrap“ išskleidžiamąjį „JavaScript“ papildinį. Jie perjungiami spustelėjus, o ne užvedus pelės žymeklį; tai tyčinis dizaino sprendimas .
Išskleidžiamieji meniu sukurti remiantis trečiosios šalies biblioteka Popper.js , kuri suteikia dinamišką padėties nustatymą ir peržiūros srities aptikimą. Prieš „Bootstrap JavaScript“ būtinai įtraukite popper.min.js arba naudokite bootstrap.bundle.min.js/ bootstrap.bundle.jskuriame yra Popper.js. Popper.js nėra naudojamas naršymo juostose išdėstyti išskleidžiamuosius meniu, tačiau dinaminis padėties nustatymas nereikalingas.
Jei kuriate „JavaScript“ iš šaltinio, tam reikiautil.js .
Prieinamumas
WAI ARIA standartas apibrėžia tikrąjį valdiklį role="menu" , tačiau tai būdinga į programą panašiems meniu, kurie suaktyvina veiksmus arba funkcijas. ARIA meniu gali būti tik meniu elementai, žymės langelio meniu elementai, akutinio mygtuko meniu elementai, radijo mygtukų grupės ir antriniai meniu.
Kita vertus, „Bootstrap“ išskleidžiamieji meniu yra sukurti taip, kad būtų bendri ir pritaikyti įvairioms situacijoms bei žymėjimo struktūroms. Pavyzdžiui, galima sukurti išskleidžiamuosius meniu, kuriuose yra papildomų įvesties ir formų valdiklių, tokių kaip paieškos laukai arba prisijungimo formos. Dėl šios priežasties Bootstrap nesitiki (ir automatiškai neprideda) jokių roleir aria-atributų, reikalingų tikriems ARIA meniu. Autoriai turės patys įtraukti šiuos konkretesnius atributus.
Tačiau „Bootstrap“ prideda įmontuotą daugelio standartinių klaviatūros meniu sąveikų palaikymą, pvz., galimybę naršyti per atskirus .dropdown-itemelementus naudojant žymeklio klavišus ir uždaryti meniu ESCmygtuku.
Pavyzdžiai
Apvyniokite išskleidžiamojo meniu jungiklį (savo mygtuką arba nuorodą) ir išskleidžiamąjį meniu .dropdownarba kitą elementą, kuris deklaruoja position: relative;. Išskleidžiamuosius meniu galima suaktyvinti iš <a>arba <button>elementų, kurie geriau atitiktų jūsų galimus poreikius.
Vienas mygtukas
Bet kuris singlas .btngali būti paverstas išskleidžiamuoju jungikliu su tam tikrais žymėjimo pakeitimais. Štai kaip galite juos pritaikyti darbui su bet <button>kuriais elementais:
Panašiai sukurkite padalintų mygtukų išskleidžiamuosius meniu su beveik tokiais pačiais žymėjimais kaip ir vieno mygtuko išskleidžiamieji meniu, tačiau .dropdown-toggle-splitpridėkite tinkamą tarpą aplink išskleidžiamąjį meniu.
Naudojame šią papildomą klasę, kad sumažintume horizontalią padėtį paddingabiejose dėklo pusėse 25 % ir pašalintume tai margin-left, kas pridedama prie įprastų mygtukų išskleidžiamųjų meniu. Dėl šių papildomų pakeitimų taškas yra padalijimo mygtuko centre ir šalia pagrindinio mygtuko pateikiama tinkamesnio dydžio smūgio sritis.
Istoriškai išskleidžiamojo meniu turinys turėjo būti nuorodos, bet 4 v. versijoje tai nebėra. Dabar galite pasirinktinai naudoti <button>elementus išskleidžiamuosiuose meniu, o ne tik <a>s.
Taip pat galite sukurti neinteraktyvius išskleidžiamuosius elementus naudodami .dropdown-item-text. Nedvejodami kurkite stilių naudodami pasirinktines CSS arba teksto priemones.
Pagal numatytuosius nustatymus išskleidžiamasis meniu automatiškai pateikiamas 100 % iš viršaus ir išilgai kairiosios pirminio puslapio pusės. Pridėti .dropdown-menu-rightprie a .dropdown-menuį dešinę lygiuoti išskleidžiamąjį meniu.
Galvas aukštyn! Išskleidžiamieji meniu yra išdėstyti naudojant Popper.js (išskyrus atvejus, kai jie yra naršymo juostoje).
Atsakingas derinimas
Jei norite naudoti interaktyvų lygiavimą, išjunkite dinaminį padėties nustatymą pridėdami data-display="static"atributą ir naudokite interaktyvių variantų klases.
Norėdami sulygiuoti išskleidžiamąjį meniu pagal nurodytą ar didesnį lūžio tašką, pridėkite.dropdown-menu{-sm|-md|-lg|-xl}-right .
Norėdami sulygiuoti kairįjį išskleidžiamąjį meniu su nurodytu ar didesniu lūžio tašku, pridėkite .dropdown-menu-rightir .dropdown-menu{-sm|-md|-lg|-xl}-left.
Atminkite, kad jums nereikia pridėti data-display="static"atributo prie išskleidžiamųjų mygtukų naršymo juostose, nes Popper.js naršymo juostose nenaudojamas.
Meniu turinys
Antraštės
Pridėkite antraštę prie veiksmų sekcijų žymėjimo bet kuriame išskleidžiamajame meniu.
Įdėkite bet kokį laisvos formos tekstą į išskleidžiamąjį meniu su tekstu ir naudokite tarpų priemones . Atminkite, kad norint apriboti meniu plotį, greičiausiai reikės papildomų dydžio stilių.
Tam tikras teksto pavyzdys, laisvai tekantis išskleidžiamajame meniu.
Ir tai daugiau teksto pavyzdys.
Formos
Įdėkite formą į išskleidžiamąjį meniu arba paverskite ją išskleidžiamuoju meniu ir naudokite paraštės arba užpildymo priemones , kad suteiktumėte jai reikalingą neigiamą erdvę.
Naudodamas duomenų atributus arba „JavaScript“, išskleidžiamasis papildinys perjungia paslėptą turinį (išskleidžiamuosius meniu), perjungdamas .showklasę pirminio sąrašo elemente. Atributas naudojamas data-toggle="dropdown"uždarant išskleidžiamuosius meniu programos lygiu, todėl verta jį naudoti visada.
Įrenginiuose, kuriuose įgalintas jutiklinis, atidarius išskleidžiamąjį meniu , prie tiesioginių elemento antrinių elementų pridedamos tuščios ( $.noop) tvarkyklės . Šis, žinoma, bjaurus įsilaužimas yra būtinas norint išspręsti „iOS“ įvykių delegavimo keistenybę , kuri kitu atveju neleistų palietus bet kurioje išskleidžiamojo meniu ribų suaktyvinti kodą, kuris uždaro išskleidžiamąjį meniu. Kai išskleidžiamasis meniu uždaromas, šios papildomos tuščios tvarkyklės pašalinamos.mouseover<body>mouseover
Per duomenų atributus
Pridėkite data-toggle="dropdown"prie nuorodos arba mygtuko, kad perjungtumėte išskleidžiamąjį meniu.
Nepriklausomai nuo to, ar iškviečiate išskleidžiamąjį meniu naudodami „JavaScript“, ar vietoj to naudojate duomenų API, data-toggle="dropdown"visada turi būti išskleidžiamojo meniu aktyviklio elemente.
Galimybės
Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-offset="".
vardas
Tipas
Numatytas
apibūdinimas
kompensuoti
numeris | styga | funkcija
0
Išskleidžiamojo meniu poslinkis, palyginti su jo tikslu.
Kai funkcija naudojama poslinkiui nustatyti, ji iškviečiama su objektu, kuriame yra poslinkio duomenys kaip pirmasis argumentas. Funkcija turi grąžinti objektą su tokia pačia struktūra. Suaktyvinantis elementas DOM mazgas perduodamas kaip antrasis argumentas.
Leisti išskleidžiamajam meniu apversti, jei atskaitos elementas sutampa. Norėdami gauti daugiau informacijos, žr. Popper.js apverčiamus dokumentus .
riba
styga | elementas
'scrollParent'
Overflow constraint boundary of the dropdown menu. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.
reference
string | element
'toggle'
Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', or an HTMLElement reference. For more information refer to Popper.js's referenceObject docs.
display
string
'dynamic'
By default, we use Popper.js for dynamic positioning. Disable this with static.
Note when boundary is set to any value other than 'scrollParent', the style position: static is applied to the .dropdown container.
Methods
Method
Description
$().dropdown('toggle')
Toggles the dropdown menu of a given navbar or tabbed navigation.
$().dropdown('show')
Shows the dropdown menu of a given navbar or tabbed navigation.
$().dropdown('hide')
Hides the dropdown menu of a given navbar or tabbed navigation.
$().dropdown('update')
Updates the position of an element’s dropdown.
$().dropdown('dispose')
Destroys an element’s dropdown.
Events
All dropdown events are fired at the .dropdown-menu’s parent element and have a relatedTarget property, whose value is the toggling anchor element. hide.bs.dropdown and hidden.bs.dropdown events have a clickEvent property (only when the original event type is click) that contains an Event Object for the click event.
Event
Description
show.bs.dropdown
This event fires immediately when the show instance method is called.
shown.bs.dropdown
Šis įvykis suaktyvinamas, kai išskleidžiamasis meniu tampa matomas vartotojui (lauks, kol bus atliktas CSS perėjimas).
hide.bs.dropdown
Šis įvykis suaktyvinamas iš karto, kai iškviečiamas slėpimo egzemplioriaus metodas.
hidden.bs.dropdown
Šis įvykis suaktyvinamas, kai išskleidžiamasis meniu baigiamas paslėpti nuo vartotojo (lauks, kol bus atlikti CSS perėjimai).