Whakataka

Takahurihia nga whakakikorua horopaki mo te whakaatu i nga rarangi hononga me te maha atu me te Bootstrap takaiho monomai.

I tenei wharangi

Tirohanga

Ka takahurihia nga whakahekenga, he whakakikorua horopaki mo te whakaatu i nga rarangi hononga me etahi atu. He mea tauwhitiwhiti me te whakauru Bootstrap takaiho mono JavaScript. Ka takahurihia ma te panui, kaua ma te whakaparo; he whakatau hoahoa tenei .

Ka hangaia nga whakahekenga ki runga i te whare pukapuka tuatoru, Popper , e whakarato ana i te tuunga hihiri me te tirohanga tirohanga. Kia mahara ki te whakauru i te popper.min.js i mua i te JavaScript a Bootstrap me te whakamahi bootstrap.bundle.min.js/ bootstrap.bundle.jskei roto Popper. Kare a Popper e whakamahia ki te tuu i nga takaiho i roto i nga pae whakatere ahakoa kaore e hiahiatia te tuunga hihiri.

Te urunga

Ko te paerewa WAI ARIA role="menu" e tautuhi ana i tetahi widget tuuturu , engari he mea motuhake tenei ki nga tahua-a-tono e whakaohooho ana i nga mahi, i nga mahi ranei. Ka taea anake e nga tahua ARIA nga taonga tahua, nga taonga tahua pouakataki, nga taonga tahua patene reo irirangi, nga roopu paatene reo irirangi, me nga tahua-iti.

Ko nga whakahekenga a Bootstrap, i tetahi atu taha, he mea hoahoa kia whanui me te whai waahi ki nga momo ahuatanga me nga hanganga tohu. Hei tauira, ka taea te hanga i nga takaiho kei roto etahi atu whakaurunga me nga mana puka, penei i nga mara rapu me nga puka takiuru. Mo konei, kaore a Bootstrap e tatari (kaore ano e taapiri aunoa) tetahi o nga roleme nga aria-huanga e hiahiatia ana mo nga tahua ARIA pono. Me whakauru e nga kaituhi enei huanga ake ake.

Heoi, ka taapirihia e Bootstrap te tautoko i hangaia mo te nuinga o nga taunekeneke tahua papapātuhi paerewa, penei i te kaha ki te neke i roto i nga .dropdown-itemhuānga takitahi ma te whakamahi i nga kii pehu me te kati i te tahua me te ESCki.

Tauira

Takaia te takahuri o te takaiho (to patene, hono ranei) me te tahua takaiho ki roto .dropdown, tetahi atu huānga ranei e whakaatu ana position: relative;. Ka taea te whakaheke mai i nga huānga <a>ranei <button>kia pai ake ai to hiahia. Ko nga tauira e whakaatuhia ana i konei ka whakamahi i nga <ul>huānga oro i nga waahi e tika ana, engari kei te tautokohia te tohu ritenga.

Patene kotahi

Ka .btntaea te huri ki te takahuri takahuri me etahi huringa tohu. Anei me pehea e taea ai e koe te mahi me nga <button>huānga e rua:

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>

Me nga <a>huānga:

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>

Ko te waahanga pai rawa atu ka taea e koe te mahi i tenei me nga momo paatene, ano:

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

Patene wehe

Waihoki, hangahia nga takahanga patene ritua me te tohu rite tonu ki nga takahanga paatene kotahi, engari me te .dropdown-toggle-splittaapiri mo te mokowā tika huri noa i te kaata takaiho.

Ka whakamahia e matou tenei karaehe taapiri hei whakaiti i te whakapae paddingi tetahi taha o te kareti ma te 25% me te tango margin-lefti te taapiri mo te whakaheke i nga paatene. Ko enei huringa taapiri ka noho tonu te tiaki ki roto i te paatene wehe me te whakarato i te waahanga tika ake i te taha o te paatene matua.

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

Te rahinga

Ka mahi nga patene takaiho me nga paatene o nga rahi katoa, tae atu ki nga paatene takaiho taunoa me te wehea.

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

Nga takaiho pouri

Whakauruhia ki nga takaiho pouri ake kia taurite ki te pae whakaterenga pouri, ki te ahua ritenga ranei ma te taapiri atu .dropdown-menu-darkki tetahi o naianei .dropdown-menu. Karekau he huringa ki nga mea takaiho.

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>

Me te whakamahi i roto i te pae whakatere:

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>

Nga tohutohu

RTL

Ka whakaatahia nga ahunga ina whakamahi i a Bootstrap i RTL, .dropstartka puta te tikanga ki te taha matau.

Pokapū

Whakaritea te tahua takaiho ki raro i te takahuri me .dropdown-centerte huānga matua.

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>

Whakataka

Keu i nga tahua takaiho ki runga ake ma te taapiri atu .dropupki te huānga matua.

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

Whakataka i waenganui

Hangaia te tahua takaake ki runga ake i te takahuri me .dropup-centerte huānga matua.

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>

Whakataka

Keu i nga tahua takaiho kei te taha matau o nga huānga ma te taapiri atu .dropendki te huānga matua.

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

Whakarewa

Whakaotia nga tahua takaiho kei te taha maui o nga huānga ma te taapiri atu .dropstartki te huānga matua.

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

Ka taea e koe te whakamahi i nga huānga <a>ranei <button>hei taonga takaiho.

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>

Ka taea hoki e koe te hanga i nga taonga takaiho-kore me te .dropdown-item-text. Kaua e pai ki te hanga taapiri me te CSS ritenga me nga taputapu tuhinga.

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>

Hohe

Tāpirihia .activeki ngā tūemi kei te takaiho hei kāhua hei hohe . Hei kawe i te ahua kaha ki nga hangarau awhina, whakamahia te aria-currenthuanga — te whakamahi i te pageuara mo te wharangi o naianei, truemo te taonga o naianei kei roto i te huinga.

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>

Kua haua

Tāpirihia .disabledki ngā tūemi kei roto i te takaiho hei kāhua hei monokia .

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>

Ma te taunoa, ka tuu aunoa he tahua takaiho 100% mai i runga me te taha maui o tona matua. Ka taea e koe te whakarereke me nga .drop*karaehe ahunga, engari ka taea ano e koe te whakahaere me etahi atu karaehe whakarereke.

Tāpirihia .dropdown-menu-endki te .dropdown-menutaha matau tiaarohia te tahua takaiho. Ka whakaatahia nga ahunga ina whakamahi i a Bootstrap i RTL, .dropdown-menu-endka puta te tikanga ki te taha maui.

Mahunga ake! Ka tuuhia nga whakahekenga he mihi ki a Popper engari mena kei roto i te pae whakatere.

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>

Tirohanga aro

Mena kei te pirangi koe ki te whakamahi i te tirohanga urupare, monohia te tuunga hihiri ma te taapiri i te data-bs-display="static"huanga me te whakamahi i nga karaehe rerekee urupare.

Hei whakahāngai matau i te tahua takaiho ki te waahi wehe, nui ake ranei, taapirihia .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>

Hei whakahāngai i te tahua takaiho ki te taha maui ki te waahi wehe, nui ake ranei, taapiri .dropdown-menu-endme te .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>

Kia mahara kaore koe e hiahia ki te taapiri i tetahi data-bs-display="static"huanga ki nga paatene takaiho i roto i nga pae whakatere, i te mea karekau a Popper e whakamahia ki nga pae whakatere.

Kōwhiringa tīaroaro

Ma te tango i te nuinga o nga whiringa e whakaatuhia ana i runga ake nei, koinei te whakaaturanga totohu kihini iti o nga momo whiringa tirohanga whakararo i te waahi kotahi.

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>

Pane

Tāpirihia he pane hei tapanga i nga waahanga o nga hohenga ki tetahi tahua takaiho.

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>

Kaiwehewehe

Whakawehea nga roopu o nga mea tahua e pa ana ki te wehewehe.

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>

Kuputuhi

Whakanohoia he kupu tuhi noa ki roto i te tahua takaiho me te tuhinga me te whakamahi taputapu mokowhiti . Kia mahara ka hiahia koe ki etahi atu momo rahinga hei aukati i te whanui tahua.

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>

Puka

Tuhia he puka ki roto i te tahua takaiho, waiho ranei ki roto i te tahua takaiho, ka whakamahi i te tawhē, i nga taputapu padding ranei hei hoatu i te waahi kino e hiahia ana koe.

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>

Whakamahia data-bs-offset, data-bs-referencehei huri ranei i te waahi o te takaiho.

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>

Te whanonga kati aunoa

Ma te taunoa, ka katia te tahua takaiho ina pao ana ki roto, ki waho ranei o te tahua takaiho. Ka taea e koe te whakamahi i te autoClosekōwhiringa ki te huri i tēnei whanonga o te takaiho.

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

Taurangi

Kua taapirihia ki te v5.2.0

Hei waahanga o nga huringa CSS e tipu haere ana a Bootstrap, ka whakamahia e nga whakahekenga inaianei nga taurangi CSS rohe .dropdown-menumo te whakapai ake i te waa-waa. Ko nga uara mo nga taurangi CSS ka whakatauhia ma te Sass, no reira kei te tautoko tonu te whakaritenga Sass.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

Ka kitea te whakaritenga ma nga taurangi CSS i runga i te .dropdown-menu-darkkaraehe ka takahia e tatou nga uara motuhake me te kore e taapiri i nga kaiwhiriwhiri CSS takirua.

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

Taurangi Sass

Taurangi mo nga takaiho katoa:

$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

Taurangi mo te takataka pouri :

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

Ko nga taurangi mo nga tohu-a-CSS e tohu ana i te tauwhitiwhitinga o te takaiho:

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

Whakaranu

Ka whakamahia nga Mixins ki te whakaputa i nga tohu-a-CSS ka kitea i roto i te 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;
    }
  }
}

Whakamahinga

Ma nga huanga raraunga, JavaScript ranei, ka takahurihia e te mono takahuri nga ihirangi huna (nga tahua takaiho) ma te huri i te .showkaraehe i runga i te matua .dropdown-menu. Ka whakawhirinakihia te data-bs-toggle="dropdown"huanga mo te kati i nga tahua takaiho i te taumata tono, no reira he pai ki te whakamahi i nga wa katoa.

I runga i nga taputapu pa-whakahohea, ko te whakatuwhera i te takaiho ka mouseovertaapirihia nga kaikawe putunga ki nga tamariki tonu o te <body>huānga. Ko tenei hack tino kino he mea tika ki te mahi i tetahi quirk i roto i te roopu huihuinga a iOS , ka kore e taea te paopao ki tetahi wahi i waho o te maturuturunga iho mai i te whakaoho i te waehere ka kati i te takaiho. Ina katia te takaiho, ka mouseovertangohia enei kaihautu putunga.

Ma nga huanga raraunga

Tāpirihia data-bs-toggle="dropdown"ki tētahi hono, pātene rānei hei takahuri i te takaiho.

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

Ma te JavaScript

Karangatia nga takaiho ma te JavaScript:

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

`data-bs-toggle="dropdown"`hiahiatia tonu

Ahakoa ka karanga koe i to takaiho ma te JavaScript, me whakamahi ranei i te raraunga-api, data-bs-toggle="dropdown"me noho tonu koe ki te huānga whakaoho o te takaiho.

Kōwhiringa

I te mea ka tukuna nga whiringa ma nga huanga raraunga, JavaScript ranei, ka taea e koe te taapiri i tetahi ingoa whiringa ki data-bs-, penei i te data-bs-animation="{value}". Kia mohio koe ki te whakarereke i te momo keehi o te ingoa whiringa mai i te " CamelCase " ki te " kebab-case " ka tukuna nga whiringa ma nga huanga raraunga. Hei tauira, whakamahia data-bs-custom-class="beautifier"hei utu mo data-bs-customClass="beautifier".

Mai i te Bootstrap 5.2.0, ka tautoko nga waahanga katoa i tetahi huanga raraunga kua rahuitia hei whakamatautaudata-bs-config ka taea te whakanoho i te whirihoranga waahanga ngawari hei aho JSON. Ina he huānga data-bs-config='{"delay":0, "title":123}'me data-bs-title="456"nga huanga, ko te titleuara whakamutunga 456ko nga huanga raraunga motuhake ka takahia nga uara kua hoatu ki runga data-bs-config. I tua atu, ka taea e nga huanga raraunga o mua te whakanoho i nga uara JSON penei i te data-bs-delay='{"show":0,"hide":150}'.

Ingoa	Momo	Taunoa	Whakaahuatanga
`autoClose`	boolean, aho	`true`	Whirihorahia te whanonga kati aunoa o te takaiho: `true`- ka katia te takaiho ma te panui ki waho, ki roto ranei i te tahua takaiho. `false`- ka katia te takaiho ma te panui i te paatene takahuri me te waea a-ringa `hide`, `toggle`tikanga ranei. (Kaore hoki e kati ma te pehi i te `esc`taviri) `'inside'`- ka kati te takaiho (anake) ma te panui i roto i te tahua takaiho. `'outside'`- ka kati te takaiho (anake) ma te panui i waho o te tahua takaiho. Kia mahara: ka taea te kati te takaiho me te `ESC`kī.
`boundary`	aho, huānga	`'clippingParents'`	Te rohe herenga puhake o te tahua takaiho (e pa ana ki te whakakē aukatiOverflow a Popper anake). Ma te taunoa `clippingParents`ka taea te whakaae ki tetahi tohutoro HTMLElement (ma JavaScript anake). Mo etahi atu korero tirohia nga tuhinga detectOverflow a Popper .
`display`	aho	`'dynamic'`	Ma te taunoa, ka whakamahia e matou te Popper mo te tuunga hihiri. Monokia tenei ki te `static`.
`offset`	huinga, aho, mahi	`[0, 2]`	Wehenga o te takaiho e pa ana ki tana whaainga. Ka taea e koe te tuku aho ki nga huanga raraunga me nga uara wehe piko penei: `data-bs-offset="10,20"`. Ina whakamahia he taumahi ki te whakatau i te wehenga, ka karangahia me tetahi mea kei roto te tuunga popper, te tohutoro, me te popper rects hei tohenga tuatahi. Ka tukuna te node DOM huānga whakaoho hei tohenga tuarua. Me whakahoki te mahi i te huānga me nga tau e rua: paheke , tawhiti . Mo etahi atu korero tirohia nga tuhinga a Popper .
`popperConfig`	null, ahanoa, mahi	`null`	Hei huri i te whirihora Popper taunoa a Bootstrap, tirohia te whirihoranga a Popper . Ina whakamahia he mahi hei hanga i te whirihoranga Popper, ka karangahia me tetahi mea kei roto te whirihoranga Popper taunoa a Bootstrap. Ka awhina koe ki te whakamahi me te hanumi i te taunoa me to ake whirihoranga. Me whakahoki te mahi i tetahi ahanoa whirihoranga mo Popper.
`reference`	aho, huānga, ahanoa	`'toggle'`	Huānga tohutoro o te tahua takaiho. Ka whakaae ki nga uara o te `'toggle'`, `'parent'`, he tohutoro HTMLElement, he ahanoa ranei e whakarato ana `getBoundingClientRect`. Mo etahi atu korero tirohia nga tuhinga kaihanga a Popper me nga tuhinga huānga mariko .

Te whakamahi mahi me`popperConfig`

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

Nga tikanga

Tikanga	Whakaahuatanga
`dispose`	Ka whakakore i te takaiho o tetahi huānga. (Tangohia ai nga raraunga rongoa i te huānga DOM)
`getInstance`	Tikanga pateko e taea ai e koe te tiki i te tauira takaiho e hono ana ki tetahi huānga DOM, ka taea e koe te whakamahi penei: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Aratuka pateko e whakahoki mai ana i tetahi takahanga takaiho e hono ana ki tetahi huānga DOM, ka hanga ranei i tetahi mea hou mena kaore i arawhitia. Ka taea e koe te whakamahi penei `bootstrap.Dropdown.getOrCreateInstance(element)`:.
`hide`	Hunaia te tahua takaiho o te pae whakaterenga kua tohua, te whakatere ripa ranei.
`show`	He whakaatu i te tahua takaiho o te pae whakaterenga kua tohua, te whakatere ripa ranei.
`toggle`	Ka takahuri i te tahua takaiho o te pae whakaterenga kua tohua, te whakatere ripa ranei.
`update`	He whakahōu i te tūnga o te takaiho o te huānga.

Nga huihuinga

Ka pupuhihia nga takahanga taka-iho katoa ki te huānga takahuri, ka mirumiru ake. Na ka taea ano e koe te taapiri i nga kaiwhakarongo takahanga i runga i te .dropdown-menuhuānga matua '. hide.bs.dropdownme hidden.bs.dropdownnga huihuinga he clickEventtaonga (anake ko te momo Takahanga taketake click) kei roto he Ahanoa Takahanga mo te takahanga paato.

Momo takahanga	Whakaahuatanga
`hide.bs.dropdown`	Ka tahuna tonu ina `hide`kua karangahia te tikanga tauira.
`hidden.bs.dropdown`	I puhia ina mutu te hunanga o te takaiho mai i te kaiwhakamahi me nga whakawhitinga CSS kua oti.
`show.bs.dropdown`	Ka ahi tonu ina `show`karangahia te aratuka tauira.
`shown.bs.dropdown`	I puhia ina kitea te takaiho ki te kaiwhakamahi me nga whakawhitinga CSS kua oti.

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

Whakataka

Tirohanga

Te urunga

Tauira

Patene kotahi

Patene wehe

Te rahinga

Nga takaiho pouri

Nga tohutohu

RTL

Pokapū

Whakataka

Whakataka i waenganui

Whakataka

Whakarewa

Tuemi tahua

Hohe

Kua haua

Tirohanga tahua

Tirohanga aro

Kōwhiringa tīaroaro

Ihirangi tahua

Pane

Kaiwehewehe

Kuputuhi

Puka

Te whanonga kati aunoa

CSS

Taurangi

Taurangi Sass

Whakaranu

Whakamahinga

Ma nga huanga raraunga

Ma te JavaScript

`data-bs-toggle="dropdown"`hiahiatia tonu

Kōwhiringa

Te whakamahi mahi me`popperConfig`

Nga tikanga

Nga huihuinga

Whakataka

Tirohanga

Te urunga

Tauira

Patene kotahi

Patene wehe

Te rahinga

Nga takaiho pouri

Nga tohutohu

RTL

Pokapū

Whakataka

Whakataka i waenganui

Whakataka

Whakarewa

Tuemi tahua

Hohe

Kua haua

Tirohanga tahua

Tirohanga aro

Kōwhiringa tīaroaro

Ihirangi tahua

Pane

Pane takaiho

Kaiwehewehe

Kuputuhi

Puka

Kōwhiringa takaiho

Te whanonga kati aunoa

CSS

Taurangi

Taurangi Sass

Whakaranu

Whakamahinga

Ma nga huanga raraunga

Ma te JavaScript

data-bs-toggle="dropdown"hiahiatia tonu

Kōwhiringa

Te whakamahi mahi mepopperConfig

Nga tikanga

Nga huihuinga

`data-bs-toggle="dropdown"`hiahiatia tonu

Te whakamahi mahi me`popperConfig`