Source

ድሮፕዳውንድስ

ዝርዝር መላግቦታትን ካልእን ንምርኣይ ብBotstrap ንቑልቁል ዝወርድ ፕላግ-ኢን ንምርኣይ ዓውደ-ጽሑፋዊ ምድብላቕ ምቕያር።

ሓፈሻዊ ትሕዝቶ

ንቑልቁል ዝወርድ ዝርዝር መላግቦታትን ካልእን ንምርኣይ ዝሕግዙ ተለዋወጥቲ ዝኾኑ፣ ዓውደ-ጽሑፋዊ ምድብላቕ እዮም። በቲ ዝተሓወሶ ቡትስትራፕ ንቑልቁል ዝወርድ ጃቫስክሪፕት ፕላግ-ኢን መስተጋብራዊ ይኾኑ። ብምጥዋቕ እምበር ብምንሳሕ ኣይኮኑን ዝቕየሩ፤ እዚ ኮነ ኢልካ ዝተገብረ ውሳነ ዲዛይን እዩ።

ድሮፕዳውንድ ኣብ ሳልሳይ ወገን ቤተ-መጻሕፍቲ ዝተሃንጸ ኮይኑ ፡ Popper.js ፡ ዳይናሚክ ኣቀማምጣን ቪውፖርት ምልላይን ይህብ። ቅድሚ ናይ Bootstrap ጃቫስክሪፕት popper.min.js ምእታውካ ኣረጋግጽ ወይ Popper.js ዝሓዘ bootstrap.bundle.min.js/ ተጠቐም። bootstrap.bundle.jsPopper.js ዳይናሚክ ኣቀማምጣ ስለዘየድሊ ግን ኣብ navbars ንውድቀት ንምቕማጥ ኣይጥቀመሉን እዩ።

ጃቫስክሪፕትናutil.js ካብ ምንጪ ትሃንጽ እንተኾንካ ፡ .

ተበጻሕነት

እቲ WAI ARIA ደረጃ ንሓደ ጭቡጥ role="menu"ዊጀት ይገልጽ , እዚ ግን ንተግባራት ወይ ተግባራት ዝቐስቅሱ መተግበሪ ዝመስሉ ምልክታታት ፍሉይ እዩ። ናይ ARIA ምልክታታት ናይ ምልክት ዝርዝር ነገራት፣ ናይ ምልክት ሳጹን ዝርዝር ነገራት፣ ናይ ሬድዮ መጠወቒ ዝርዝር ነገራት፣ ናይ ሬድዮ መጠወቒ ጉጅለታትን ንኡሳን ምልክታታትን ጥራይ ክሕዙ ይኽእሉ።

ብኣንጻሩ ናይ ቡትስትራፕ ድሮፕዳውንድስ ሓፈሻዊን ንዝተፈላለየ ኩነታትን ማርካፕ ቅርጽታትን ዝምልከትን ክኾኑ ዝተዳለዉ እዮም። ንኣብነት ተወሳኺ እታዎታትን ቁጽጽር ቅጥዕን ዝሓዙ ንቑልቁል ዝወርዱ ነገራት ምፍጣር ይከኣል እዩ፣ ከም ናይ ምድላይ ዓውድታት ወይ ናይ መእተዊ ቅጥዕታት። በዚ ምኽንያት እዚ፡ ቡትስትራፕ ንሓቀኛታት ARIA ምልክታታት ዘድልዩ roleዝኾነን ባህርያትን ኣይጽበን (ወይ ብኣውቶማቲክ ኣይውስኽን) ። ጸሓፍቲ ነዞም ​​ዝያዳ ፍሉያት ባህርያት ባዕሎም ከካትትዎም ክግደዱ እዮም።aria-

ይኹን እምበር፡ ቡትስትራፕ ንመብዛሕትኦም መደበኛ ናይ ሰሌዳ ቁልፊ ምልክት ምትእስሳር ኣብ ውሽጢ ዝተሃንጸ ደገፍ ይውስኽ እዩ፡ ከም ናይ .dropdown-itemመመልከቲ መፍትሕታት ተጠቒምካ ብውልቀ ባእታታት ናይ ምዝዋርን ነቲ ዝርዝር ESCብመፍትሕ ምዕጻውን ዓቕሚ።

ኣብነታት

ናይቲ ንቑልቁል ዝወርድ ቶግለር (ናትካ መጠወቒ ወይ መላግቦ) ከምኡውን ነቲ ንቑልቁል ዝወርድ ዝርዝር ኣብ ውሽጢ .dropdown፣ ወይ ካልእ ን ዝእውጅ ባእታ ጠቕልሎ position: relative;። ድሮፕዳውንድ ካብ <a>ወይ <button>ባእታታት ክብገሱ ይኽእሉ እዮም ብዝበለጸ ምስ ክህልዉኻ ዝኽእሉ ድሌታት ክሰማምዑ።

ንጽል መጠወቒ ንቑልቁል ዝወርድ

ዝኾነ ንጽል .btnምስ ገለ ናይ ምልክት ለውጢ ናብ ንቑልቁል ዝወርድ ቶግል ክቕየር ይኽእል። <button>ብኽልቲኡ ባእታታት ብኸመይ ክትሰርሖም ከም እትኽእል ኣብዚ ኣሎ ፤

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

ምስ <a>ባእታታት ድማ፤

Action Another action Something else here 
<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

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

እቲ ዝበለጸ ክፋል እዚ ምስ ዝኾነ ናይ መጠወቒ ፍልልይ ክትገብር ትኽእል ኢኻ፣ ንስኻ እውን፤

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

ስፕሊት መጠወቒ ንቑልቁል ዝወርድ

ብተመሳሳሊ፡ ዳርጋ ከም ሓደ መጠወቒ ንቑልቁል ዝወርድ ምልክት ዘለዎም ዝተመቕሉ መጠወቒታት ንቑልቁል ፍጠር፣ ግን ከኣ ኣብ .dropdown-toggle-splitዙርያ እቲ ንቑልቁል ዝወርድ ካሬት ግቡእ ርሕቀት ንምርካብ ብምውሳኽ።

ነዚ ተወሳኺ ክፍሊ ንጥቀመሉ paddingኣብ ክልቲኡ ወገን ናይቲ ካሬት ዘሎ ኣግማድ ብ25% ንምንካይን ነቲ margin-leftንስሩዕ መጠወቒ ምውራድ ዝተወሰኸ ንምእላይን። እቶም ተወሳኺ ለውጥታት ነቲ ካሬት ኣብቲ ዝተመቕለ መጠወቒ ማእከል ገይሩ ይገብርዎን ኣብ ጎኒ እቲ ቀንዲ መጠወቒ ዝያዳ ዝምጥን ዓቐን ዘለዎ ናይ ምውቃዕ ቦታ ይህቡን።

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

ሳይዚንግ ምግባር

ንቑልቁል ዝወርድ መጠወቒታት ምስ ኩሉ ዓቐን ዘለዎም መጠወቒታት ይሰርሑ፣ ነባሪን ዝተመቕሉን ንቑልቁል ዝወርድ መጠወቒታት ሓዊስካ።

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

ምውዳቕ ፍልልይ

.dropupኣብ ልዕሊ ባእታታት ንዘለዉ ንቑልቁል ዝወርድ ምልክታታት ኣብቲ ወላዲ ባእታ ብምውሳኽ ኣበግስ።

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

ድሮፕራይት ፍልልይ

.droprightኣብቲ ወላዲ ባእታ ብምውሳኽ ኣብ የማናይ ሸነኽ ናይቶም ባእታታት ዝርከቡ ንቑልቁል ዝወርድ ምልክታታት ኣበግስ ።

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

ድሮፕለፍት ፍልልይ

.dropleftኣብቲ ወላዲ ባእታ ብምውሳኽ ኣብ ጸጋማይ ሸነኽ ናይቶም ባእታታት ዝርከቡ ንቑልቁል ዝወርድ ምልክታታት ጀምር ።

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

ብታሪኽ ንቑልቁል ዝወርድ ትሕዝቶታት ዝርዝር መላግቦታት ክኾኑ ነይርዎም ፡ ግን ድሕሪ ሕጂ ኣብ v4 ከምኡ ኣይኮነን። <button>ሕጂ ብኣማራጺ ኣብ ክንዲ <a>s ጥራይ ኣብ ንቑልቁል ዝወርድ ባእታታት ክትጥቀም ትኽእል ኢኻ ።

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

ብነባሪ መልክዑ፡ ሓደ ንቑልቁል ዝወርድ ዝርዝር ብኣውቶማቲክ ካብ ላዕሊን ብጸጋማይ ሸነኽ ወላዲኡን 100% ይቕመጥ። .dropdown-menu-rightናብ a ወስኹ ናብ .dropdown-menuየማን ነቲ ንቑልቁል ዝወርድ ዝርዝር ኣሰላልፍዎ።

ርእሲ ንላዕሊ! ድሮፕዳውንድ ሳላ Popper.js (ብዘይካ ኣብ navbar ክሕዙ ከለዉ) ይቕመጡ።

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

ኣብ ዝኾነ ንቑልቁል ዝወርድ ዝርዝር ንክፋላት ተግባራት ስያመ ንምሃብ ርእሲ ምውሳኽ።

ንቑልቁል ዝወርድ ርእሲ
ተግባር ካልእ ስጉምቲ 
<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

ንጉጅለታት ናይ ተዛመድቲ ናይ ምልክት ዝርዝር ነገራት ብመከፋፈልቲ ምፍላይ።

ተግባር ካልእ ስጉምቲ ኣብዚ ካልእ ነገር
ዝተፈለየ ሊንክ 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

ንሓደ ቅጥዒ ኣብ ውሽጢ ንቑልቁል ዝወርድ ዝርዝር ኣቐምጦ፣ ወይ ናብ ንቑልቁል ዝወርድ ዝርዝር ግበሮ፣ ከምኡውን ማርጅን ወይ ፓዲንግ ዩቲሊቲታት ተጠቐም እሞ እቲ እትደልዮ ኣሉታዊ ቦታ ሃቦ።

ኣብዚ ከባቢ ሓድሽ? ተመዝገቡ። ፓስዎርድ ረሲዕካዮ? 
<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </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="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

ንጡፋት ናይ ምልክት ዝርዝር ነገራት

.activeኣብቲ ንቑልቁል ዝወርድ ነገራት ከም ንጡፋት ቅዲ ንምግባር ወስኸሎም ።

ስሩዕ ሊንክ ንጡፍ ሊንክ ካልእ ሊንክ 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

ናይ ምልክት ዝርዝር ነገራት ተሰናኺሎም

.disabledኣብቲ ንቑልቁል ዝወርድ ነገራት ከም ዝተሰናኸሉ ቅዲ ንምግባር ወስኸሎም ።

ስሩዕ ሊንክ ተሰናኺሉ ዘሎ መላግቦ ካልእ ሊንክ 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

ኣጠቓቕማ

.showብመንገዲ ባህርያት ዳታ ወይ ጃቫስክሪፕት፡ እቲ ንቑልቁል ዝወርድ ተወሰኽቲ፡ ነቲ ክፍሊ ኣብቲ ወላዲ ዝርዝር ኣቕሓ ብምቕያር፡ ንዝተሓብአ ትሕዝቶ (ንቑልቁል ዝወርድ ዝርዝር) ይቕይሮ ። እቲ data-toggle="dropdown"ባህሪ ብደረጃ መተግበሪ ንዝርከቡ ንቑልቁል ዝወርድ ምልክታታት ንምዕጻው ዝጽጋዕ እዩ፣ ስለዚ ኩሉ ግዜ ክትጥቀመሉ ጽቡቕ ሓሳብ እዩ።

ኣብ ምትንኻፍ ዝኽእል መሳርሒታት፡ ንቑልቁል ዝወርድ ምኽፋት ባዶ ( $.noop) mouseoverመትሓዚታት ናብቶም ናይ ቀረባ ቆልዑ ናይቲ <body>ባእታ ይውስኽ። This admittedly ugly hack is necessary to work around a quirk in iOS' event delegation , እዚ እንተዘይኮይኑ ካብቲ ንቑልቁል ዝወርድ ወጻኢ ኣብ ዝኾነ ቦታ ምጥዋይ ነቲ ንቑልቁል ዝወርድ ኮድ ካብ ምብጋስ ክኽልክል ምኸኣለ። እቲ ንቑልቁል ዝወርድ ምስ ተዓጽወ፡ እዞም ተወሳኺ ባዶ mouseoverዝኾኑ መትሓዚታት ይእለዩ።

ብመንገዲ ባህርያት ዳታ

data-toggle="dropdown"ንሓደ ንቑልቁል ዝወርድ ንቑልቁል ንምቕያር ናብ ሓደ ሊንክ ወይ መጠወቒ ወስኹ ።

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

ብመንገዲ ጃቫስክሪፕት።

ብመንገዲ ጃቫስክሪፕት ናብቶም ንቑልቁል ዝወርድ ደውሉ፤

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"ሕጂ’ውን ኣድላዪ እዩ።

ንቑልቁል ዝወርድካ ብመንገዲ ጃቫስክሪፕት ትድውለሉ ወይ ኣብ ክንድኡ ነቲ data-api ትጥቀም ብዘየገድስ data-toggle="dropdown"፡ ኩሉ ግዜ ኣብቲ ንቑልቁል ዝወርድ መበገሲ ባእታ ህልው ክህሉ ይግደድ።

ኣማራጺታት

ኣማራጺታት ብመንገዲ ዳታ ​​ባህርያት ወይ ጃቫስክሪፕት ክሓልፉ ይኽእሉ። ንባህርያት ዳታ፡ ስም ኣማራጺ ናብ ምውሳኽ data-፡ ከምቲ ኣብ data-offset="".

ሽም ዓይነት ትሑዝ መግለፂ
ኦፍሴት ዝበሃል ምዃኑ’ዩ። ቁጽሪ | ሕብረ ቃላት | ተግባር 0. ምትዕርራይ ናይቲ ምውራድ ብተዛማዲ ምስቲ ዕላማኡ። ንዝያዳ ሓበሬታ ኣብ Popper.js's offset docs ተወከሱ ።
መንገብገብ ቡልያን ዝብል እዩ። ሓቂ ኣብቲ መወከሲ ባእታ ምድብላቕ እንተጋጢሙ ድሮፕዳውን ክግልበጥ ፍቐደሉ። ንዝያዳ ሓበሬታ ኣብ Popper.js's flip docs ተወከሱ ።
ዶብ ምዃኑ’ዩ። ሕብረ ቃላት | ባእታ 'ስክሮልወላዲ'። ናይ ምፍሳስ ደረት ዶብ ናይቲ ንቑልቁል ዝወርድ ዝርዝር። 'viewport'ናይ , 'window', 'scrollParent', ወይ ናይ HTMLElement መወከሲ ክብርታት ይቕበል (ጃቫስክሪፕት ጥራይ)። ንዝያዳ ሓበሬታ ኣብ Popper.js's preventOverflow docs ተወከሱ ።

ኣስተውዕል boundaryካብ , ናብ ዝኾነ ዋጋ ክቕመጥ ከሎ 'scrollParent'፣ እቲ ቅዲ ኣብቲ መትሓዚ position: staticይትግበር ።.dropdown

ኣገባባት

ሜላ መግለፂ
$().dropdown('toggle') ናይ ሓደ ዝተዋህበ ናቭባር ወይ ትቦ ዘለዎ ምድህሳስ ንቑልቁል ዝወርድ ዝርዝር ይቕይሮ።
$().dropdown('update') ናይ ሓደ ባእታ ንቑልቁል ዝወርድ ቦታ ኣቀማምጣ የዘምን።
$().dropdown('dispose') ናይ ሓደ ባእታ ንቑልቁል ዝወርድ የጥፍኦ።

ፍጻሜታት

ኩሎም ንቑልቁል ዝወርድ ፍጻመታት ኣብቲ .dropdown-menu's ወላዲ ባእታ ይትኮሱን ንብረት ኣለዎምን relatedTarget፣ ዋጋኡ ድማ እቲ ዝቕይር መልህቕ ባእታ እዩ።

ዝግጅት መግለፂ
show.bs.dropdown እዚ ፍጻመ እዚ show instance ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ።
shown.bs.dropdown እዚ ክስተት ዝትኮስ እቲ ንቑልቁል ዝወርድ ንተጠቃሚ ርኡይ ምስ ዝኸውን እዩ (ክሳብ CSS ምስግጋራት ክጽበ እዩ፣ ክሳብ ዝዛዘም)።
hide.bs.dropdown እዚ ፍጻመ እዚ እቲ hide instance method ምስ ተጸውዐ ብቕጽበት ይትኮስ።
hidden.bs.dropdown እዚ ፍጻመ እዚ እቲ ንቑልቁል ዝወርድ ካብ ተጠቃሚ ምሕባእ ምስ ወድአ እዩ ዝትኮስ (ንCSS ምስግጋራት ክጽበ እዩ፣ ክሳብ ዝዛዘም)። 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})