መውረድ

የአገናኞች ዝርዝሮችን እና ሌሎችንም በ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>ከሁለቱም ንጥረ ነገሮች ጋር እንዲሰሩ እንዴት እንደሚያስቀምጧቸው እነሆ ፡-

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

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

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

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

<!-- 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። በተቆልቋይ ንጥሎች ላይ ምንም ለውጦች አያስፈልጉም።

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

እና በ navbar ውስጥ መጠቀም፡-

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

አቅጣጫዎች

RTL

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

መጣል

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

ተቆልቋይ

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

መውደቅ

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

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

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

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

<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

<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 ለመምሰል በተቆልቋዩ ውስጥ ወደ ንጥሎች ያክሉ ።

<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 ውስጥ ካልተካተቱ በስተቀር ለፖፐር ምስጋና ይድረሳቸው።

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

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

<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 ውስጥ በተቆልቋይ አዝራሮች ላይ ባህሪ ማከል እንደማያስፈልግዎ ልብ ይበሉ ።

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

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

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

ራስጌዎች

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

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

አከፋፋዮች

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

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

ቅጾች

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

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

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

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

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

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

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

ሳስ

ተለዋዋጮች

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

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

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

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

በጃቫስክሪፕት በኩል

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

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

`data-bs-toggle="dropdown"`አሁንም ያስፈልጋል

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

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-bs-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-bs-offset=""። አማራጮችን በውሂብ ባሕሪያት በሚያልፉበት ጊዜ የአማራጭ ስም የጉዳይ አይነትን ከካሜል ኬዝ ወደ kebab-ኬዝ መቀየርዎን ያረጋግጡ። ለምሳሌ ከመጠቀም ይልቅ data-bs-autoClose="false"ይጠቀሙ data-bs-auto-close="false"።

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

ተግባርን በመጠቀም`popperConfig`

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

ዘዴዎች

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

ክስተቶች

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

ዘዴ	መግለጫ
`show.bs.dropdown`	የማሳያ ምሳሌ ዘዴው ሲጠራ ወዲያውኑ ይቃጠላል.
`shown.bs.dropdown`	ተቆልቋዩ ለተጠቃሚው እንዲታይ ሲደረግ እና የሲኤስኤስ ሽግግሮች ሲጠናቀቁ ተቃጠለ።
`hide.bs.dropdown`	የድብቅ ምሳሌ ዘዴ ሲጠራ ወዲያውኑ ይቃጠላል።
`hidden.bs.dropdown`	ተቆልቋዩ ከተጠቃሚው ተደብቆ ሲጠናቀቅ እና የሲኤስኤስ ሽግግሮች ሲጠናቀቁ ተቃጥሏል።

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})

መውረድ

አጠቃላይ እይታ

ተደራሽነት

ምሳሌዎች

ነጠላ አዝራር

የተከፈለ አዝራር

መጠናቸው

ጨለማ ተቆልቋይ

አቅጣጫዎች

RTL

መጣል

ተቆልቋይ

መውደቅ

የምናሌ ዕቃዎች

ንቁ

ተሰናክሏል።

የምናሌ አሰላለፍ

ምላሽ ሰጪ አሰላለፍ

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

የምናሌ ይዘት

ራስጌዎች

አከፋፋዮች

ጽሑፍ

ቅጾች

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

ሳስ

ተለዋዋጮች

ቅልቅል

አጠቃቀም

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

በጃቫስክሪፕት በኩል

`data-bs-toggle="dropdown"`አሁንም ያስፈልጋል

አማራጮች

ተግባርን በመጠቀም`popperConfig`

ዘዴዎች

ክስተቶች

መውረድ

አጠቃላይ እይታ

ተደራሽነት

ምሳሌዎች

ነጠላ አዝራር

የተከፈለ አዝራር

መጠናቸው

ጨለማ ተቆልቋይ

አቅጣጫዎች

RTL

መጣል

ተቆልቋይ

መውደቅ

የምናሌ ዕቃዎች

ንቁ

ተሰናክሏል።

የምናሌ አሰላለፍ

ምላሽ ሰጪ አሰላለፍ

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

የምናሌ ይዘት

ራስጌዎች

ተቆልቋይ ራስጌ

አከፋፋዮች

ጽሑፍ

ቅጾች

የማውረድ አማራጮች

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

ሳስ

ተለዋዋጮች

ቅልቅል

አጠቃቀም

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

በጃቫስክሪፕት በኩል

data-bs-toggle="dropdown"አሁንም ያስፈልጋል

አማራጮች

ተግባርን በመጠቀምpopperConfig

ዘዴዎች

ክስተቶች

`data-bs-toggle="dropdown"`አሁንም ያስፈልጋል

ተግባርን በመጠቀም`popperConfig`