ჩამოსაშლელები

გადართეთ კონტექსტური გადაფარვები ბმულების სიების საჩვენებლად და სხვა Bootstrap ჩამოსაშლელი მოდულით.

ამ გვერდზე

მიმოხილვა

ჩამოსაშლელები არის გადართვადი, კონტექსტური გადაფარვები ბმულების სიების საჩვენებლად და სხვა. ისინი ინტერაქტიულია ჩართული Bootstrap ჩამოსაშლელი JavaScript მოდულით. მათი გადართვა ხდება დაწკაპუნებით და არა მატრიცით; ეს არის მიზანმიმართული დიზაინის გადაწყვეტილება .

ჩამოსაშლელი ფაილები აგებულია მესამე მხარის ბიბლიოთეკაზე, Popper- ზე , რომელიც უზრუნველყოფს დინამიურ პოზიციონირებას და ხედის ამოცნობას. დარწმუნდით, რომ ჩართეთ popper.min.js Bootstrap-ის JavaScript-მდე ან გამოიყენეთ bootstrap.bundle.min.js/ bootstrap.bundle.jsრომელიც შეიცავს Popper-ს. პოპერი არ გამოიყენება ნავი ზოლებში ჩამოსაშლელი ჩანართების განსათავსებლად, თუმცა დინამიური პოზიციონირება არ არის საჭირო.

ხელმისაწვდომობა

WAI ARIA სტანდარტი განსაზღვრავს რეალურ role="menu"ვიჯეტს , მაგრამ ეს სპეციფიკურია აპლიკაციის მსგავსი მენიუებისთვის, რომლებიც ახდენენ მოქმედებებს ან ფუნქციებს. ARIA მენიუები შეიძლება შეიცავდეს მხოლოდ მენიუს ელემენტებს, მონიშვნის ველის მენიუს ელემენტებს, რადიო ღილაკების მენიუს ელემენტებს, რადიოს ღილაკების ჯგუფებს და ქვემენიუებს.

მეორეს მხრივ, Bootstrap-ის ჩამოსაშლელი ფაილები შექმნილია როგორც ზოგადი და გამოსაყენებელი სხვადასხვა სიტუაციებისა და მარკირების სტრუქტურებისთვის. მაგალითად, შესაძლებელია ჩამოსაშლელი ფანჯრების შექმნა, რომლებიც შეიცავენ დამატებით შენატანს და ფორმის კონტროლს, როგორიცაა საძიებო ველები ან შესვლის ფორმები. ამ მიზეზით, Bootstrap არ მოელის (არც ავტომატურად დაამატებს) რომელიმე ატრიბუტს role, aria-რომელიც საჭიროა ნამდვილი 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>

და მისი გამოყენება Navbar-ში:

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-enda- .dropdown-menuში მარჯვნივ გასწორება ჩამოსაშლელი მენიუში. RTL-ში Bootstrap-ის გამოყენებისას მიმართულებები ასახულია, რაც ნიშნავს .dropdown-menu-end, რომ გამოჩნდება მარცხენა მხარეს.

Თავები მაღლა! ჩამოსაშლელები პოზიციონირებულია Popper-ის წყალობით, გარდა იმ შემთხვევისა, როდესაც ისინი შეიცავს navbar-ში.

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"ატრიბუტის დამატება ჩამოსაშლელი ღილაკებისთვის navbar-ებში, რადგან Popper არ გამოიყენება ნავი ზოლებში.

გასწორების ვარიანტები

ზემოთ ნაჩვენები ვარიანტების უმეტესობის გათვალისწინებით, აქ არის პატარა სამზარეულოს ნიჟარის დემო ვერსია სხვადასხვა ჩამოსაშლელი გასწორების ვარიანტების ერთ ადგილას.

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>

ფორმები

განათავსეთ ფორმა ჩამოსაშლელ მენიუში, ან გადააქციეთ ის ჩამოსაშლელ მენიუში და გამოიყენეთ ზღვრული ან padding უტილიტები , რომ მისცეთ მას თქვენთვის საჭირო უარყოფითი სივრცე.

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 ცვლადების მიდგომის ნაწილი, ჩამოსაშლელები ახლა იყენებენ ადგილობრივ CSS ცვლადებს .dropdown-menuრეალურ დროში გაუმჯობესებული პერსონალიზაციისთვის. 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;

მიქსინები

მიქსინები გამოიყენება 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, ყველა კომპონენტი მხარს უჭერს ექსპერიმენტულ რეზერვირებული მონაცემთა ატრიბუტს data-bs-config, რომელსაც შეუძლია მარტივი კომპონენტის კონფიგურაცია JSON სტრიქონის სახით. როდესაც ელემენტს აქვს 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`- ჩამოსაშლელი მენიუ დაიხურება ჩამოსაშლელი მენიუს გარეთ ან შიგნით დაწკაპუნებით. `false`- ჩამოსაშლელი მენიუ დაიხურება გადართვის ღილაკზე დაწკაპუნებით და ხელით გამოძახებით `hide`ან `toggle`მეთოდით. (ასევე არ დაიხურება კლავიშის დაჭერით `esc`) `'inside'`- ჩამოსაშლელი მენიუ დაიხურება (მხოლოდ) ჩამოსაშლელი მენიუში დაწკაპუნებით. `'outside'`- ჩამოსაშლელი მენიუ დაიხურება (მხოლოდ) ჩამოსაშლელი მენიუს გარეთ დაწკაპუნებით. შენიშვნა: ჩამოსაშლელი მენიუ ყოველთვის შეიძლება დაიხუროს `ESC`გასაღებით.
`boundary`	სიმებიანი, ელემენტი	`'clippingParents'`	ჩამოსაშლელი მენიუს Overflow შეზღუდვის საზღვარი (გამოიყენება მხოლოდ Popper-ის preventOverflow მოდიფიკატორზე). ნაგულისხმევად ის არის `clippingParents`და შეუძლია მიიღოს HTMLElement მითითება (მხოლოდ JavaScript-ის საშუალებით). დამატებითი ინფორმაციისთვის იხილეთ Popper's detectOverflow docs .
`display`	სიმებიანი	`'dynamic'`	ნაგულისხმევად, ჩვენ ვიყენებთ Popper-ს დინამიური პოზიციონირებისთვის. გამორთეთ ეს `static`.
`offset`	მასივი, სტრიქონი, ფუნქცია	`[0, 2]`	ჩამოსაშლელი ჩანაწერის ოფსეტური მიზანთან შედარებით. თქვენ შეგიძლიათ გადასცეთ სტრიქონი მონაცემთა ატრიბუტებში მძიმით გამოყოფილი მნიშვნელობებით, როგორიცაა: `data-bs-offset="10,20"`. როდესაც ფუნქცია გამოიყენება ოფსეტის დასადგენად, ის გამოიძახება ობიექტით, რომელიც შეიცავს პოპერის განლაგებას, მითითებას და პოპერის რექტის, როგორც მის პირველ არგუმენტს. გამომწვევი ელემენტი DOM კვანძი გადაეცემა მეორე არგუმენტად. ფუნქციამ უნდა დააბრუნოს მასივი ორი ნომრით: ცურვა , მანძილი . დამატებითი ინფორმაციისთვის იხილეთ პოპერის ოფსეტური დოკუმენტები .
`popperConfig`	null, ობიექტი, ფუნქცია	`null`	Bootstrap-ის ნაგულისხმევი Popper კონფიგურაციის შესაცვლელად იხილეთ 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
  }
})

მეთოდები

მეთოდი	აღწერა
`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`