Umi desplegable rehegua

Embohasa umi ñembojehe’a contextual rehegua ehechauka hag̃ua umi lista enlace ha hetave mba’e Bootstrap plugin desplegable reheve.

Ko páhinape

Tembiecharã

Umi desplegable ha’e toggleable, contextual superposición ojehechauka hag̃ua umi lista enlace rehegua ha hetave mba’e. Ojejapo hikuái interactivo pe JavaScript plugin desplegable Bootstrap oikeva’ekue ndive. Oñembohasa hikuái clic rupive, ndaha’éi ojehoverávo; kóva ha'e peteî decisión intencional diseño reheguáva .

Umi desplegable oñemopuꞌa peteĩ aranduka mbohapýha rehegua, Popper , omeꞌeva ñemohenda dinámico ha jehechakuaa jehechaukaha. Emoĩ katuete popper.min.js Bootstrap JavaScript mboyve térã eipuru bootstrap.bundle.min.js/ bootstrap.bundle.jsoguerekóva Popper. Popper ndojeporúi oñemohenda hag̃ua umi desplegable umi navbar-pe jepémo noñeikotevẽiháicha posicionamiento dinámico.

Accesibilidad rehegua

Pe WAI ARIA jeporupyre odefini peteĩ role="menu"widget añetegua , ha katu kóva haꞌehína específico umi menú aplicación-ichagua omoñepyrũva tembiapo térã tembiaporã. Umi menú ARIA rehegua ikatu oguereko umi mbaꞌe menú rehegua, umi menú vore vore rehegua, umi menú botón radio rehegua, umi aty radio botón rehegua ha umi submenú añoite.

Umi bootstrap mbaꞌekuaarã katu, ojejapo haꞌe hag̃ua genérico ha ojepurukuaa hag̃ua opaichagua situación ha estructura de marcado-pe. Techapyrã, ikatu ojejapo umi desplegable oguerekóva entrada adicional ha control formulario rehegua, haꞌeháicha umi tenda jeheka térã formulario jeikerã. Upévare, Bootstrap noha’arõi (ni omoĩ ijehegui) mba’eveichagua roleha aria-atributo oñeikotevẽva umi menú ARIA añeteguávape g̃uarã. Umi ohaíva oikeva’erã ijeheguiete ko’ã atributo específicovéva.

Ha katu, Bootstrap omoĩve pytyvõ oñemboguapýva hetavéva teclado menú ñembojoajurãme g̃uarã, haꞌeháicha ikatuha ojeguata .dropdown-itemelemento peteĩteĩva rupive ojeporúvo umi tecla cursor ha oñemboty menú ESCtecla reheve.

Tembiecharã

Embojere pe desplegable toggle (nde botón térã enlace) ha menú desplegable ryepýpe .dropdown, térã ambue elemento odeclaráva position: relative;. Umi dropdown ikatu oñemboguata <a>térã <button>elemento-kuéragui oñemohenda porãve hag̃ua ne remikotevẽ potencial. Umi techapyrã ojehechaukáva koꞌape oipuru <ul>elemento semántico oĩhápe, ha katu oñepytyvõ marcado personalizado.

Peteĩ botón añoite

Oimeraẽ peteĩva .btnikatu oñembohasa peteĩ toggle desplegable-pe peteĩ marca ñemoambue reheve. Ko’ápe ojehechauka mba’éichapa ikatu remoĩ omba’apo hag̃ua peteĩva umi <button>elemento ndive:

html rehegua

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

Ha umi <a>elemento reheve:

html rehegua

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

Pe iporãvéva ha’e ikatuha rejapo kóva oimeraẽva botón variante reheve, avei:

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

Botón ojedividi haguã

Upéicha avei, ejapo umi desplegable botón dividido orekóva prácticamente peteĩchagua marcado umi desplegable botón peteĩva ndive, ha katu oñembojoapývo .dropdown-toggle-splitespaciado hekopete caret desplegable jerére.

Jaipuru ko clase extra ñamboguejy hag̃ua horizontal paddingmokõive lado caret-pe 25% ha jaipeꞌa pe margin-leftthat’s oñembojoapýva umi botón desplegable regular-pe g̃uarã. Umi cambio extra omantene pe caret oñecentra pe botón split-pe ha ome’ẽ peteĩ área de golpe tamaño adecuadovéva pe botón principal ykére.

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

Dimensionamiento rehegua

Umi botón desplegable ombaꞌapo umi botón opaichagua tuichakue ndive, umíva apytépe umi botón desplegable por defecto ha dividido.

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

Umi desplegable iñypytũva

Eiporavo umi desplegable iñypytũvévape embojoaju hag̃ua peteĩ navbar iñypytũva térã estilo personalizado emoĩvo .dropdown-menu-darkpeteĩ oĩmava ári .dropdown-menu. Noñeikotevẽi mba’eveichagua ñemoambue umi mba’e ojehechaukávape.

html rehegua

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

Ha omoĩvo ojepuru hag̃ua peteĩ navbar-pe:

html rehegua

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

Direcciones rehegua

RTL rehegua

Umi dirección ojehechauka espejo-pe ojepuru jave Bootstrap RTL-pe, heꞌiséva .dropstartojehechaukáta akatúa gotyo.

Oñecentráva

Ejapo menú desplegable oñecentráva toggle guýpe orekóva .dropdown-centerelemento túva rehe.

html rehegua

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

Emoñepyrũ umi menú desplegable elementokuéra ári emoĩvo .dropupelemento túvape.

<!-- 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 oñecentráva

Ejapo menú desplegable oñecentráva toggle .dropup-centerári orekóva elemento túva rehe.

html rehegua

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

Emoñepyrũ umi menú desplegable umi elemento akatúape emoĩvo .dropendelemento túvape.

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

Ñepyrũrã

Emoñepyrũ umi menú desplegable umi elemento akatúape emoĩvo .dropstartelemento túvape.

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

Ikatu reipuru <a>térã <button>elementokuéra mba’e’oka desplegable ramo.

html rehegua

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

Ikatu avei ejapo umi mba’e’oka ndaha’éiva interactivo .dropdown-item-text. Eñeñandu líbre emoĩve hag̃ua estilo CSS térã jehaipyre purupyrã jeporupyre reheve.

html rehegua

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

Kyre'ỹ

Emoĩve .activeumi mbaꞌe oĩva pe desplegable-pe emoĩ hag̃ua estilo activo ramo . Oñembohasa hag̃ua estado activo umi tecnología pytyvõhárape, eipuru aria-currentatributo — eipuru pagevalor página koꞌag̃aguápe g̃uarã, térã truembaꞌe koꞌag̃agua peteĩ conjunto-pe g̃uarã.

html rehegua

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

Ñemonandi

Emoĩve .disabledumi mba’e’oka oĩva vore’ípe emoĩ hag̃ua estilo oñemboykéva ramo .

html rehegua

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

Por defecto, peteĩ menú desplegable oñemohenda ijeheguiete 100% yvate guive ha ituvakuéra akatúa gotyo. Ikatu remoambue kóva umi .drop*clase direccional ndive, ha katu ikatu avei econtrola umi clase modificador adicional reheve.

Emoĩ .dropdown-menu-endpeteĩ .dropdown-menua derecha gotyo emohenda pe menú desplegable. Umi dirección ojehechauka espejo-pe ojepuru jave Bootstrap RTL-pe, heꞌiséva .dropdown-menu-endojehechaukáta akatúa gotyo.

¡Akã yvate! Umi dropdown oñemohenda gracias a Popper excepto oime jave contenido peteî navbar-pe.

html rehegua

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

Alineación ombohováiva rehegua

Eipuruséramo alineación ombohováiva, embogue posicionamiento dinámico emoĩvo data-bs-display="static"atributo ha eipuru umi clase variación ombohováiva.

Oñemohenda hag̃ua akatúa gotyo menú desplegable punto de ruptura oñeme’ẽva ndive térã tuichavéva ndive, emoĩve .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html rehegua

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

Oñemohenda hag̃ua izquierda menú desplegable punto de ruptura oñemeꞌevaꞌekue ndive térã tuichavéva ndive, emoĩ .dropdown-menu-endha .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html rehegua

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

Eñamindu’u natekotevẽiha emoĩ peteĩ data-bs-display="static"atributo umi botón desplegable-pe umi navbar-pe, Popper ndojeporúigui navbar-pe.

Opciones de alineación rehegua

Oipyhývo hetave opción ojehechaukáva yvate, ko’ápe peteĩ demostración lavabo cocina michĩva opáichagua opción alineación desplegable peteĩ hendápe.

html rehegua

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

Akãrapu’ã

Emoĩ peteĩ iñakãrapuꞌa emoĩ hag̃ua etiqueta umi tembiaporã vore oimeraẽva menú desplegable-pe.

html rehegua

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

Umi omboja’óva

Emboja’o umi aty umi elemento menú rehegua ojoajúva peteĩ divisor reheve.

html rehegua

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

Maranduhai

Emoĩ oimeraẽva jehaipyre forma libre peteĩ menú desplegable ryepýpe jehaipyre reheve ha eipuru umi utilidad espaciado rehegua . Eñamindu’u oiméne reikotevẽtaha estilo de tamaño adicional ejoko hag̃ua menú ipekue.

html rehegua

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

Umi Formulario rehegua

Emoĩ peteĩ formulario peteĩ menú desplegable ryepýpe, térã ejapo peteĩ menú desplegable-pe, ha eipuru umi utilidad margen térã relleno rehegua eme’ẽ hag̃ua chupe espacio negativo reikotevẽva.

html rehegua

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

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

Eipuru data-bs-offsettérã data-bs-referenceemoambue hag̃ua moõpa oĩ pe desplegable.

html rehegua

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

Auto ñemboty jepokuaa

Por defecto, menú desplegable oñemboty ojepyso jave menú desplegable ryepýpe térã okaháre. Ikatu eipuru autoCloseopción emoambue hag̃ua ko jepokuaa pe desplegable rehegua.

html rehegua

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

Variables rehegua

Oñemoĩve v5.2.0-pe

Pehẽngue ramo Bootstrap CSS mbaꞌekuaarã ñemboja’o oñembohapévape, umi mba’e’oka ko’áĝa oipuru umi mba’e’oka CSS tendápegua on .dropdown-menuoñembotuichave hag̃ua ñembohekopyrã tiempo real-pe. Umi mbaꞌekuaarã CSS mbaꞌekuaarãme g̃uarã oñemohenda Sass rupive, upévare oipytyvõ gueteri Sass jeporupyre, avei.

  --#{$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};

Personalización umi variable CSS rupive ikatu ojehecha .dropdown-menu-darkclase-pe ñamboykehápe valor específico ñamoĩ’ỹre umi selector CSS mokõi jey.

  --#{$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 mba’ekuaarã

Umi mba’e’oka opaite mba’e’oka rehegua:

$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

Variables pe desplegable iñypytũvape g̃uarã : .

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

Umi mbaꞌekuaarã umi caret CSS rehegua ohechaukáva peteĩ desplegable interactividad:

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

Mixin-kuéra rehegua

Mixin ojepuru ojejapo hag̃ua umi caret CSS rehegua ha ikatu ojejuhu 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;
    }
  }
}

Jeporu rehegua

Atributo de datos térã JavaScript rupive, pe plugin desplegable ombohasa contenido kañymby (menú desplegable) ombohasávo .showclase túvape .dropdown-menu. Pe data-bs-toggle="dropdown"atributo ojejerovia oñemboty hag̃ua menú desplegable peteĩ aplicación nivel-pe, upévare iporã reipuru meme hag̃ua.

Umi tembipuru oñembohapéva táctil-pe, ojepeꞌa peteĩ desplegable omoĩve umi mouseovermanipulador vacío umi <body>elemento memby pyaꞌeteguápe. Ko hack admitidamente feo oñeikotevëva omba'apo haguã peteî quirk iOS' evento delegación , ambue mba'épe ojokóta peteî tap oimehápe okápe desplegable omoñepyrüva código ombotýva desplegable. Oñemboty rire pe desplegable, mouseoverojeipe’a ko’ã manipulador vacío adicional.

Umi atributo de datos rupive

Emoĩ data-bs-toggle="dropdown"peteĩ enlace térã botón-pe emoambue hag̃ua peteĩ desplegable.

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

JavaScript rupive

Ehenói umi desplegable JavaScript rupive:

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

`data-bs-toggle="dropdown"`oñeikotevẽ gueteri

Taha’e ha’éva ehenóiva ne desplegable JavaScript rupive térã upéva rangue eipuru data-api, data-bs-toggle="dropdown"oñeikotevẽ akóinte oĩ presente pe desplegable elemento desencadenante-pe.

Opciones rehegua

Umi opción ikatuháicha oñembohasa atributo de datos térã JavaScript rupive, ikatu emoĩ peteĩ opción réra data-bs-, -peguáicha data-bs-animation="{value}". Ejesareko emoambue hag̃ua káso tipo opción réra “ camelCase ”-gui “ kebab-case ”-pe embohasávo umi opción atributo de datos rupive. Por ehémplo, eipuru data-bs-custom-class="beautifier"rangue data-bs-customClass="beautifier".

Bootstrap 5.2.0 guive, opaite componente oipytyvõ peteĩ atributo dato reservado experimentaldata-bs-config ikatúva oñemohenda componente configuración simple peteĩ cadena JSON ramo. Peteĩ elemento oguerekóramo data-bs-config='{"delay":0, "title":123}'ha data-bs-title="456"atributo, pe valor paha titlehaꞌeta 456ha umi atributo dato rehegua añónte omboykéta umi valor oñemeꞌevaꞌekue data-bs-config. Avei, umi atributo dato rehegua oĩmava ikatu oguereko JSON mbaꞌekuaarã data-bs-delay='{"show":0,"hide":150}'.

Téra	Hesegua	Upevakuére	Techaukaha
`autoClose`	boolean, vore rehegua	`true`	Emohenda auto cerrar comportamiento pe desplegable rehegua: `true`- pe desplegable oñembotýta ojepysóramo menú desplegable oka gotyo térã hyepýpe. `false`- pe desplegable oñembotýta ojepysóramo pe botón toggle ha oñehenói manualmente `hide`térã `toggle`método. (Avei noñembotymo’ãi ojepysóramo `esc`tecla) `'inside'`- pe mbaꞌekuaarã oñembotýta (añete) ojepysóramo menú ojeguejýva ryepýpe. `'outside'`- pe ñemboguejy oñembotýta (añete) ojepysóramo menú desplegable okaháre. Ñe’ẽñemi: pe desplegable ikatu akóinte oñemboty pe `ESC`clave reheve.
`boundary`	cadena, elemento rehegua	`'clippingParents'`	Límite restricción de desbordamiento menú desplegable rehegua (ojeporu Popper modificador preventOverflow-pe añoite). Por defecto ha’e `clippingParents`ha ikatu omoneĩ peteĩ HTMLElement ñe’ẽmondo (JavaScript rupive añoite). Ojeikuaave hag̃ua ehecha Popper detectOverflow docs .
`display`	sã	`'dynamic'`	Por defecto, jaipuru Popper posicionamiento dinámico-pe g̃uarã. Embogue ko mba’e `static`.
`offset`	matriz, cadena, función rehegua	`[0, 2]`	Desplazamiento pe desplegable rehegua relativo pe meta orekóva rehe. Ikatu embohasa peteĩ vore umi atributo dato rehegua orekóva valor ojeseparáva coma-gui haꞌeháicha: `data-bs-offset="10,20"`. Ojepuru jave peteĩ función ojekuaa hag̃ua desplazamiento, oñehenói peteĩ mbaꞌe reheve oguerekóva popper ñemohenda, referencia ha popper rects peteĩha argumento ramo. Pe elemento desencadenante nodo DOM oñembohasa mokõiha argumento ramo. Pe tembiaporã ombojevyvaꞌerã peteĩ matriz oguerekóva mokõi papapy: skidding , distance . Ojeikuaave hag̃ua ehecha Popper offset docs .
`popperConfig`	nulo, mba’e, tembiaporã	`null`	Oñemoambue hag̃ua Bootstrap Popper ñemboheko tee, ehecha Popper ñemboheko . Ojepuru jave peteĩ tembiaporã ojejapo hag̃ua Popper ñemboheko, oñehenói peteĩ mbaꞌe reheve oguerekóva Bootstrap Popper ñemboheko tee. Oipytyvõ eipuru ha embojoaju hag̃ua pe ñepyrũrã ne ñemboheko tee ndive. Pe tembiaporã ombojevyva’erã peteĩ mba’e’oka configuración rehegua Popper-pe g̃uarã.
`reference`	cadena, elemento, mba’ekuaarã	`'toggle'`	Elemento de referencia menú desplegable rehegua. Omoneĩ umi mbaꞌekuaarã `'toggle'`, `'parent'`, peteĩ HTMLElement ñeꞌemondo térã peteĩ mbaꞌe omeꞌeva `getBoundingClientRect`. Ojeikuaave hag̃ua ehecha Popper constructor docs ha elemento virtual docs .

Oipurúvo función orekóva`popperConfig`

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

Método-kuéra rehegua

Tapereko	Techaukaha
`dispose`	Ohundi peteĩ elemento desplegable. (Oipeꞌa umi dato oñeñongatúva elemento DOM-pe)
`getInstance`	Método estático ohejáva ndéve rehupyty instancia desplegable ojoajúva peteĩ elemento DOM rehe, ikatu reipuru kóicha: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Método estático ombojevýva peteĩ instancia desplegable ojoajúva peteĩ elemento DOM rehe térã omoheñói peteĩ pyahu en caso noñemoñepyrũi. Ikatu reiporu péicha: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Oñomi menú desplegable peteĩ navbar térã navegación ficha oñemeꞌevaꞌekue rehegua.
`show`	Ohechauka menú desplegable peteĩ navbar térã navegación ficha oñemeꞌevaꞌekue rehegua.
`toggle`	Ombohasa menú desplegable peteĩ navbar térã navegación ficha oñemeꞌevaꞌekue rehegua.
`update`	Ombopyahu peteĩ elemento ñemboguejyha ñemohenda.

Umi mba’e oikóva

Opaite mbaꞌe ojehúva desplegable ojedispara elemento toggling rehe ha upéi ojeburbuja yvate gotyo. Upéicha ikatu avei emoĩve umi evento ohendúva pe .dropdown-menu's elemento túva rehe. hide.bs.dropdownha hidden.bs.dropdownumi mbaꞌe ojehúva oguereko peteĩ clickEventmbaꞌekuaarã (Evento ñemohenda ypykue haꞌe jave añoite click) oguerekóva peteĩ Objeto Evento rehegua pe mbaꞌe ojehúva clic-pe g̃uarã.

Tipo de evento rehegua	Techaukaha
`hide.bs.dropdown`	Ombogue pyaꞌe oñehenói rire pe `hide`método instancia rehegua.
`hidden.bs.dropdown`	Oñemosẽ oñemohu’ãvo pe desplegable oñeñomi puruháragui ha oñemohu’ãma CSS jehaipyre.
`show.bs.dropdown`	Ombogue pyaꞌe oñehenói jave `show`método instancia rehegua.
`shown.bs.dropdown`	Oñemosẽ ojejapo rire pe desplegable ojehecha hag̃ua puruhárape ha oñemohuꞌa rire umi CSS jehaipyre.

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

Umi desplegable rehegua

Tembiecharã

Accesibilidad rehegua

Tembiecharã

Peteĩ botón añoite

Botón ojedividi haguã

Dimensionamiento rehegua

Umi desplegable iñypytũva

Direcciones rehegua

RTL rehegua

Oñecentráva

Dropup rehegua

Dropup oñecentráva

Dropend rehegua

Ñepyrũrã

Umi mba’e oĩva menúpe

Kyre'ỹ

Ñemonandi

Menú ñemohenda

Alineación ombohováiva rehegua

Opciones de alineación rehegua

Menú contenido rehegua

Akãrapu’ã

Umi omboja’óva

Maranduhai

Umi Formulario rehegua

Auto ñemboty jepokuaa

CSS rehegua

Variables rehegua

Sass mba’ekuaarã

Mixin-kuéra rehegua

Jeporu rehegua

Umi atributo de datos rupive

JavaScript rupive

`data-bs-toggle="dropdown"`oñeikotevẽ gueteri

Opciones rehegua

Oipurúvo función orekóva`popperConfig`

Método-kuéra rehegua

Umi mba’e oikóva

Umi desplegable rehegua

Tembiecharã

Accesibilidad rehegua

Tembiecharã

Peteĩ botón añoite

Botón ojedividi haguã

Dimensionamiento rehegua

Umi desplegable iñypytũva

Direcciones rehegua

RTL rehegua

Oñecentráva

Dropup rehegua

Dropup oñecentráva

Dropend rehegua

Ñepyrũrã

Umi mba’e oĩva menúpe

Kyre'ỹ

Ñemonandi

Menú ñemohenda

Alineación ombohováiva rehegua

Opciones de alineación rehegua

Menú contenido rehegua

Akãrapu’ã

Ñe’ẽryru desplegable rehegua

Umi omboja’óva

Maranduhai

Umi Formulario rehegua

Opciones desplegables rehegua

Auto ñemboty jepokuaa

CSS rehegua

Variables rehegua

Sass mba’ekuaarã

Mixin-kuéra rehegua

Jeporu rehegua

Umi atributo de datos rupive

JavaScript rupive

data-bs-toggle="dropdown"oñeikotevẽ gueteri

Opciones rehegua

Oipurúvo función orekóvapopperConfig

Método-kuéra rehegua

Umi mba’e oikóva

`data-bs-toggle="dropdown"`oñeikotevẽ gueteri

Oipurúvo función orekóva`popperConfig`