ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
Check
in English

መውረድ

የአገናኞች ዝርዝሮችን እና ሌሎችንም በBootstrap ተቆልቋይ ተሰኪ ለማሳየት አውድ ተደራቢዎችን ቀይር።

በዚህ ገጽ ላይ

አጠቃላይ እይታ

ተቆልቋይዎች ሊቀያየሩ የሚችሉ፣ የአገናኞች ዝርዝሮችን ለማሳየት አውድ ተደራቢዎች እና ሌሎችም። ከተካተቱት የቡትስትራፕ ተቆልቋይ ጃቫ ስክሪፕት ተሰኪ ጋር መስተጋብራዊ እንዲሆኑ ተደርገዋል። እነሱ በማንዣበብ ሳይሆን ጠቅ በማድረግ ይቀየራሉ; ይህ ሆን ተብሎ የተደረገ የንድፍ ውሳኔ ነው.

ተቆልቋይዎች በሶስተኛ ወገን ቤተ-መጽሐፍት ላይ የተገነቡ ናቸው ፖፐር , እሱም ተለዋዋጭ አቀማመጥ እና የእይታ እይታን ያቀርባል. ከ Bootstrap ጃቫ ስክሪፕት በፊት popper.min.js ማካተትዎን ያረጋግጡ bootstrap.bundle.min.jsወይም bootstrap.bundle.jsፖፐርን የያዘውን ይጠቀሙ። ምንም እንኳን ተለዋዋጭ አቀማመጥ የማያስፈልግ በመሆኑ ፖፐር ተቆልቋይ ቦታዎችን በ navbars ውስጥ ለማስቀመጥ አያገለግልም።

ተደራሽነት

የ WAI ARIA ስታንዳርድ ትክክለኛ role="menu"መግብርን ይገልፃል ፣ ነገር ግን ይህ ተግባርን ወይም ተግባርን ለሚቀሰቅሱ እንደ መተግበሪያ ላሉ ምናሌዎች የተወሰነ ነው። የ ARIA ሜኑዎች የምናሌ ንጥሎችን፣ የአመልካች ሳጥን ሜኑ ንጥሎችን፣ የሬዲዮ አዝራሮችን የምናሌ ንጥሎችን፣ የሬዲዮ አዝራር ቡድኖችን እና ንዑስ-ምናሌዎችን ብቻ ነው መያዝ የሚችሉት።

በሌላ በኩል የቡትስትራፕ ተቆልቋይ ቦታዎች ሁሉን አቀፍ እና ለተለያዩ ሁኔታዎች እና የማርክ መስጫ መዋቅሮች ተፈጻሚ እንዲሆኑ የተነደፉ ናቸው። ለምሳሌ፣ ተጨማሪ ግብዓቶችን የያዙ ተቆልቋይዎችን መፍጠር እና እንደ የፍለጋ መስኮች ወይም የመግቢያ ቅጾች ያሉ የቅጽ መቆጣጠሪያዎችን መፍጠር ይቻላል። በዚህ ምክንያት, Bootstrap ለእውነተኛ ARIA ምናሌዎች የሚያስፈልጉትን ማንኛውንም roleባህሪያት አይጠብቅም (ወይም በራስ-ሰር አይጨምርም) ። ደራሲዎች እነዚህን የበለጠ ልዩ ባህሪያትን ራሳቸው ማካተት አለባቸው።aria-

ሆኖም ቡትስትራፕ አብሮ የተሰራ ድጋፍን ለአብዛኛዎቹ መደበኛ የቁልፍ ሰሌዳ ምናሌ መስተጋብር ይጨምራል፣ ለምሳሌ .dropdown-itemየጠቋሚ ቁልፎችን በመጠቀም በተናጥል አካላት ውስጥ የመንቀሳቀስ ችሎታ እና ሜኑውን ESCበቁልፍ መዝጋት።

ምሳሌዎች

የተቆልቋይ መቀያየርን (የእርስዎን አዝራር ወይም ማገናኛ) እና ተቆልቋይ ሜኑን በ ውስጥ .dropdown፣ ወይም ሌላ የሚያውጅውን አካል ጠቅልል position: relative;። የእርስዎን እምቅ ፍላጎቶች በተሻለ ለማስማማት ተቆልቋይ ከ <a>ወይም ንጥረ ነገሮች ሊነሳ ይችላል ። <button>እዚህ የሚታዩት ምሳሌዎች <ul>ተገቢ ሲሆኑ የትርጉም ክፍሎችን ይጠቀማሉ፣ ነገር ግን ብጁ ምልክት ማድረጊያ ይደገፋል።

ነጠላ አዝራር

ማንኛውም ነጠላ .btnከአንዳንድ የማርክ ማድረጊያ ለውጦች ጋር ወደ ተቆልቋይ መቀየሪያ ሊቀየር ይችላል። <button>ከሁለቱም ንጥረ ነገሮች ጋር እንዲሰሩ እንዴት እንደሚያስቀምጧቸው እነሆ ፡-

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

እና <a>ከንጥረ ነገሮች ጋር:

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>

በጣም ጥሩው ክፍል ይህንን በማንኛውም የአዝራር ልዩነት ማድረግ ይችላሉ፡

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

የተከፈለ አዝራር

በተመሳሳይ፣ የተከፈለ አዝራር ተቆልቋይዎችን ይፍጠሩ እንደ ነጠላ የአዝራር ተቆልቋይዎች ተመሳሳይ ምልክት ያደረጉ፣ ነገር ግን .dropdown-toggle-splitበተቆልቋይ ተንከባካቢው ዙሪያ ለትክክለኛ ክፍተት በማከል።

ይህንን ተጨማሪ ክፍል paddingበመንከባከቢያው በሁለቱም በኩል ያለውን አግድም በ25% ለመቀነስ እና margin-leftለመደበኛ የአዝራሮች ተቆልቋይዎች የተጨመረውን ለማስወገድ እንጠቀማለን። እነዚያ ተጨማሪ ለውጦች ተንከባካቢው በተከፋፈለው ቁልፍ ላይ ያተኩሩታል እና ከዋናው ቁልፍ ቀጥሎ ያለውን ትክክለኛ መጠን ያለው የተመታ ቦታ ያቅርቡ።

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

መጠናቸው

የአዝራር ተቆልቋይዎች ነባሪ እና የተከፋፈሉ ተቆልቋይ አዝራሮችን ጨምሮ ከሁሉም መጠኖች አዝራሮች ጋር ይሰራሉ።

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

ጨለማ ተቆልቋይ

ካለ ላይ በማከል ከጨለማው ናቭባር ወይም ብጁ ዘይቤ ጋር ለማዛመድ ወደ ጨለማ ተቆልቋይ መርጠው .dropdown-menu-darkይግቡ .dropdown-menu። በተቆልቋይ ንጥሎች ላይ ምንም ለውጦች አያስፈልጉም።

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>

እና በ 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>

አቅጣጫዎች

RTL

በ RTL ውስጥ Bootstrapን ሲጠቀሙ አቅጣጫዎች ይንፀባርቃሉ፣ ትርጉሙ .dropstartበቀኝ በኩል ይታያል።

መሃል ያለው

.dropdown-centerተቆልቋይ ሜኑ ከወላጅ ኤለመንት ጋር ከመቀያየር በታች ያማከለ ያድርጉት ።

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>

መጣል

.dropupወደ ወላጅ ኤለመንት በማከል የተቆልቋይ ምናሌዎችን ከንጥረ ነገሮች በላይ ያስነሱ ።

<!-- 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-centerበወላጅ ኤለመንት ላይ ያድርጉት።

html 
<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

ጣል

.dropendወደ ወላጅ ኤለመንት በማከል በንጥረ ነገሮች በስተቀኝ ያሉ ተቆልቋይ ምናሌዎችን ያስነሱ ።

<!-- 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ወደ ወላጅ ኤለመንት በማከል ከንጥረ ነገሮች በስተግራ ተቆልቋይ ምናሌዎችን ያስነሱ ።

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

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

እንደ ተቆልቋይ ንጥሎች <a>ወይም ንጥረ ነገሮችን መጠቀም ይችላሉ ።<button>

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>

እንዲሁም በይነተገናኝ ያልሆኑ ተቆልቋይ ንጥሎችን መፍጠር ይችላሉ .dropdown-item-text። በብጁ CSS ወይም የጽሑፍ መገልገያዎች የበለጠ ቅጥ ለማድረግ ነፃነት ይሰማዎ።

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>

ንቁ

እንደ ገባሪ ቅጥ ለማድረግ.active በተቆልቋዩ ውስጥ ወደ ንጥሎች ያክሉ ። ገባሪ ሁኔታን ወደ አጋዥ ቴክኖሎጂዎች ለማስተላለፍ፣ አይነታውን ይጠቀሙ — ለአሁኑ ገጽ ዋጋን በመጠቀም ወይም በስብስብ ውስጥ ላለው የአሁኑ ንጥል።aria-currentpagetrue

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>

ተሰናክሏል።

እንደ ተሰናክለው.disabled ለመምሰል በተቆልቋዩ ውስጥ ወደ ንጥሎች ያክሉ ።

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>

በነባሪ፣ ተቆልቋይ ሜኑ በቀጥታ 100% ከላይ እና በወላጁ በግራ በኩል ይቀመጣል። ይህንን በአቅጣጫ .drop*ክፍሎች መለወጥ ይችላሉ, ነገር ግን በተጨማሪ የመቀየሪያ ክፍሎችን መቆጣጠር ይችላሉ.

የተቆልቋይ ምናሌውን .dropdown-menu-endወደ .dropdown-menuቀኝ አሰላለፍ። በ RTL ውስጥ Bootstrapን ሲጠቀሙ አቅጣጫዎች ይንፀባርቃሉ፣ ትርጉሙ .dropdown-menu-endበግራ በኩል ይታያል።

ቀና በል! ተቆልቋይ መውረጃዎች በ 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>

ምላሽ ሰጪ አሰላለፍ

ምላሽ ሰጪ አሰላለፍ ለመጠቀም ከፈለጉ ባህሪውን በማከል ተለዋዋጭ አቀማመጥን ያሰናክሉ data-bs-display="static"እና ምላሽ ሰጪ ልዩነቶች ክፍሎችን ይጠቀሙ።

የተቆልቋይ ምናሌውን ከተሰጠው መግቻ ነጥብ ወይም የበለጠ ጋር ለማቀናጀት ፣ ያክሉ .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>

የግራ ተቆልቋይ ምናሌውን ከተሰጠው መግቻ ነጥብ ወይም የበለጠ ለማሰለፍ ፣ ያክሉ .dropdown-menu-endእና .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>

data-bs-display="static"ፖፐር በ navbars ውስጥ ጥቅም ላይ ስለማይውል በ navbars ውስጥ በተቆልቋይ አዝራሮች ላይ ባህሪ ማከል እንደማያስፈልግዎ ልብ ይበሉ ።

የማስተካከያ አማራጮች

ከላይ ያሉትን አብዛኛዎቹን አማራጮች በመውሰድ፣ በአንድ ቦታ ላይ የተለያዩ ተቆልቋይ አሰላለፍ አማራጮችን የሚያሳይ ትንሽ የኩሽና ማጠቢያ ማሳያ እዚህ አለ።

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>

የምናሌ ይዘት

ራስጌዎች

በማንኛውም ተቆልቋይ ሜኑ ውስጥ ያሉትን የእርምጃዎች ክፍሎች ለመሰየም ርዕስ ያክሉ።

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>

አከፋፋዮች

ተዛማጅ የምናሌ ንጥሎች ቡድኖች ከአከፋፋይ ጋር።

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>

ጽሑፍ

ማንኛውንም የፍሪፎርም ጽሑፍ በተቆልቋይ ምናሌ ውስጥ ከጽሑፍ ጋር ያስቀምጡ እና የቦታ መገልገያዎችን ይጠቀሙ ። የምናሌውን ስፋት ለመገደብ ተጨማሪ የመጠን ዘይቤዎች እንደሚያስፈልጉዎት ልብ ይበሉ።

በተቆልቋይ ሜኑ ውስጥ በነጻ የሚፈስ አንዳንድ ምሳሌ ጽሑፍ።

እና ይህ ተጨማሪ ምሳሌ ጽሑፍ ነው።

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>

ቅጾች

ቅጽ በተቆልቋይ ሜኑ ውስጥ ያስቀምጡ ወይም በተቆልቋይ ሜኑ ውስጥ ያድርጉት እና የሚፈልጉትን አሉታዊ ቦታ ለመስጠት ህዳግ ወይም ፓዲንግ መገልገያዎችን ይጠቀሙ።

እዚህ አካባቢ አዲስ ነገር አለ? ክፈት መክፈቻ ቁልፉን ረሳኽው?
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>

የተቆልቋዩ ቦታን ይጠቀሙ data-bs-offsetወይም data-bs-referenceለመቀየር።

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>

ራስ-ሰር የመዝጋት ባህሪ

በነባሪ፣ ተቆልቋይ ሜኑ ተቆልቋይ ሜኑ ውስጥ ወይም ውጪ ጠቅ ሲደረግ ይዘጋል። autoCloseይህንን የተቆልቋይ ባህሪ ለመቀየር አማራጩን መጠቀም ይችላሉ ።

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

ተለዋዋጮች

በ v5.2.0 ውስጥ ተጨምሯል

እንደ የ Bootstrap የ CSS ተለዋዋጮች አቀራረብ አካል፣ ተቆልቋይዎች አሁን .dropdown-menuለተሻሻለ የአሁናዊ ማበጀት የአካባቢያዊ CSS ተለዋዋጮችን ይጠቀማሉ። የCSS ተለዋዋጮች እሴቶች በ Sass በኩል ተቀናብረዋል፣ ስለዚህ 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};

.dropdown-menu-darkየተባዙ የሲኤስኤስ መምረጫዎችን ሳንጨምር የተወሰኑ እሴቶችን በምንሻርበት ክፍል ላይ በCSS ተለዋዋጮች ማበጀት ይታያል ።

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Sass ተለዋዋጮች

ለሁሉም ተቆልቋዮች ተለዋዋጮች፡-

$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

ለጨለማ ተቆልቋይ ተለዋዋጮች :

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

የተቆልቋይ መስተጋብርን የሚያመለክቱ በCSS ላይ ለተመሰረቱ እንክብካቤዎች ተለዋዋጮች፡-

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

ቅልቅል

ሚክስክስ በሲኤስኤስ ላይ የተመሰረቱ እንክብካቤዎችን ለማመንጨት ጥቅም ላይ ይውላል እና በ ውስጥ ይገኛሉ 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;
    }
  }
}

አጠቃቀም

በመረጃ ባህሪያት ወይም በጃቫስክሪፕት በኩል ተቆልቋይ ተሰኪው የተደበቀ ይዘትን (የተቆልቋይ ምናሌዎችን) .showበወላጅ ላይ ክፍል በመቀያየር ይቀየራል .dropdown-menu። ባህሪው data-bs-toggle="dropdown"በመተግበሪያ ደረጃ ተቆልቋይ ምናሌዎችን ለመዝጋት የታመነ ነው፣ ስለዚህ ሁልጊዜ እሱን መጠቀም ጥሩ ነው።

በንክኪ የነቁ መሣሪያዎች ላይ፣ ተቆልቋይ መክፈት ባዶ mouseoverተቆጣጣሪዎችን ለኤለመንቱ የቅርብ ልጆች ይጨምራል <body>። ይህ ተቀባይነት ያለው አስቀያሚ ጠለፋ በ iOS' ክስተት ውክልና ዙሪያ ለመስራት አስፈላጊ ነው ፣ ይህ ካልሆነ ግን ከተቆልቋዩ ውጭ የትኛውም ቦታ መታ ተቆልቋይ የሚዘጋውን ኮድ እንዳያነሳሳ ይከላከላል። አንዴ ተቆልቋዩ ከተዘጋ፣ እነዚህ ተጨማሪ ባዶ mouseoverተቆጣጣሪዎች ይወገዳሉ።

በውሂብ ባህሪያት በኩል

data-bs-toggle="dropdown"ተቆልቋይ ለመቀየር ወደ አገናኝ ወይም አዝራር ያክሉ ።

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

በጃቫስክሪፕት በኩል

ተቆልቋዮቹን በጃቫስክሪፕት ይደውሉ፡-

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
data-bs-toggle="dropdown"አሁንም ያስፈልጋል

ተቆልቋይዎን በጃቫ ስክሪፕት ቢደውሉም ሆነ በምትኩ ዳታ-ኤፒውን ቢጠቀሙ data-bs-toggle="dropdown"ሁል ጊዜ በተቆልቋዩ ቀስቅሴ ክፍል ላይ መገኘት አለባቸው።

አማራጮች

አማራጮች በውሂብ ባህሪያት ወይም በጃቫ ስክሪፕት ሊተላለፉ ስለሚችሉ፣ በ ውስጥ እንዳለ የአማራጭ ስም ወደ ላይ ማከል data-bs-ይችላሉ data-bs-animation="{value}"። በመረጃ ባህሪያት በኩል አማራጮችን ሲያስተላልፉ የአማራጭ ስም የጉዳይ አይነትን ከ " camelcase " ወደ " kebab-case " መቀየርዎን ያረጋግጡ. ለምሳሌ, data-bs-custom-class="beautifier"በምትኩ ይጠቀሙ data-bs-customClass="beautifier".

ከ Bootstrap 5.2.0 ጀምሮ፣ ሁሉም አካላት ቀላል የአካል ክፍሎችን እንደ JSON string ውቅረት ሊያስቀምጥ የሚችል በሙከራ የተያዘ የውሂብ ባህሪን ይደግፋሉ። data-bs-configአንድ ኤለመንት ሲኖረው data-bs-config='{"delay":0, "title":123}'እና data-bs-title="456"ባህሪያቱ ሲኖረው፣ የመጨረሻው titleእሴት ይሆናል 456እና የተለዩ የውሂብ ባህሪያት በ ላይ የተሰጡ እሴቶችን ይሽራሉ data-bs-config። በተጨማሪም፣ ነባር የውሂብ ባህሪያት እንደ JSON ያሉ እሴቶችን ማኖር ይችላሉ data-bs-delay='{"show":0,"hide":150}'።

ስም ዓይነት ነባሪ መግለጫ
autoClose ቡሊያን, ሕብረቁምፊ true የተቆልቋዩ ራስ-ቅርበት ባህሪን ያዋቅሩ፡
  • true- ተቆልቋዩ የሚዘጋው ወደ ውጭ ወይም በተቆልቋይ ሜኑ ውስጥ ጠቅ በማድረግ ነው።
  • false- ተቆልቋዩ የሚዘጋው የመቀያየር አዝራሩን ጠቅ በማድረግ እና በእጅ በመደወል hideወይም toggleዘዴ በመጠቀም ነው። esc(እንዲሁም ቁልፉን በመጫን አይዘጋም)
  • 'inside'- ተቆልቋዩ የሚዘጋው (ብቻ) በተቆልቋይ ሜኑ ውስጥ ጠቅ በማድረግ ነው።
  • 'outside'- ተቆልቋዩ የሚዘጋው (ብቻ) ከተቆልቋይ ሜኑ ውጪ ጠቅ በማድረግ ነው።
ማሳሰቢያ፡ ተቆልቋዩ ሁል ጊዜ ESCበቁልፍ ሊዘጋ ይችላል።
boundary ሕብረቁምፊ, ኤለመንት 'clippingParents' የተቆልቋይ ሜኑ የትርፍ ፍሰት ገደብ ወሰን (የሚመለከተው ለፖፐር ከመጠን በላይ ፍሰት መቀየሪያን ብቻ ነው)። በነባሪነት clippingParentsHTMLElement ማጣቀሻ (በጃቫስክሪፕት በኩል ብቻ) ነው እና መቀበል ይችላል። ለበለጠ መረጃ የፖፐርን ማወቂያ ከመጠን በላይ ፍሰት ሰነዶችን ይመልከቱ ።
display ሕብረቁምፊ 'dynamic' በነባሪ, ለተለዋዋጭ አቀማመጥ ፖፐር እንጠቀማለን. ይህን በ static.
offset ድርድር፣ ሕብረቁምፊ፣ ተግባር [0, 2] ከዒላማው አንጻር የተቆልቋዩ ማካካሻ። data-bs-offset="10,20"በመረጃ ባህሪያት ውስጥ ሕብረቁምፊን በነጠላ ሰረዝ የተለያዩ እሴቶች ማለፍ ይችላሉ አንድ ተግባር ማካካሻውን ለመወሰን ጥቅም ላይ በሚውልበት ጊዜ እንደ መጀመሪያው መከራከሪያ ፖፐር አቀማመጥ, ማጣቀሻ እና ፖፐር rects ከያዘ ነገር ጋር ይባላል. ቀስቃሽ ኤለመንት DOM ኖድ እንደ ሁለተኛው ነጋሪ እሴት ተላልፏል። ተግባሩ ከሁለት ቁጥሮች ጋር ድርድር መመለስ አለበት: መንሸራተት , ርቀት . ለበለጠ መረጃ የፖፐር ማካካሻ ሰነዶችን ይመልከቱ ።
popperConfig ባዶ ፣ ዕቃ ፣ ተግባር null የ Bootstrapን ነባሪ የፖፕ አወቃቀሩን ለመቀየር የፖፐርን አወቃቀር ይመልከቱ ። አንድ ተግባር የፖፐር ውቅረትን ለመፍጠር ጥቅም ላይ ሲውል የቡትስትራፕ ነባሪ የፖፐር ውቅረት ካለው ዕቃ ጋር ይጠራል። ነባሪውን ከራስዎ ውቅር ጋር እንዲጠቀሙ እና እንዲያዋህዱ ያግዝዎታል። ተግባሩ ለፖፐር የውቅር ነገር መመለስ አለበት።
reference ሕብረቁምፊ, ንጥረ ነገር, ነገር 'toggle' የተቆልቋይ ምናሌ ማጣቀሻ አካል። የ HTMLElement ማጣቀሻን ወይም የሚያቀርበውን ነገር እሴቶችን 'toggle'ይቀበላል ። ለበለጠ መረጃ የፖፐር ገንቢ ሰነዶችን እና ምናባዊ ኤለመንት ሰነዶችን ይመልከቱ ።'parent'getBoundingClientRect

ተግባርን በመጠቀምpopperConfig 

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

ዘዴዎች

ዘዴ መግለጫ
dispose የአንድ ንጥረ ነገር ተቆልቋይ ያጠፋል. (የተከማቸ ውሂብ በ DOM አባል ላይ ያስወግዳል)
getInstance ከ DOM ኤለመንት ጋር የተያያዘውን የተቆልቋይ ምሳሌ እንድታገኝ የሚፈቅድልህ የማይንቀሳቀስ ዘዴ፣ ይህን መጠቀም ትችላለህ bootstrap.Dropdown.getInstance(element)።
getOrCreateInstance ከDOM ኤለመንት ጋር የተገናኘ የተቆልቋይ ምሳሌን የሚመልስ ወይም ካልተጀመረ አዲስ የሚፈጥር የማይንቀሳቀስ ዘዴ። እንደሚከተለው ሊጠቀሙበት ይችላሉ bootstrap.Dropdown.getOrCreateInstance(element):.
hide የተሰጠውን የአሳሽ አሞሌ ወይም የታረመ አሰሳ ተቆልቋይ ምናሌን ይደብቃል።
show የተሰጠውን የአሳሽ አሞሌ ወይም የታጠፈ አሰሳ ተቆልቋይ ሜኑ ያሳያል።
toggle የተሰጠውን የአሳሽ አሞሌ ወይም የታጠፈ አሰሳ ተቆልቋይ ሜኑ ይቀየራል።
update የአንድ ንጥረ ነገር ተቆልቋይ ቦታን ያዘምናል።

ክስተቶች

ሁሉም ተቆልቋይ ክስተቶች በሚቀያየር ኤለመንት ላይ ይቃጠላሉ እና ከዚያ ይወድቃሉ። .dropdown-menuስለዚህ በወላጅ አካል ላይ የክስተት አድማጮችን ማከል ትችላለህ ። hide.bs.dropdownእና hidden.bs.dropdownክስተቶች clickEventንብረት አላቸው (የመጀመሪያው የክስተት አይነት ሲሆን ብቻ click) ለጠቅ ክስተት የክስተት ነገር የያዘ።

የክስተት አይነት መግለጫ
hide.bs.dropdown hideየምሳሌው ዘዴ ሲጠራ ወዲያውኑ ይቃጠላል ።
hidden.bs.dropdown ተቆልቋዩ ከተጠቃሚው ተደብቆ ሲጠናቀቅ እና የሲኤስኤስ ሽግግሮች ሲጠናቀቁ ተቃጥሏል።
show.bs.dropdown showየምሳሌው ዘዴ ሲጠራ ወዲያውኑ ይቃጠላል .
shown.bs.dropdown ተቆልቋዩ ለተጠቃሚው እንዲታይ ሲደረግ እና የሲኤስኤስ ሽግግሮች ሲጠናቀቁ ተቃጠለ። 
const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})