Негизги мазмунга өтүү Документтердин навигациясына өтүү
in English

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

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

Бул бетте

Обзор

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

Үчүнчү тараптын Поппер китепканасында ылдый түшүүчү тизмелер түзүлөт , ал динамикалык жайгашууну жана көрүнүштү аныктоону камсыз кылат. 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>элемент менен иштөөгө кантип кое аласыз:

<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

RTLде Bootstrap колдонууда багыттар чагылдырылат, мааниси .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-currentpagetrue

<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">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сол тарапта пайда болот.

Көңүл бургула! Ашылма тизмелер Поппердин жардамы менен жайгаштырылат, алар навигация тилкесинде камтылган учурларды кошпогондо. 
<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"Поппер навигация тилкелеринде колдонулбагандыктан, ылдый түшүүчү баскычтарга атрибут кошуунун кереги жок экенин эске алыңыз.

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

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

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

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

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-bs-, сыяктуу эле кошуңуз data-bs-offset="". Опцияларды маалымат атрибуттары аркылуу өткөрүп жатканда, опциондун аталышынын кейпинин түрүн camelCaseтен кебаб-кепке өзгөртүүнү унутпаңыз. Мисалы, колдонуунун ордуна data-bs-autoClose="false", колдонуңуз data-bs-auto-close="false".

аты Type Демейки Description
boundary string | элемент 'clippingParents' Ашылма менюнун ашыкча чектөө чектери (Поппердин preventOverflow өзгөрткүчүнө гана тиешелүү). Демейки боюнча, ал 'clippingParents'HTMLElement шилтемесин кабыл алат жана (JavaScript аркылуу гана). Көбүрөөк маалымат алуу үчүн Поппердин detectOverflow документтерине кайрылыңыз .
reference string | элемент | объект 'toggle' Ашылма менюнун маалымдама элементи. 'toggle', 'parent', HTMLElement шилтемесинин же камсыз кылуучу объекттин маанилерин кабыл алат getBoundingClientRect. Көбүрөөк маалымат алуу үчүн Поппердин конструктор документтерине жана виртуалдык элементтин документтерине кайрылыңыз .
display сап 'dynamic' Демейки боюнча, биз динамикалык жайгаштыруу үчүн Popper колдонобуз. Муну менен өчүрүңүз static.
offset массив | string | функция [0, 2]

Ашылма тизменин максаттуу көрсөткүчүнө салыштырмалуу жылышы. Сиз маалымат атрибуттарында сапты үтүр менен бөлүнгөн маанилер менен өткөрө аласыз, мисалы:data-bs-offset="10,20"

Функция жылышууну аныктоо үчүн колдонулганда, анын биринчи аргументи катары поппер жайгашуусун, шилтемени жана поппер түзмөгүн камтыган объект менен чакырылат. Иштетүүчү элемент DOM түйүнү экинчи аргумент катары өткөрүлөт. Функция эки сандан турган массивди кайтарышы керек: .[skidding, distance]

Көбүрөөк маалымат алуу үчүн Поппердин офсеттик документтерине кайрылыңыз .
autoClose логикалык | сап true

Ашылма тизменин автоматтык жабылышын конфигурациялаңыз:

  • true- ачылуучу менюнун сыртында же ичинде чыкылдатуу менен ачылуучу тизме жабылат.
  • falsehide- ачылуучу тизме өчүрүү баскычын басуу жана кол менен чакыруу же toggleыкма менен жабылат . (Ошондой эле баскычты басуу менен жабылбайт esc)
  • 'inside'- ачылуучу менюнун ичин басуу менен ачылуучу тизме жабылат (гана).
  • 'outside'- ачылуучу менюнун сыртын чыкылдатуу менен ачылуучу тизме жабылат (гана).
popperConfig null | объект | функция null

Bootstrap демейки Popper конфигурациясын өзгөртүү үчүн Поппердин конфигурациясын караңыз .

Функция Popper конфигурациясын түзүү үчүн колдонулганда, ал Bootstrap демейки Popper конфигурациясын камтыган объект менен чакырылат. Бул демейки конфигурацияңызды колдонууга жана бириктирүүгө жардам берет. Функция Поппер үчүн конфигурация объектин кайтарышы керек.

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

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

Методдор

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

Метод Description
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...
})