Tīpoka ki te ihirangi matua Tīpoka ki te whakaterenga tuhinga
in English

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 ARIArole="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:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Me nga <a>huānga:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

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 patene kotahi, engari me te .dropdown-toggle-splittaapiri mo te mokowhiti 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.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Me te whakamahi i roto i te pae whakatere:

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

Nga tohutohu

RTL

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

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

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">
    Dropright
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Whakataka maui

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">
  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">Toggle Dropstart</span>
    </button>
    <ul class="dropdown-menu">
      <!-- Dropdown menu links -->
    </ul>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

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.

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

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

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

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

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

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Ihirangi tahua

Pane

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

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

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

Ko etahi tauira kuputuhi e rere noa ana i roto i te tahua takaiho.

A he tuhinga tauira ake tenei.

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

He hou ki konei? Waitohu Kua wareware ki te kupuhipa? 
<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
  <div class="mb-3">
    <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="mb-3">
    <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

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

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

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.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Sass

Taurangi

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:             rgba($black, .15);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x;

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 id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Ma te JavaScript

Karangatia nga takaiho ma te JavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return 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

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-bs-, penei i te data-bs-offset="". Kia mohio koe ki te whakarereke i te momo keehi o te ingoa whiringa mai i camelCase ki te kebab-case ka tukuna nga whiringa ma nga huanga raraunga. Hei tauira, hei utu mo te whakamahi data-bs-autoClose="false", whakamahia data-bs-auto-close="false".

Ingoa Momo Taunoa Whakaahuatanga
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 .
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 .
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 wehea 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 taumahi i te huānga me nga tau e rua: .[skidding, distance]

Mo etahi atu korero tirohia nga tuhinga a Popper .
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, toggletikanga ranei. (Kaore hoki e kati ma te pehi i te esctaviri)
  • '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.
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.

Te whakamahi mahi mepopperConfig

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

Nga tikanga

Tikanga Whakaahuatanga
toggle Ka takahuri i 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.
hide Hunaia 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.
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)

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.

Tikanga Whakaahuatanga
show.bs.dropdown Ka ahi tonu ina karangahia te aratuka tauira whakaatu.
shown.bs.dropdown I puhia ina kitea te takaiho ki te kaiwhakamahi me nga whakawhitinga CSS kua oti.
hide.bs.dropdown Ka ahi tonu ina karangahia te aratuka huna.
hidden.bs.dropdown I puhia ina mutu te hunanga o te takaiho mai i te kaiwhakamahi me nga whakawhitinga CSS kua oti. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})