Goitibeherak

Aldatu testuinguru-gainjartzeak esteken zerrendak eta gehiago bistaratzeko Bootstrap goitibeherako pluginarekin.

Orrialde honetan

Ikuspegi orokorra

Goitibeherak txandaka daitezke, esteken zerrendak eta gehiago bistaratzeko testuinguruko gainjartzeak. Elkarreragile egiten dira sartutako Bootstrap goitibeherako JavaScript pluginarekin. Klik eginez txandakatzen dira, ez pasatzean; hau nahita diseinatutako erabakia da .

Goitibeherak hirugarrenen liburutegi batean eraikitzen dira, Popper , zeinak kokapen dinamikoa eta ikuspegia hautematea eskaintzen du. Ziurtatu popper.min.js sartzen duzula Bootstrap-en JavaScript baino lehen edo Popper duen bootstrap.bundle.min.js/ erabili. bootstrap.bundle.jsPopper ez da erabiltzen goitibehurrak nabigazio-barran kokatzeko, baina kokapen dinamikoa ez baita beharrezkoa.

Irisgarritasuna

WAI ARIA estandarrak benetako role="menu"widget bat definitzen du, baina hau ekintzak edo funtzioak abiarazten dituzten aplikazio moduko menuetan espezifikoa da. ARIA menuek menu-elementuak, kontrol-laukiaren menu-elementuak, irrati-botoien menu-elementuak, irrati-botoien taldeak eta azpi-menuak izan ditzakete.

Bootstrap-en goitibehurrak, berriz, generikoak izan daitezen eta hainbat egoera eta marka-egituretarako aplikagarriak dira. Esate baterako, posible da sarrera gehigarriak eta inprimaki-kontrolak dituzten goitibehurrak sortzea, hala nola bilaketa-eremuak edo saioa hasteko inprimakiak. Hori dela eta, Bootstrap-ek ez du espero (ezta automatikoki gehitzen) benetako ARIA menuetarako beharrezkoak rolediren atributuetarik. Egileek beraiek sartu beharko dituzte atributu zehatzago horiek.aria-

Hala ere, Bootstrap-ek teklatuaren menuko interakzio estandar gehienetarako euskarria gehitzen du, hala nola, .dropdown-itemelementu indibidualetan zehar mugitzeko gaitasuna kurtsore-teklak erabiliz eta menua teklarekin ixteko aukera ESC.

Adibideak

Itzulbiratu goitibeherako hautagailua (zure botoia edo esteka) eta goitibeherako menua .dropdown, edo deklaratzen duen beste elementu batean position: relative;. Goitibeherak zure beharretara hobeto egokitzeko elementuetatik abiarazi <a>daitezke . <button>Hemen erakusten diren adibideek <ul>elementu semantikoak erabiltzen dituzte egokia denean, baina marka pertsonalizatua onartzen da.

Botoi bakarra

Edozein single .btngoitibeherako hautagailu bihur daiteke marka-aldaketa batzuekin. Hona hemen bi elementuekin nola jar ditzakezun lanean <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>

Eta <a>elementuekin:

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>

Alderik onena hau edozein botoi aldaerarekin ere egin dezakezula da:

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

Zatitu botoia

Era berean, sortu zatitutako botoien goitibeherako botoi bakarreko goitibeherako ia marka berdinarekin, baina .dropdown-toggle-splitgoitibeherako ikurraren inguruan tarte egokia gehituta.

Klase gehigarri hau kartaren paddingbi aldeetako horizontala % 25 murrizteko eta margin-leftohiko botoien goitibehetarako gehitzen dena kentzeko erabiltzen dugu. Aldaketa gehigarri horiek ikurra zatitutako botoian erdiratuta mantentzen dute eta botoi nagusiaren ondoan tamaina egokiagoko sakatu-eremua eskaintzen dute.

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

Tamaina

Botoien goitibeharrek tamaina guztietako botoiekin funtzionatzen dute, lehenetsitako eta zatitutako goitibeherako botoiak barne.

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

Goitibehitz ilunak

Aukeratu goitibehitz ilunagoak nabigazio-barra ilunarekin edo estilo pertsonalizatuarekin bat etortzeko .dropdown-menu-darklehendik dagoen batean gehituz .dropdown-menu. Ez da aldaketarik behar goitibeherako elementuetan.

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>

Eta nabigazio-barra batean erabiltzeko:

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>

Norabideak

RTL

Jarraibideak ispilu egiten dira Bootstrap RTL-n erabiltzean, hau .dropstartda, eskuineko aldean agertuko da.

Zentratua

Egin goitibeherako menua etengailuaren azpian erdiratuta .dropdown-centerelementu nagusiarekin.

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>

Jaitsiera

.dropupAktibatu goitibeherako menuak elementuen gainean elementu nagusiari gehituz .

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

Egin goitibeherako menua etengailuaren gainean erdiratuta .dropup-centerelementu nagusiarekin.

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

.dropendAktibatu elementuen eskuineko goitibeherako menuak elementu nagusiari gehituz .

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

.dropstartAktibatu elementuen ezkerreko goitibeherako menuak elementu nagusiari gehituz .

<!-- 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>edo <button>elementuak goitibeherako elementu gisa erabil ditzakezu .

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>

Goitibeherako elementu ez-interaktiboak ere sor ditzakezu .dropdown-item-text. Anima zaitez gehiago estiloa CSS edo testu-utilitate pertsonalizatuekin.

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>

Aktiboa

Gehitu .activegoitibeherako elementuei aktibo gisa estiloa jartzeko . Egoera aktiboa laguntza-teknologietara helarazteko, erabili aria-currentatributua — pageuneko orriaren balioa edo truemultzo bateko uneko elementua erabiliz.

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>

Desgaituta

Gehitu .disabledgoitibeherako elementuei desgaitu gisa estiloa jartzeko .

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>

Lehenespenez, goitibeherako menu bat automatikoki kokatzen da % 100ean bere gurasoaren goiko eta ezkerreko aldean. Hau norabide- .drop*klaseekin alda dezakezu, baina modifikatzaile-klase gehigarriekin ere kontrola ditzakezu.

Gehitu .dropdown-menu-enda .dropdown-menueskuinera lerrokatu goitibeherako menua. Jarraibideak ispilu egiten dira Bootstrap RTL-n erabiltzean, hau .dropdown-menu-endda, ezkerreko aldean agertuko da.

Buruak gora! Goitibeherak Popper-i esker kokatzen dira nabigazio-barra batean daudenean izan ezik.

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>

Lerrokadura erantzunkorra

Lerrokatze sentikorra erabili nahi baduzu, desgaitu kokapen dinamikoa data-bs-display="static"atributua gehituz eta erabili aldakuntza klasikoak.

Goitibeherako menua eten puntuarekin edo handiagoarekin eskuinera lerrokatzeko , gehitu .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>

Goitibeherako menua ezkerreko eten puntuarekin edo handiagoarekin lerrokatzeko , gehitu .dropdown-menu-endeta .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>

Kontuan izan ez duzula data-bs-display="static"atributurik gehitu behar goitibeherako botoietan nabigazio-barren, Popper ez baita erabiltzen nabigazio-barren.

Lerrokatzeko aukerak

Goian erakusten diren aukera gehienak hartuta, hona hemen goitibeherako lerrokatze-aukera ezberdinen sukaldeko harraska txikiaren demo bat leku bakarrean.

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>

Goiburuak

Gehitu goiburu bat ekintzen atalak etiketatzeko edozein goitibeherako menutan.

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>

Banatzaileak

Bereizi erlazionatutako menuko elementuen taldeak banatzaile batekin.

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>

Testua

Jarri forma libreko edozein testu goitibeherako menu batean testuarekin eta erabili tartekatzeko utilitateak . Kontuan izan ziurrenik tamaina-estilo gehigarriak beharko dituzula menuaren zabalera mugatzeko.

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>

Formak

Jarri inprimaki bat goitibeherako menu batean, edo egin goitibeherako menu batean, eta erabili marjinak edo betegarrizko utilitateak behar duzun espazio negatiboa emateko.

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>

Erabili data-bs-offsetedo data-bs-referencegoitibeherako kokapena aldatzeko.

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>

Automatikoki ixteko portaera

Lehenespenez, goitibeherako menua itxi egiten da goitibeherako menuaren barruan edo kanpoan klik egitean. autoCloseGoitibeherako portaera hori aldatzeko aukera erabil dezakezu .

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

Aldagaiak

v5.2.0-n gehitua

Bootstrap-en CSS aldagaien bilakaeraren ikuspegiaren barruan, goitibeharrek orain CSS aldagai lokalak aktibatuta .dropdown-menuerabiltzen dituzte denbora errealean pertsonalizatzeko. CSS aldagaien balioak Sass bidez ezartzen dira, beraz, Sass pertsonalizazioa ere onartzen da oraindik ere.

  --#{$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 aldagaien bidezko pertsonalizazioa ikus daiteke .dropdown-menu-darkklasean, non balio zehatzak gainidazten ditugun CSS hautatzaile bikoiztuak gehitu gabe.

  --#{$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 aldagaiak

Goitibeherako aldagaiak:

$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

Goitibeherako iluneko aldagaiak :

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

Goitibeherako interaktibitatea adierazten duten CSS-n oinarritutako kartsuetarako aldagaiak:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

Mixinak

Mixins CSS-n oinarritutako kartsak sortzeko erabiltzen dira eta 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;
    }
  }
}

Erabilera

Datu-atributuen edo JavaScript-en bidez, goitibeherako pluginak ezkutuko edukia (goigabeko menuak) aldatzen du, .showklasea gurasoan aldatuz .dropdown-menu. Atributua aplikazio mailan goitibeherako menuak ixteko oinarritzen da , data-bs-toggle="dropdown"beraz, beti erabiltzea komeni da.

Ukimenerako gaitutako gailuetan, goitibeherako goitibehitza irekitzeak kudeatzaile hutsak gehitzen ditu elementuaren mouseoverberehalako seme-alabei . <body>Truke itsusi hau beharrezkoa da iOS-en gertaeraren delegazioan bitxikeriaren inguruan lan egiteko , eta, bestela, goitibeherako goitibehetik kanpoko edozein tokitan sakatu batek goitibeherako aukera ixten duen kodea abiarazteko eragotziko luke. Goitibehitza itxi ondoren, mouseoverkudeatzaile huts gehigarri hauek kentzen dira.

Datu-atributuen bidez

Gehitu data-bs-toggle="dropdown"esteka edo botoi bati goitibeherako aukera aldatzeko.

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

JavaScript bidez

Deitu goitibehetara JavaScript bidez:

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

`data-bs-toggle="dropdown"`oraindik beharrezkoa

Goitibehera JavaScript bidez deitzen duzun edo datu-api-a erabiltzen duzun ala ez, data-bs-toggle="dropdown"beti beharrezkoa da goitibeherako elementuaren abiarazlean egotea.

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezkeenez, aukera-izen bat gehi diezaiokezu data-bs-, honela data-bs-animation="{value}". Ziurtatu aukera-izenaren kasu-mota " camelCase "-tik " kebab-case "-ra aldatzen duzula aukerak datu-atributuen bidez pasatzen dituzunean. Adibidez, erabili data-bs-custom-class="beautifier"ordez data-bs-customClass="beautifier".

Bootstrap 5.2.0-tik aurrera, osagai guztiek erreserbatutako datu-atributu esperimentaldata-bs-config bat onartzen dute , osagaien konfigurazio sinplea JSON kate gisa gorde dezakeena. Elementu batek data-bs-config='{"delay":0, "title":123}'eta data-bs-title="456"atributuak dituenean, azken titlebalioa izango da 456eta bereizitako datu-atributuek gailuan emandako balioak gainidatziko dituzte data-bs-config. Gainera, lehendik dauden datu-atributuek JSON balioak gorde ditzakete data-bs-delay='{"show":0,"hide":150}'.

Izena	Mota	Lehenetsia	Deskribapena
`autoClose`	boolearra, katea	`true`	Konfiguratu goitibeherako itxiera automatikoko portaera: `true`- goitibehitza itxiko da goitibeherako menutik kanpo edo barruan klik eginez. `false`- Goitibehitza itxi egingo da txandakatzeko botoian klik eginez eta eskuz deituz `hide`edo `toggle`metodora. (Gainera ez da `esc`tekla sakatuta itxiko) `'inside'`- goitibehitza itxiko da (soilik) goitibeherako menuaren barruan klik eginez. `'outside'`- goitibehitza itxiko da (soilik) goitibeherako menutik kanpo klik eginez. Oharra: goitibehitza beti itxi daiteke `ESC`giltzarekin.
`boundary`	katea, elementua	`'clippingParents'`	Goitibeherako menuaren gainezka-murriztapenaren muga (Popper-en preventOverflow modifikatzaileari soilik aplikatzen zaio). Lehenespenez, `clippingParents`HTMLElement erreferentzia bat da eta onartu dezake (JavaScript bidez soilik). Informazio gehiagorako, ikusi Popper-en detectOverflow docs .
`display`	katea	`'dynamic'`	Berez, Popper erabiltzen dugu kokapen dinamikorako. Desgaitu hau erabiliz `static`.
`offset`	array, katea, funtzioa	`[0, 2]`	Goitibeherako desplazamendua bere xedearekiko. Datu-atributuetan kate bat pasa dezakezu komaz bereizitako balioekin: `data-bs-offset="10,20"`. Desplazamendua zehazteko funtzio bat erabiltzen denean, lehen argumentu gisa popper-aren kokapena, erreferentzia eta popper zuzenak dituen objektu batekin deitzen da. DOM nodo abiarazteko elementua bigarren argumentu gisa pasatzen da. Funtzioak bi zenbaki dituen array bat itzuli behar du: skidding , distance . Informazio gehiago lortzeko, ikusi Popper-en offset docs .
`popperConfig`	nulu, objektu, funtzio	`null`	Bootstrap-en Popper konfigurazio lehenetsia aldatzeko, ikusi Popper-en konfigurazioa . Popper konfigurazioa sortzeko funtzio bat erabiltzen denean, Bootstrap-en Popper konfigurazio lehenetsia duen objektu batekin deitzen da. Lehenetsia zure konfigurazioarekin erabiltzen eta batzen laguntzen dizu. Funtzioak konfigurazio-objektu bat itzuli behar du Popperrentzat.
`reference`	katea, elementua, objektua	`'toggle'`	Goitibeherako menuko erreferentzia-elementua. `'toggle'`, `'parent'`, HTMLElement erreferentzia edo objektu baten balioak onartzen ditu `getBoundingClientRect`. Informazio gehiago lortzeko, ikusi Popperren konstruktorearen dokumentuak eta elementu birtualen dokumentuak .

Funtzioa erabiliz`popperConfig`

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

Metodoak

Metodoa	Deskribapena
`dispose`	Elementu baten goitibeherako zerrenda suntsitzen du. (DOM elementuan gordetako datuak kentzen ditu)
`getInstance`	DOM elementu bati lotutako goitibeherako instantzia lortzeko aukera ematen duen metodo estatikoa, honela erabil dezakezu: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Metodo estatikoa DOM elementu bati lotutako goitibeherako instantzia bat itzultzen duena edo berri bat sortzen duena, hasieratu ez bazen. Honela erabil dezakezu: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Nabigazio-barra edo fitxen nabigazio baten goitibeherako menua ezkutatzen du.
`show`	Nabigazio-barra edo fitxen nabigazio baten goitibeherako menua erakusten du.
`toggle`	Nabigazio-barra edo fitxen nabigazio baten goitibeherako menua aldatzen du.
`update`	Elementu baten goitibeherako posizioa eguneratzen du.

Gertaerak

Goitibeherako gertaera guztiak txandakatzeko elementuan abiarazten dira eta gero burbuila egiten dira. Beraz, gertaeren entzuleak ere gehi ditzakezu .dropdown-menu' ren elementu nagusian. hide.bs.dropdowneta hidden.bs.dropdowngertaerek klik-gertaeraren Gertaera Objektu bat daukan clickEventpropietate bat dute (jatorrizko Gertaera mota denean bakarrik ).click

Gertaera mota	Deskribapena
`hide.bs.dropdown`	`hide`Instantzia-metodoa deitzen denean berehala pizten da.
`hidden.bs.dropdown`	Goitibehitza erabiltzaileari ezkutatzen amaitzean eta CSS trantsizioak amaitu direnean piztu da.
`show.bs.dropdown`	`show`Instantzia metodoari deitzen zaionean berehala pizten da.
`shown.bs.dropdown`	Erabiltzaileak goitibehitza ikusgai jarri duenean eta CSS trantsizioak amaitu direnean abiarazi da.

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

Goitibeherak

Ikuspegi orokorra

Irisgarritasuna

Adibideak

Botoi bakarra

Zatitu botoia

Tamaina

Goitibehitz ilunak

Norabideak

RTL

Zentratua

Jaitsiera

Dropup zentratuta

Dropend

Dropstart

Menuko elementuak

Aktiboa

Desgaituta

Menuen lerrokatzea

Lerrokadura erantzunkorra

Lerrokatzeko aukerak

Menuaren edukia

Goiburuak

Banatzaileak

Testua

Formak

Automatikoki ixteko portaera

CSS

Aldagaiak

Sass aldagaiak

Mixinak

Erabilera

Datu-atributuen bidez

JavaScript bidez

`data-bs-toggle="dropdown"`oraindik beharrezkoa

Aukerak

Funtzioa erabiliz`popperConfig`

Metodoak

Gertaerak

Goitibeherak

Ikuspegi orokorra

Irisgarritasuna

Adibideak

Botoi bakarra

Zatitu botoia

Tamaina

Goitibehitz ilunak

Norabideak

RTL

Zentratua

Jaitsiera

Dropup zentratuta

Dropend

Dropstart

Menuko elementuak

Aktiboa

Desgaituta

Menuen lerrokatzea

Lerrokadura erantzunkorra

Lerrokatzeko aukerak

Menuaren edukia

Goiburuak

Goitibeherako goiburua

Banatzaileak

Testua

Formak

Goitibeherako aukerak

Automatikoki ixteko portaera

CSS

Aldagaiak

Sass aldagaiak

Mixinak

Erabilera

Datu-atributuen bidez

JavaScript bidez

data-bs-toggle="dropdown"oraindik beharrezkoa

Aukerak

Funtzioa erabilizpopperConfig

Metodoak

Gertaerak

`data-bs-toggle="dropdown"`oraindik beharrezkoa

Funtzioa erabiliz`popperConfig`