გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

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

გადართეთ კონტექსტური გადაფარვები ბმულების სიების საჩვენებლად და სხვა 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>ელემენტთან:

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

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

<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მშობელ ელემენტში დამატებით.

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

წვეთოვანი

ჩართეთ ჩამოსაშლელი მენიუები ელემენტების მარჯვნივ, .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-currentატრიბუტი — pageმიმდინარე გვერდის მნიშვნელობის ან trueნაკრების მიმდინარე ელემენტისთვის.

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

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

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

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

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

ფორმები

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

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

სას

ცვლადები

ცვლადები ყველა ჩამოსაშლელი მენიუსთვის:

$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უშუალო შვილებს ემატება ცარიელ დამმუშავებლებს . <body>ეს, რა თქმა უნდა, მახინჯი ჰაკი აუცილებელია iOS-ის ღონისძიების დელეგაციაში უხერხულობის აღმოსაფხვრელად , რაც სხვაგვარად ხელს შეუშლის ჩამოსაშლელი მენიუს მიღმა შეხებას კოდის გააქტიურებისგან, რომელიც ხურავს ჩამოსაშლელს. ჩამოსაშლელი მენიუს დახურვის შემდეგ, ეს დამატებითი ცარიელი 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-დან kebab-case-ზე, როდესაც ოფციონებს მონაცემთა ატრიბუტებით გადასცემთ. მაგალითად, გამოყენების ნაცვლად data-bs-autoClose="false"გამოიყენეთ data-bs-auto-close="false".

სახელი ტიპი ნაგულისხმევი აღწერა
boundary სიმებიანი | ელემენტი 'clippingParents' ჩამოსაშლელი მენიუს Overflow შეზღუდვის საზღვარი (გამოიყენება მხოლოდ Popper-ის preventOverflow მოდიფიკატორზე). ნაგულისხმევად ის არის 'clippingParents'და შეუძლია მიიღოს HTMLElement მითითება (მხოლოდ JavaScript-ის საშუალებით). დამატებითი ინფორმაციისთვის იხილეთ Popper's detectOverflow docs .
reference სიმებიანი | ელემენტი | ობიექტი 'toggle' ჩამოსაშლელი მენიუს საცნობარო ელემენტი. იღებს 'toggle', 'parent', HTMLElement მითითების ან ობიექტის მნიშვნელობებს getBoundingClientRect. დამატებითი ინფორმაციისთვის იხილეთ პოპერის კონსტრუქტორის დოკუმენტები და ვირტუალური ელემენტების დოკუმენტები .
display სიმებიანი 'dynamic' ნაგულისხმევად, ჩვენ ვიყენებთ Popper-ს დინამიური პოზიციონირებისთვის. გამორთეთ ეს static.
offset მასივი | სიმებიანი | ფუნქცია [0, 2]

ჩამოსაშლელი ჩანაწერის ოფსეტური მიზანთან შედარებით. თქვენ შეგიძლიათ გადასცეთ სტრიქონი მონაცემთა ატრიბუტებში მძიმით გამოყოფილი მნიშვნელობებით, როგორიცაა:data-bs-offset="10,20"

როდესაც ფუნქცია გამოიყენება ოფსეტის დასადგენად, ის გამოიძახება ობიექტით, რომელიც შეიცავს პოპერის განლაგებას, მითითებას და პოპერის რექტს, როგორც მის პირველ არგუმენტს. გამომწვევი ელემენტი DOM კვანძი გადაეცემა მეორე არგუმენტად. ფუნქციამ უნდა დააბრუნოს მასივი ორი რიცხვით: .[skidding, distance]

დამატებითი ინფორმაციისთვის იხილეთ პოპერის ოფსეტური დოკუმენტები .

autoClose ლოგიკური | სიმებიანი true

ჩამოსაშლელი მენიუს ავტომატური დახურვის ქცევის კონფიგურაცია:

  • true- ჩამოსაშლელი მენიუ დაიხურება ჩამოსაშლელი მენიუს გარეთ ან შიგნით დაწკაპუნებით.
  • false- ჩამოსაშლელი მენიუ დაიხურება გადართვის ღილაკზე დაწკაპუნებით და ხელით გამოძახებით hideან toggleმეთოდით. (ასევე არ დაიხურება კლავიშის დაჭერით esc)
  • 'inside'- ჩამოსაშლელი მენიუ დაიხურება (მხოლოდ) ჩამოსაშლელი მენიუში დაწკაპუნებით.
  • 'outside'- ჩამოსაშლელი მენიუ დაიხურება (მხოლოდ) ჩამოსაშლელი მენიუს გარეთ დაწკაპუნებით.
popperConfig null | ობიექტი | ფუნქცია null

Bootstrap-ის ნაგულისხმევი Popper კონფიგურაციის შესაცვლელად იხილეთ Popper-ის კონფიგურაცია .

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

ფუნქციის გამოყენებაpopperConfig

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

მეთოდები

მეთოდი აღწერა
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), რომელიც შეიცავს მოვლენის ობიექტს დაწკაპუნების მოვლენისთვის.

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