Ашылмалы тізімдер

Bootstrap ашылмалы плагинімен сілтемелер тізімдерін және т.б. көрсету үшін мәтінмәндік қабаттасуды ауыстырыңыз.

Бұл бетте

Шолу

Ашылмалы тізімдер ауыспалы, сілтемелер тізімдерін көрсетуге арналған контекстік қабаттар және т.б. Олар қосылған Bootstrap ашылмалы JavaScript плагинімен интерактивті етіп жасалған. Олар меңзерді апару арқылы емес, басу арқылы ауыстырылады; бұл әдейі жасалған дизайн шешімі .

Ашылмалы тізімдер динамикалық орналасуды және көру аймағын анықтауды қамтамасыз ететін үшінші тарап кітапханасында, Popper құрастырылған. Bootstrap JavaScript алдында popper.min.js қосуды ұмытпаңыз немесе құрамында Popper бар bootstrap.bundle.min.js/ пайдаланыңыз. bootstrap.bundle.jsПоппер шарлау тақталарында ашылмалы тізімдерді орналастыру үшін пайдаланылмайды, бірақ динамикалық орналастыру қажет емес.

Қол жетімділік

WAI ARIA стандарты нақты виджетті анықтайды ,role="menu" бірақ бұл әрекеттерді немесе функцияларды іске қосатын қолданбаға ұқсас мәзірлерге тән. ARIA мәзірлері тек мәзір элементтерін, құсбелгі мәзірінің элементтерін, радио түймелерінің мәзір элементтерін, радио түймелерінің топтарын және ішкі мәзірлерді қамтуы мүмкін.

Екінші жағынан, Bootstrap ашылмалы тізімдері жалпы және әртүрлі жағдайлар мен белгілеу құрылымдарына қолданылатын етіп жасалған. Мысалы, іздеу өрістері немесе кіру пішіндері сияқты қосымша кірістерді және пішінді басқару элементтерін қамтитын ашылмалы тізімдерді жасауға болады. Осы себепті, Bootstrap шынайы ARIA мәзірлері үшін қажетті roleжәне атрибуттардың ешқайсысын күтпейді (немесе автоматты түрде қосады) . Авторлар осы неғұрлым нақты атрибуттарды өздері қосуы керек.aria-

Дегенмен, Bootstrap көптеген стандартты пернетақта мәзірінің өзара әрекеттесуіне кірістірілген қолдауды қосады, мысалы, курсор пернелерін пайдаланып жеке элементтерді жылжыту және мәзірді пернемен .dropdown-itemжабу мүмкіндігі .ESC

Мысалдар

Ашылмалы тізімнің ауыстырып-қосқышын (түймеңізді немесе сілтемеңізді) және ашылмалы мәзірді ішінде .dropdownнемесе жариялайтын басқа элементті ораңыз position: relative;. Ашылмалы тізімдерді әлеуетті қажеттіліктеріңізге жақсырақ сәйкестендіру үшін элементтерден <a>немесе элементтерден іске қосуға болады. <button>Мұнда көрсетілген мысалдар <ul>орынды жерде семантикалық элементтерді пайдаланады, бірақ теңшелетін белгілеуге қолдау көрсетіледі.

Жалғыз түйме

Кез келген сингл .btnкейбір белгілеу өзгерістерімен ашылмалы қосқышқа айналуы мүмкін. <button>Төменде оларды кез келген элементпен жұмыс істеуге қоюға болады :

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
  </ul>
</div>

Және <a>элементтермен:

html

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <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>
  </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. Ашылмалы элементтерге өзгертулер қажет емес.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <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>

Және оны шарлау тақтасында пайдалануға қою:

html

<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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <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

RTL жүйесінде Bootstrap пайдаланған кезде бағыттар шағылыстырылады, мағынасы .dropstartоң жақта пайда болады.

Орталықтандырылған

Ашылмалы мәзірді .dropdown-centerнегізгі элементтегі ауыстырып-қосқыштың астында ортасына қойыңыз.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Ашылмалы терезе

Негізгі элементке қосу арқылы элементтердің үстіндегі ашылмалы мәзірлерді іске қосыңыз .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>

Ашылмалы терезенің ортасында

Ашылмалы мәзірді негізгі элементтегі ауыстырып-қосқыштың ортасында етіп жасаңыз .dropup-center.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Дропен

Негізгі элементке қосу арқылы элементтердің оң жағындағы ашылмалы мәзірлерді іске қосыңыз .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">
    Dropend
  </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 Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropstart

Негізгі элементке қосу арқылы элементтердің сол жағындағы ашылмалы мәзірлерді іске қосыңыз .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 dropstart">
  <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>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Ашылмалы элементтер ретінде <a>немесе элементтерді пайдалануға болады .<button>

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <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 немесе мәтіндік утилиталардың көмегімен әрі қарай сәндеуге болады.

html

<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жиындағы ағымдағы элемент үшін.

html

<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Ашылмалы тізімдегі элементтерге қосыңыз , оларды өшірілген етіп мәнерлеңіз .

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Әдепкі бойынша, ашылмалы мәзір ата-анасының жоғарғы жағында және сол жағында автоматты түрде 100% орналасады. Бұны бағытты .drop*класстармен өзгертуге болады, бірақ оларды қосымша модификатор кластарымен де басқаруға болады.

А-ға қосыңыз .dropdown-menu-end, .dropdown-menuашылмалы мәзірді оңға туралаңыз. RTL жүйесінде Bootstrap пайдаланған кезде бағыттар шағылыстырылады, мағынасы .dropdown-menu-endсол жақта пайда болады.

Ескерту! Ашылмалы тізімдер шарлау тақтасында болған жағдайларды қоспағанда, Поппердің арқасында орналастырылады.

html

<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.

html

<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.

html

<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"Поппер шарлау тақталарында пайдаланылмайтындықтан, шарлау жолақтарындағы ашылмалы түймелерге атрибут қосудың қажеті жоқ екенін ескеріңіз.

Туралау опциялары

Жоғарыда көрсетілген опциялардың көпшілігін ескере отырып, мұнда бір жерде әртүрлі ашылмалы туралау опцияларының шағын ас үй раковинасының демонстрациясы берілген.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </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">
  <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>

Тақырыптар

Кез келген ашылмалы мәзірдегі әрекеттер бөлімдерін белгілеу үшін тақырып қосыңыз.

html

<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>

Бөлгіштер

Бөлгішпен байланысты мәзір элементтерінің топтарын бөліңіз.

html

<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>

Мәтін

Кез келген еркін пішінді мәтінді мәтіні бар ашылмалы мәзірге орналастырыңыз және бос орын утилиталарын пайдаланыңыз . Мәзір енін шектеу үшін сізге қосымша өлшем мәнерлері қажет болуы мүмкін екенін ескеріңіз.

html

<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>

Пішіндер

Пішінді ашылмалы мәзірге қойыңыз немесе оны ашылмалы мәзірге айналдырыңыз және оған қажетті теріс кеңістікті беру үшін маржа немесе толтыру утилиталарын пайдаланыңыз.

html

<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>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <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>
</div>

Ашылмалы тізімнің орнын өзгерту үшін data-bs-offsetнемесе пайдаланыңыз .data-bs-reference

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </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>
    </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" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <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>
</div>

Автоматты жабу әрекеті

Әдепкі бойынша ашылмалы мәзір ашылмалы мәзірдің ішінде немесе сыртында басқанда жабылады. autoCloseАшылмалы тізімнің осы әрекетін өзгерту үшін опцияны пайдалануға болады .

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </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>

CSS

Айнымалылар

v5.2.0 нұсқасына қосылды

.dropdown-menuBootstrap-тың дамып келе жатқан CSS айнымалылары тәсілінің бөлігі ретінде ашылмалы тізімдер енді нақты уақытта жақсартылған теңшеу үшін жергілікті CSS айнымалы мәндерін пайдаланады . CSS айнымалыларының мәндері Sass арқылы орнатылады, сондықтан Sass теңшеуіне әлі де қолдау көрсетіледі.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

.dropdown-menu-darkCSS айнымалылары арқылы теңшеуді біз қайталанатын CSS селекторларын қоспай-ақ нақты мәндерді қайта анықтайтын сыныпта көруге болады .

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Sass айнымалылары

Барлық ашылмалы тізімдер үшін айнымалылар:

$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:             var(--#{$prefix}border-color-translucent);
$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($dropdown-link-color, 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-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

Қараңғы ашылмалы тізімге арналған айнымалылар :

$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 type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

JavaScript арқылы

JavaScript арқылы ашылмалы тізімге қоңырау шалыңыз:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`әлі де қажет

Ашылмалы тізімге JavaScript арқылы қоңырау шалуыңызға немесе оның орнына data-api пайдалануыңызға қарамастан, ашылмалы тізімнің data-bs-toggle="dropdown"іске қосу элементінде әрқашан болуы қажет.

Опциялар

Опциялар деректер атрибуттары немесе JavaScript арқылы берілуі мүмкін болғандықтан, параметр атауын data-bs-сияқты қосуға болады data-bs-animation="{value}". Опцияларды деректер атрибуттары арқылы өткізген кезде опция атауының регистр түрін “ camelCase ” дан “ kebab-case ” түріне өзгертуді ұмытпаңыз. Мысалы, data-bs-custom-class="beautifier"орнына пайдаланыңыз data-bs-customClass="beautifier".

Bootstrap 5.2.0 нұсқасы бойынша барлық компоненттер қарапайым құрамдас конфигурациясын JSON жолы ретінде орналастыра алатын эксперименттік сақталған деректер төлсипатын қолдайды. data-bs-configЭлементте data-bs-config='{"delay":0, "title":123}'және data-bs-title="456"атрибуттары болғанда, соңғы titleмән болады 456және бөлек деректер атрибуттары параметрінде берілген мәндерді қайта анықтайды data-bs-config. Бұған қоса, бар деректер атрибуттары сияқты JSON мәндерін орналастыра алады data-bs-delay='{"show":0,"hide":150}'.

Аты	Түр	Әдепкі	Сипаттама
`autoClose`	логикалық, жол	`true`	Ашылмалы тізімнің автоматты жабылу әрекетін конфигурациялаңыз: `true`- ашылмалы мәзір ашылмалы мәзірдің сыртында немесе ішінде басу арқылы жабылады. `falsehide`- ашылмалы тізім ауыстырып-қосқыш түймесін басу және қолмен шақыру немесе `toggle`әдіс арқылы жабылады . (Сондай-ақ пернені басу арқылы жабылмайды `esc`) `'inside'`- ашылмалы мәзір ашылмалы мәзірді басу арқылы жабылады (тек). `'outside'`- ашылмалы мәзір ашылмалы мәзірдің сыртында басу арқылы жабылады (тек). Ескертпе: ашылмалы тізімді әрқашан `ESC`кілтпен жабуға болады.
`boundary`	жол, элемент	`'clippingParents'`	Ашылмалы мәзірдің толып кету шектеуінің шекарасы (тек Поппердің preventOverflow модификаторына қолданылады). Әдепкі бойынша ол `clippingParents`HTMLElement сілтемесін қабылдай алады (тек JavaScript арқылы). Қосымша ақпаратты Поппердің detectOverflow құжаттарынан қараңыз .
`display`	жол	`'dynamic'`	Әдепкі бойынша біз динамикалық орналасу үшін Попперді қолданамыз. Мұны арқылы өшіріңіз `static`.
`offset`	массив, жол, функция	`[0, 2]`	Ашылмалы тізімнің мақсатына қатысты ығысуы. Жолды деректер атрибуттарында үтірмен бөлінген мәндер сияқты жіберуге болады: `data-bs-offset="10,20"`. Функция ығысуды анықтау үшін пайдаланылғанда, ол бірінші аргумент ретінде поппер орналасуын, сілтемесін және поппер ректтерін қамтитын нысанмен шақырылады. Іске қосу элементінің DOM түйіні екінші аргумент ретінде жіберіледі. Функция екі саны бар массивді қайтаруы керек: skidding , distance . Қосымша ақпаратты Поппердің офсеттік құжаттарынан қараңыз .
`popperConfig`	нөл, объект, функция	`null`	Bootstrap әдепкі Popper конфигурациясын өзгерту үшін Поппер конфигурациясын қараңыз . Функция Popper конфигурациясын жасау үшін пайдаланылғанда, ол Bootstrap әдепкі Popper конфигурациясын қамтитын нысанмен шақырылады. Ол әдепкі параметрді өзіңіздің конфигурацияңызбен пайдалануға және біріктіруге көмектеседі. Функция Popper үшін конфигурация нысанын қайтаруы керек.
`reference`	жол, элемент, объект	`'toggle'`	Ашылмалы мәзірдің анықтамалық элементі. `'toggle'`, `'parent'`, HTMLElement сілтемесінің немесе қамтамасыз ететін нысанның мәндерін қабылдайды `getBoundingClientRect`. Қосымша ақпарат алу үшін Поппердің конструктор құжаттарын және виртуалды элемент құжаттарын қараңыз .

функциясын пайдалану`popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Әдістері

Әдіс	Сипаттама
`dispose`	Элементтің ашылмалы тізімін бұзады. (DOM элементінде сақталған деректерді жояды)
`getInstance`	DOM элементімен байланысты ашылмалы дананы алуға мүмкіндік беретін статикалық әдіс, оны келесідей пайдалануға болады: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	DOM элементіне қатысты ашылмалы дананы қайтаратын немесе ол инициализацияланбаған жағдайда жаңасын жасайтын статикалық әдіс. Сіз оны келесідей пайдалана аласыз: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Берілген шарлау тақтасының немесе қойындылы шарлаудың ашылмалы мәзірін жасырады.
`show`	Берілген шарлау тақтасының немесе қойындылы шарлаудың ашылмалы мәзірін көрсетеді.
`toggle`	Берілген шарлау тақтасының немесе қойындылы шарлаудың ашылмалы мәзірін ауыстырады.
`update`	Элементтің ашылмалы тізімінің орнын жаңартады.

Оқиғалар

Барлық ашылмалы оқиғалар ауыспалы элементте іске қосылады, содан кейін көпіршіктеледі. .dropdown-menuСонымен, оқиға тыңдаушыларын ата- ана элементіне қосуға болады . hide.bs.dropdownжәне hidden.bs.dropdownоқиғалардың нұқу оқиғасы үшін Оқиға нысанын қамтитын clickEventсипаты бар (тек Оқиғаның бастапқы түрі болғанда ғана ).click

Оқиға түрі	Сипаттама
`hide.bs.dropdown`	`hide`Дана әдісі шақырылған кезде бірден іске қосылады.
`hidden.bs.dropdown`	Ашылмалы тізімді пайдаланушыдан жасыру және CSS ауысулары аяқталған кезде іске қосылады.
`show.bs.dropdown`	`show`Дана әдісі шақырылған кезде бірден іске қосылады.
`shown.bs.dropdown`	Ашылмалы тізім пайдаланушыға көрініп, CSS ауысулары аяқталған кезде іске қосылады.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

Ашылмалы тізімдер

Шолу

Қол жетімділік

Мысалдар

Жалғыз түйме

Бөлу түймесі

Өлшемді анықтау

Қараңғы ашылмалы тізімдер

Бағыттар

RTL

Орталықтандырылған

Ашылмалы терезе

Ашылмалы терезенің ортасында

Дропен

Dropstart

Мәзір элементтері

Белсенді

Өшірілген

Мәзірді туралау

Жауапты туралау

Туралау опциялары

Мәзір мазмұны

Тақырыптар

Бөлгіштер

Мәтін

Пішіндер

Автоматты жабу әрекеті

CSS

Айнымалылар

Sass айнымалылары

Миксиндер

Қолданылуы

Деректер атрибуттары арқылы

JavaScript арқылы

`data-bs-toggle="dropdown"`әлі де қажет

Опциялар

функциясын пайдалану`popperConfig`

Әдістері

Оқиғалар

Ашылмалы тізімдер

Шолу

Қол жетімділік

Мысалдар

Жалғыз түйме

Бөлу түймесі

Өлшемді анықтау

Қараңғы ашылмалы тізімдер

Бағыттар

RTL

Орталықтандырылған

Ашылмалы терезе

Ашылмалы терезенің ортасында

Дропен

Dropstart

Мәзір элементтері

Белсенді

Өшірілген

Мәзірді туралау

Жауапты туралау

Туралау опциялары

Мәзір мазмұны

Тақырыптар

Ашылмалы тақырып

Бөлгіштер

Мәтін

Пішіндер

Ашылмалы опциялар

Автоматты жабу әрекеті

CSS

Айнымалылар

Sass айнымалылары

Миксиндер

Қолданылуы

Деректер атрибуттары арқылы

JavaScript арқылы

data-bs-toggle="dropdown"әлі де қажет

Опциялар

функциясын пайдалануpopperConfig

Әдістері

Оқиғалар

`data-bs-toggle="dropdown"`әлі де қажет

функциясын пайдалану`popperConfig`