Droim anuas

Scoránaigh forleagain comhthéacsúla chun liostaí nasc agus tuilleadh a thaispeáint leis an mbreiseán anuas Bootstrap.

Ar an leathanach seo

Forbhreathnú

Is forleagan comhthéacsúla in-scoránaithe iad anuas chun liostaí nasc agus go leor eile a thaispeáint. Déantar iad idirghníomhach leis an mbreiseán JavaScript anuas Bootstrap atá san áireamh. Déantar iad a scoránaigh trí chliceáil, ní trí hovering; is cinneadh deartha d'aon ghnó é seo .

Tógtar dropdowns ar leabharlann tríú páirtí, Popper , a sholáthraíonn suíomh dinimiciúil agus braite radhairc. Bí cinnte popper.min.js a chur san áireamh roimh JavaScript Bootstrap nó úsáid bootstrap.bundle.min.js/ bootstrap.bundle.jsina bhfuil Popper. Ní úsáidtear popper chun anuas a shuíomh sna barraí nascleanúna ach mar ní bhíonn gá le suíomh dinimiciúil.

Inrochtaineacht

Sainmhíníonn caighdeán WAI ARIA role="menu" giuirléid iarbhír , ach baineann sé seo go sonrach le biachláir cosúil le feidhmchláir a spreagann gníomhartha nó feidhmeanna. Ní féidir ach míreanna roghchláir, míreanna roghchláir ticbhosca, míreanna roghchláir cnaipe raidió, grúpaí cnaipí raidió, agus fo-roghchláir a bheith i mbiachláir ARIA .

Ar an láimh eile, tá dropdowns Bootstrap deartha le bheith cineálach agus infheidhme ar éagsúlacht cásanna agus struchtúir marcála. Mar shampla, is féidir anuas a chruthú ina bhfuil ionchuir bhreise agus rialuithe foirme, mar réimsí cuardaigh nó foirmeacha logáil isteach. Ar an ábhar sin, ní bhíonn Bootstrap ag súil le (ná cuireann sé go huathoibríoch) le haon cheann de na tréithe roleagus na aria-tréithe a theastaíonn le haghaidh fíor- roghchláir ARIA . Beidh ar na húdair na tréithe níos sainiúla seo a chur san áireamh iad féin.

Mar sin féin, cuireann Bootstrap tacaíocht ionsuite le haghaidh an chuid is mó de na hidirghníomhaíochtaí caighdeánach roghchlár méarchláir, mar shampla an cumas bogadh trí .dropdown-itemeilimintí aonair ag baint úsáide as na heochracha cúrsóra agus an roghchlár a dhúnadh leis an ESCeochair.

Samplaí

Wrap an scoránaigh anuas (do cnaipe nó nasc) agus an roghchlár anuas laistigh de .dropdown, nó eilimint eile a dhearbhaíonn position: relative;. Is féidir titim anuas a spreagadh ó <a>nó <button>eilimintí a d’oirfeadh níos fearr do do riachtanais ionchasacha. Úsáideann na samplaí a thaispeántar anseo <ul>eilimintí shéimeantacha nuair is cuí, ach tacaítear le marcáil shaincheaptha.

Cnaipe singil

Is féidir aon singil .btna iompú ina scorán anuas le roinnt athruithe marcála. Seo mar is féidir leat iad a chur ag obair le ceachtar den dá <button>eilimint:

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>

Agus le <a>heilimintí:

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>

Is é an chuid is fearr gur féidir leat é seo a dhéanamh le haon malairt cnaipe, freisin:

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

Cnaipe Scoilte

Ar an gcaoi chéanna, cruthaigh anuasanna de chnaipí scoilte a bhfuil an mharcáil chéanna acu beagnach agus anuas ar chnaipí anuas, ach .dropdown-toggle-splitcuir isteach spásáil cheart timpeall ar an gcúram anuas.

Bainimid úsáid as an rang breise seo chun an cothrománach paddingar gach taobh den airíoch a laghdú 25% agus bainimid an ceann margin-lefta chuirtear leis le haghaidh anuas cnaipe rialta. Coinníonn na hathruithe breise sin an cúramóir dírithe ar an gcnaipe scoilte agus soláthraíonn siad limistéar buailte de mhéid níos oiriúnaí in aice leis an bpríomhchnaipe.

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

Sizing

Oibríonn dropdowns cnaipe le cnaipí de gach méid, lena n-áirítear réamhshocraithe agus cnaipí anuas scoilte.

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

Sleamhnáin dorcha

Diúltaigh do roghchlár anuas níos dorcha chun barra nascleanúna dorcha nó stíl shaincheaptha a mheaitseáil trí chur .dropdown-menu-darkle ceann atá ann cheana féin .dropdown-menu. Níl aon athruithe ag teastáil ar na míreanna anuas.

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>

Agus é a úsáid i navbar:

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Treoracha

RTL

Léirítear treoracha agus Bootstrap in úsáid in RTL, .dropstartbeidh an bhrí le feiceáil ar an taobh deas.

Láraithe

Déan an roghchlár anuas lárnaithe faoi bhun an scoránaigh leis .dropdown-centeran máthaireilimint.

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>

Buail isteach

Truicear roghchláir anuas os cionn eilimintí trí chur .dropupleis an máthaireilimint.

<!-- 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 dírithe

Déan an roghchlár anuas dírithe os cionn an scoránaigh leis .dropup-centeran máthaireilimint.

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>

Droichid

Truicear roghchláir anuas ar thaobh na láimhe deise de na heilimintí trí chur .dropendleis an máthaireilimint.

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

Truicear roghchláir anuas ar thaobh na láimhe clé de na heilimintí trí chur .dropstartleis an máthaireilimint.

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

Is féidir leat <a>nó <button>eilimintí a úsáid mar mhíreanna anuas.

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>

Is féidir leat míreanna anuas neamh-idirghníomhacha a chruthú le .dropdown-item-text. Ná bíodh drogall ort tuilleadh stíle a dhéanamh le CSS saincheaptha nó le fóntais téacs.

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>

Gníomhach

Cuir .activele míreanna sa roghchlár anuas chun iad a stíliú mar ghníomhach . Chun an staid ghníomhach a chur in iúl do theicneolaíochtaí cúnta, bain úsáid as an aria-currenttréith — ag baint úsáide as an pageluach don leathanach reatha, nó truedon mhír reatha i sraith.

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>

Faoi mhíchumas

Cuir .disabledle míreanna sa anuas chun iad a stíliú mar dhaoine díchumasaithe .

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>

De réir réamhshocraithe, tá roghchlár anuas suite go huathoibríoch 100% ón mbarr agus ar an taobh clé dá thuismitheoir. Is féidir leat é seo a athrú leis na ranganna treo .drop*, ach is féidir leat iad a rialú freisin le ranganna mionathraithe breise.

Cuir .dropdown-menu-endle a .dropdown-menuar dheis ailíniú an roghchlár anuas. Léirítear treoracha nuair a bhíonn Bootstrap in úsáid in RTL, .dropdown-menu-endbeidh an bhrí le feiceáil ar an taobh clé.

Cinnirí suas! Tá dropdowns suite a bhuíochas sin do Popper ach amháin nuair atá siad i navbar.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Ailíniú sofhreagrach

Más mian leat ailíniú sofhreagrach a úsáid, díchumasaigh suíomh dinimiciúil tríd an data-bs-display="static"tréith a chur leis agus úsáid na ranganna éagsúlachta sofhreagracha.

Chun an roghchlár anuas a ailíniú ar dheis.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end leis an brisphointe tugtha nó níos mó, cuir .

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>

Chun an roghchlár anuas a ailíniú ar chlé.dropdown-menu-end leis an brisphointe tugtha nó níos mó, cuir leis agus .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>

Tabhair faoi deara nach gá duit data-bs-display="static"tréith a chur le cnaipí anuas sna barraí nascleanúna, ós rud é nach n-úsáidtear Popper i mbarraí nascleanúna.

Roghanna ailínithe

Ag glacadh leis an gcuid is mó de na roghanna a thaispeántar thuas, seo taispeántas doirteal cistine beag de roghanna éagsúla ailíniú anuas in aon áit amháin.

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>

Ceanntásca

Cuir ceanntásc leis chun rannóga gníomhartha a lipéadú in aon roghchlár anuas.

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>

Roinnteoirí

Grúpaí ar leith de mhíreanna roghchláir gaolmhara le roinnteoir.

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>

Téacs

Cuir téacs saorfhoirme ar bith laistigh de roghchlár anuas le téacs agus bain úsáid as fóntais spásála . Tabhair faoi deara gur dócha go mbeidh stíleanna breise méide uait chun leithead an roghchláir a shrianadh.

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>

Foirmeacha

Cuir foirm laistigh de roghchlár anuas, nó cuir isteach i roghchlár anuas í, agus úsáid fóntais corrlaigh nó stuála chun an spás diúltach atá uait a thabhairt dó.

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>

Úsáid data-bs-offsetnó data-bs-referencechun suíomh an anuas a athrú.

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>

Iompar dlúth uathoibríoch

De réir réamhshocraithe, tá an roghchlár anuas dúnta nuair a chliceáil laistigh nó lasmuigh den roghchlár anuas. Is féidir leat an autoCloserogha a úsáid chun iompar seo an anuas a athrú.

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

Athróga

Curtha leis in v5.2.0

Mar chuid de chur chuige athróg CSS Bootstrap atá ag teacht chun cinn, úsáideann anuas anuas athróga áitiúla CSS .dropdown-menuchun saincheaptha feabhsaithe fíor-ama a dhéanamh. Socraítear luachanna na n-athróg CSS trí Sass, mar sin tacaítear le saincheaptha Sass fós freisin.

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

Is féidir saincheapadh trí athróga CSS a fheiceáil ar an .dropdown-menu-darkrang ina sáraítear luachanna sonracha gan roghnóirí CSS dúblacha a chur leis.

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

Athróga Sass

Athróga do gach anuas:

$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

Athróga don anuas dorcha :

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

Athróga do na cúramaí CSS-bhunaithe a léiríonn idirghníomhaíocht anuas:

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

Meascáin

Úsáidtear meascáin chun na cúramaí atá bunaithe ar CSS a ghiniúint agus is féidir iad a fháil i 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;
    }
  }
}

Úsáid

Trí bhíthin tréithe sonraí nó JavaScript, déanann an breiseán anuas inneachar folaithe (roghchláir anuas) a scoránaigh tríd an .showrang a scoránú ar an tuismitheoir .dropdown-menu. Bítear ag brath ar an data-bs-toggle="dropdown"tréith chun roghchláir anuas a dhúnadh ag leibhéal feidhmchláir, mar sin is smaoineamh maith é a úsáid i gcónaí.

Ar ghléasanna tadhaill-chumasaithe, cuireann oscailt anuas mouseoverláimhseálaithe folamh le leanaí láithreacha an <body>eilimint. Tá an hack seo atá gránna admhaigh riachtanach chun oibriú timpeall ar chorraíl i dtoscaireacht imeachta iOS , rud a chuirfeadh cosc ar sconna áit ar bith lasmuigh den anuas as an gcód a dhúnann an anuas a spreagadh. mouseoverNuair a dhúntar an anuas, baintear na láimhseálaithe breise folamh seo.

Trí tréithe sonraí

Cuir data-bs-toggle="dropdown"le nasc nó cnaipe chun anuas a scoránaigh.

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

Trí JavaScript

Cuir glaoch ar na anuas trí JavaScript:

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

`data-bs-toggle="dropdown"`fós ag teastáil

Is cuma cé acu a ghlaonn tú ar do anuas trí JavaScript nó ina ionad sin go n-úsáideann tú an data-api, ní mór duit data-bs-toggle="dropdown"a bheith i láthair i gcónaí ar eilimint truicir an anuas.

Roghanna

Toisc gur féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript, is féidir leat ainm rogha a chur i gceangal le data-bs-, mar atá i data-bs-animation="{value}". Bí cinnte cineál an cháis d’ainm na rogha a athrú ó “ camelCase ” go “ kebab-case ” agus tú ag dul thar na roghanna trí tréithe sonraí. Mar shampla, úsáid data-bs-custom-class="beautifier"in ionad data-bs-customClass="beautifier".

Amhail Bootstrap 5.2.0, tacaíonn na comhpháirteanna go léir le tréith sonraí forchoimeádta turgnamhachadata-bs-config ar féidir cumraíocht chomhpháirt shimplí a áireamh mar theaghrán JSON. data-bs-config='{"delay":0, "title":123}'Nuair a bhíonn agus tréithe ag eilimint , is é an luach data-bs-title="456"deiridh a bheidh ann agus sáróidh na tréithe sonraí ar leith na luachanna a thugtar ar . Ina theannta sin, tá tréithe sonraí atá ann cheana in ann luachanna JSON cosúil le .title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Ainm	Cineál	Réamhshocrú	Cur síos
`autoClose`	boolean, sreangán	`true`	Cumraigh iompar dúnta uathoibríoch an anuas: `true`- dúnfar an anuas trí chliceáil taobh amuigh nó taobh istigh den roghchlár anuas. `false`- dúnfar an anuas trí chliceáil ar an gcnaipe scoránaigh agus glaoigh `hide`nó `toggle`modh de láimh. (Ní dhúnfar leis an `esc`eochair freisin) `'inside'`- dúnfar an anuas (amháin) trí chliceáil taobh istigh den roghchlár anuas. `'outside'`- dúnfar an anuas (amháin) trí chliceáil taobh amuigh den roghchlár anuas. Tabhair faoi deara: is féidir an anuas a dhúnadh i gcónaí leis an `ESC`eochair.
`boundary`	téad, eilimint	`'clippingParents'`	Teorainn shrianta thar maoil an roghchláir anuas (ní bhaineann sé seo ach le modhnóir preventOverflow Popper). De réir réamhshocraithe tá sé `clippingParents`agus is féidir glacadh le tagairt HTMLElement (trí JavaScript amháin). Le haghaidh tuilleadh faisnéise déan tagairt do dhoiciméid detectOverflow Popper .
`display`	teaghrán	`'dynamic'`	De réir réamhshocraithe, úsáidimid Popper le haghaidh suíomh dinimiciúil. Díchumasaigh é seo le `static`.
`offset`	eagar, teaghrán, feidhm	`[0, 2]`	Fritháireamh an anuas i gcoibhneas lena sprioc. Is féidir leat teaghrán a chur i tréithe sonraí le luachanna scartha le camóg mar: `data-bs-offset="10,20"`. Nuair a úsáidtear feidhm chun an fhritháireamh a chinneadh, tugtar le réad ina bhfuil an socrúchán popper, an tagairt, agus rects popper mar a chéad argóint. Ritear an nód DOM na heiliminte spreagúla mar an dara argóint. Caithfidh an fheidhm eagar a thabhairt ar ais le dhá uimhir : sleamhnú , fad . Le haghaidh tuilleadh eolais déan tagairt do dhoiciméid fhritháireamh Popper .
`popperConfig`	null, réad, feidhm	`null`	Chun cumraíocht réamhshocraithe Bootstrap Popper a athrú, féach cumraíocht Popper . Nuair a úsáidtear feidhm chun cumraíocht Popper a chruthú, glaoitear í le réad a bhfuil cumraíocht réamhshocraithe Popper Bootstrap ann. Cabhraíonn sé leat an réamhshocrú a úsáid agus a chumasc le do chumraíocht féin. Caithfidh an fheidhm réad cumraíochta a thabhairt ar ais do Popper.
`reference`	teaghrán, eilimint, réad	`'toggle'`	Gné thagartha den roghchlár anuas. Glacann sé le luachanna `'toggle'`, `'parent'`tagairt HTMLElement nó réad a sholáthraíonn `getBoundingClientRect`. Le haghaidh tuilleadh eolais féach ar dhoiciméid cruthaitheoir Popper agus ar dhoiciméid eilimint fhíorúla .

Ag baint úsáide as feidhm le`popperConfig`

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

Modhanna

Modh	Cur síos
`dispose`	Scriosann sé anuas eilimint. (Baintear sonraí stóráilte ar an eilimint DOM)
`getInstance`	Modh statach a cheadaíonn duit an t-aimsear anuas a bhaineann le heilimint DOM a fháil, is féidir leat é a úsáid mar seo: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Modh statach a thugann sampla anuas a bhaineann le heilimint DOM ar ais nó a chruthaíonn ceann nua ar eagla nár cuireadh tús leis. Is féidir leat é a úsáid mar seo: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Folaigh an roghchlár anuas de bharra nav nó nascleanúint cluaisín tugtha.
`show`	Taispeáin an roghchlár anuas de bharra nav nó nascleanúint tabáilte.
`toggle`	Scoránaigh an roghchlár anuas de bharra nascleanúna nó nascleanúint tabáilte.
`update`	Nuashonraítear suíomh anuas gné.

Imeachtaí

Déantar na himeachtaí anuas go léir a mhúchadh ag an eilimint scoránaithe agus ansin boilgeoga suas. Mar sin is féidir leat éisteoirí imeachtaí a chur leis an .dropdown-menueilimint tuismitheora freisin. hide.bs.dropdownagus hidden.bs.dropdowntá clickEventairí ag imeachtaí (ach amháin nuair is é an cineál Imeachta bunaidh click) ina bhfuil Réad Imeachta don imeacht cliceáil.

Cineál imeachta	Cur síos
`hide.bs.dropdown`	Tinte láithreach nuair a bhíonn an `hide`modh ásc glaoite.
`hidden.bs.dropdown`	Breoslaithe nuair a bhíonn an t-íoslódáil críochnaithe á cheilt ón úsáideoir agus aistrithe CSS curtha i gcrích.
`show.bs.dropdown`	Tinte láithreach nuair a bhíonn an `show`modh ásc ar a dtugtar.
`shown.bs.dropdown`	Breoslaithe nuair a bheidh an t-íoslódáil infheicthe don úsáideoir agus aistrithe CSS curtha i gcrích.

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

Droim anuas

Forbhreathnú

Inrochtaineacht

Samplaí

Cnaipe singil

Cnaipe Scoilte

Sizing

Sleamhnáin dorcha

Treoracha

RTL

Láraithe

Buail isteach

Dropup dírithe

Droichid

Dropstart

Míreanna roghchláir

Gníomhach

Faoi mhíchumas

Ailíniú roghchlár

Ailíniú sofhreagrach

Roghanna ailínithe

Ábhar an roghchláir

Ceanntásca

Roinnteoirí

Téacs

Foirmeacha

Iompar dlúth uathoibríoch

CSS

Athróga

Athróga Sass

Meascáin

Úsáid

Trí tréithe sonraí

Trí JavaScript

`data-bs-toggle="dropdown"`fós ag teastáil

Roghanna

Ag baint úsáide as feidhm le`popperConfig`

Modhanna

Imeachtaí

Droim anuas

Forbhreathnú

Inrochtaineacht

Samplaí

Cnaipe singil

Cnaipe Scoilte

Sizing

Sleamhnáin dorcha

Treoracha

RTL

Láraithe

Buail isteach

Dropup dírithe

Droichid

Dropstart

Míreanna roghchláir

Gníomhach

Faoi mhíchumas

Ailíniú roghchlár

Ailíniú sofhreagrach

Roghanna ailínithe

Ábhar an roghchláir

Ceanntásca

Ceanntásc anuas

Roinnteoirí

Téacs

Foirmeacha

Roghanna anuas

Iompar dlúth uathoibríoch

CSS

Athróga

Athróga Sass

Meascáin

Úsáid

Trí tréithe sonraí

Trí JavaScript

data-bs-toggle="dropdown"fós ag teastáil

Roghanna

Ag baint úsáide as feidhm lepopperConfig

Modhanna

Imeachtaí

`data-bs-toggle="dropdown"`fós ag teastáil

Ag baint úsáide as feidhm le`popperConfig`