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

Bootstrap ачылуучу плагини менен шилтемелердин тизмелерин жана башкаларды көрсөтүү үчүн контексттик катмарларды которуштуруу.

Бул бетте

Обзор

Ашылма тизмелер шилтемелердин тизмесин жана башкаларды көрсөтүү үчүн которула турган, контексттик катмарлар. Алар камтылган Bootstrap ачылуучу JavaScript плагини менен интерактивдүү жасалды. Алар чычкан менен эмес, чыкылдатуу менен которулат; Бул атайылап долбоорлоо чечими .

Үчүнчү тараптын китепканасында ачылуучу ылдыйлар орнотулган, Popper динамикалык жайгаштырууну жана көрүнүштү аныктоону камсыз кылат. Bootstrap'тин JavaScript'инен мурун popper.min.js жазууну же Попперди камтыган 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

.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

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

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-menuRTLде 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 кошулган

Bootstrap'тин өнүгүп жаткан CSS өзгөрмөлөр ыкмасынын бир бөлүгү катары, ачылуучу тизмелер эми .dropdown-menuреалдуу убакытта жакшыртылган ыңгайлаштыруу үчүн жергиликтүү 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};

CSS өзгөрмөлөрү аркылуу өзгөчөлөштүрүүнү класста көрүүгө болот, .dropdown-menu-darkанда биз кайталанган 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;

Mixins

Миксиндер 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дароо балдарына бош иштеткичтерди кошот . Ырас, бул жийиркеничтүү бузукулук iOS'тун иш-чара делегациясындагы<body> кызыкчылыктын тегерегинде иштөө үчүн зарыл, антпесе, ачылуучу тизмеден тышкаркы каалаган жерди таптап, ачылуучу тизмени жапкан кодду иштетпейт. Ашылма тизме жабылгандан кийин, бул кошумча бош иштеткичтер алынып салынат. 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}'.

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

менен функцияны колдонуу`popperConfig`

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

Методдор

Метод	Description
`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

Окуя түрү	Description
`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

борборлоштурулган

Dropup

Калкып чыгуучу терезенин борборунда

Dropend

Dropstart

Меню пункттары

Активдүү

Өчүрүлгөн

Менюну тегиздөө

Жооптуу тегиздөө

Тегиздөө параметрлери

Меню мазмуну

Баштар

Бөлүүчүлөр

Текст

Формалар

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

CSS

Өзгөрмөлөр

Sass өзгөрмөлөрү

Mixins

Колдонуу

Маалымат атрибуттары аркылуу

JavaScript аркылуу

`data-bs-toggle="dropdown"`дагы эле талап кылынат

Параметрлер

менен функцияны колдонуу`popperConfig`

Методдор

Окуялар

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

Обзор

Жеткиликтүүлүк

Мисалдар

Жалгыз баскыч

Бөлүү баскычы

Өлчөмү

Караңгы ачылуучу тизмелер

Багыттар

RTL

борборлоштурулган

Dropup

Калкып чыгуучу терезенин борборунда

Dropend

Dropstart

Меню пункттары

Активдүү

Өчүрүлгөн

Менюну тегиздөө

Жооптуу тегиздөө

Тегиздөө параметрлери

Меню мазмуну

Баштар

Ашылма баш

Бөлүүчүлөр

Текст

Формалар

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

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

CSS

Өзгөрмөлөр

Sass өзгөрмөлөрү

Mixins

Колдонуу

Маалымат атрибуттары аркылуу

JavaScript аркылуу

data-bs-toggle="dropdown"дагы эле талап кылынат

Параметрлер

менен функцияны колдонууpopperConfig

Методдор

Окуялар

`data-bs-toggle="dropdown"`дагы эле талап кылынат

менен функцияны колдонуу`popperConfig`