תפריטים נפתחים

החלף בין שכבות-על הקשריות להצגת רשימות של קישורים ועוד באמצעות הפלאגין הנפתח Bootstrap.

בעמוד זה

סקירה כללית

תפריטים נפתחים ניתנים להחלפה, שכבות על הקשריות להצגת רשימות קישורים ועוד. הם נעשים אינטראקטיביים עם תוסף ה-JavaScript הנפתח Bootstrap הכלול. הם מוחלפים על ידי לחיצה, לא על ידי ריחוף; זוהי החלטה עיצובית מכוונת .

תפריטים נפתחים בנויים על ספריית צד שלישי, Popper , המספקת מיקום דינמי וזיהוי נקודת מבט. הקפד לכלול popper.min.js לפני ה-JavaScript של Bootstrap או השתמש ב- bootstrap.bundle.min.js/ bootstrap.bundle.jsהמכיל Popper. Popper אינו משמש למיקום תפריטים נפתחים בסרגלי ניווט, אם כי מיקום דינמי אינו נדרש.

נְגִישׁוּת

תקן WAI ARIA מגדיר role="menu"ווידג'ט ממשי , אבל זה ספציפי לתפריטים דמויי אפליקציה שמפעילים פעולות או פונקציות. תפריטי ARIA יכולים להכיל רק פריטי תפריט, פריטי תפריט תיבת סימון, פריטי תפריט לחצני בחירה, קבוצות לחצני בחירה ותתי תפריטים.

התפריטים הנפתחים של Bootstrap, לעומת זאת, נועדו להיות כלליים וישימים למגוון מצבים ומבני סימון. לדוגמה, ניתן ליצור תפריטים נפתחים המכילים קלט ופקדים נוספים, כגון שדות חיפוש או טפסי התחברות. מסיבה זו, Bootstrap לא מצפה (וגם לא מוסיף אוטומטית) לאף אחת מהתכונות roleוהן aria-הנדרשות לתפריטי ARIA אמיתיים. המחברים יצטרכו לכלול את התכונות הספציפיות יותר הללו בעצמם.

עם זאת, Bootstrap כן מוסיף תמיכה מובנית עבור רוב האינטראקציות הסטנדרטיות בתפריט המקלדת, כגון היכולת לעבור בין .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משני צידי ה-caret ב-25% ולהסיר את margin-leftה- שנוסף עבור תפריטי כפתורים רגילים. השינויים הנוספים האלה שומרים על ה-caret במרכז בלחצן הפיצול ומספקים אזור פגיעה בגודל מתאים יותר ליד הכפתור הראשי.

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

ולהשתמש בו בסרגל ניווט:

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

ההנחיות משתקפות בעת שימוש ב-Bootstrap ב-RTL, כלומר .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

הפעל תפריטים נפתחים מעל אלמנטים על ידי הוספה .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

הפעל תפריטים נפתחים מימין לאלמנטים על ידי הוספה .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>or <button>elements כפריטים נפתחים.

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-currentבתכונה - באמצעות pageהערך עבור הדף הנוכחי, או trueעבור הפריט הנוכחי בסט.

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התפריט הנפתח. ההנחיות משתקפות בעת שימוש ב-Bootstrap ב-RTL, כלומר .dropdown-menu-endיופיע בצד שמאל.

שימו לב! תפריטים נפתחים ממוקמים הודות ל-Popper למעט כאשר הם כלולים בסרגל ניווט.

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"תכונה ללחצנים הנפתחים בסרגלי ניווט, מכיוון ש-Popper אינו בשימוש בסרגלי ניווט.

אפשרויות יישור

אם ניקח את רוב האפשרויות המוצגות לעיל, הנה הדגמה קטנה של כיור מטבח של אפשרויות יישור שונות במקום אחד.

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

משתנים

נוסף בגרסה 5.2.0

כחלק מגישת משתני ה-CSS המתפתחת של Bootstrap, תפריטים נפתחים משתמשים כעת במשתני CSS מקומיים .dropdown-menuלהתאמה אישית משופרת בזמן אמת. ערכים עבור משתני ה-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};

ניתן לראות התאמה אישית באמצעות משתני CSS .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;

מיקסינס

מיקסינים משמשים ליצירת ה-caret מבוססי CSS וניתן למצוא אותם ב 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;
    }
  }
}

נוֹהָג

באמצעות מאפייני נתונים או JavaScript, הפלאגין הנפתח מחליף תוכן מוסתר (תפריטים נפתחים) על ידי החלפת .showמחלקה ב-Aber .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>

דרך JavaScript

התקשר לתפריטים הנפתחים באמצעות JavaScript:

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

`data-bs-toggle="dropdown"`עדיין נדרש

לא משנה אם אתה קורא לתפריט הנפתח שלך באמצעות JavaScript או במקום זאת משתמש ב-data-api, data-bs-toggle="dropdown"תמיד נדרש להיות נוכח ברכיב ההדק של התפריט הנפתח.

אפשרויות

מכיוון שניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript, אתה יכול להוסיף שם אפשרות ל- data-bs-, כמו ב- data-bs-animation="{value}". הקפד לשנות את סוג המארז של שם האופציה מ" camelCase " ל" kebab -case " כאשר אתה מעביר את האפשרויות באמצעות תכונות נתונים. לדוגמה, השתמש data-bs-custom-class="beautifier"במקום data-bs-customClass="beautifier".

החל מ-Bootstrap 5.2.0, כל הרכיבים תומכים בתכונת נתונים שמורה ניסיוניתdata-bs-config שיכולה להכיל תצורה פשוטה של רכיבים כמחרוזת JSON. כאשר לרכיב יש 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'`	גבול אילוץ גלישה של התפריט הנפתח (חל רק על השינוי של PreventOverflow של Popper). כברירת מחדל זה `clippingParents`ויכול לקבל הפניה של HTMLElement (דרך JavaScript בלבד). למידע נוסף עיין במסמכי detectOverflow של Popper .
`display`	חוּט	`'dynamic'`	כברירת מחדל, אנו משתמשים ב-Popper עבור מיקום דינמי. השבת את זה עם `static`.
`offset`	מערך, מחרוזת, פונקציה	`[0, 2]`	היסט של התפריט הנפתח ביחס ליעד שלה. אתה יכול להעביר מחרוזת בתכונות נתונים עם ערכים מופרדים בפסיקים כמו: `data-bs-offset="10,20"`. כאשר פונקציה משמשת לקביעת ההיסט, היא נקראת עם אובייקט המכיל את מיקום ה-popper, הפניה ו-popper rects כארגומנט הראשון שלה. הצומת DOM הגורם המפעיל מועבר כארגומנט השני. הפונקציה חייבת להחזיר מערך עם שני מספרים: החלקה , מרחק . למידע נוסף עיין במסמכי האופסט של פופר .
`popperConfig`	null, אובייקט, פונקציה	`null`	כדי לשנות את ברירת המחדל של תצורת Popper של Bootstrap, ראה את התצורה של Popper . כאשר משתמשים בפונקציה ליצירת תצורת Popper, היא נקראת עם אובייקט שמכיל את תצורת ה-Popper המוגדרת כברירת מחדל של Bootstrap. זה עוזר לך להשתמש ולמזג את ברירת המחדל עם התצורה שלך. הפונקציה חייבת להחזיר אובייקט תצורה עבור Popper.
`reference`	מחרוזת, אלמנט, אובייקט	`'toggle'`	רכיב התייחסות של התפריט הנפתח. מקבל את הערכים של `'toggle'`, `'parent'`, הפניה של HTMLElement או אובייקט המספק `getBoundingClientRect`. למידע נוסף עיין במסמכי הבנאי של Popper ובמסמכי האלמנטים הווירטואליים .

שימוש בפונקציה עם`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באלמנט האב של 's. hide.bs.dropdownולאירועים hidden.bs.dropdownיש clickEventמאפיין (רק כאשר סוג האירוע המקורי הוא click) המכיל אובייקט אירוע עבור אירוע הקליק.

סוג אירוע	תיאור
`hide.bs.dropdown`	יורה מיד כאשר `hide`שיטת המופע נקראה.
`hidden.bs.dropdown`	מופעל כאשר הסתיימה התפריט הנפתח להסתרה מהמשתמש ומעברי CSS הושלמו.
`show.bs.dropdown`	נורה מיד כאשר `show`שיטת המופע נקראת.
`shown.bs.dropdown`	מופעל כאשר התפריט הנפתח הפך לגלוי למשתמש והסתיימו מעברי CSS.

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

תפריטים נפתחים

סקירה כללית

נְגִישׁוּת

דוגמאות

כפתור בודד

כפתור פיצול

גודל

תפריטים נפתחים כהים

הוראות הגעה

RTL

מְרוּכָּז

Dropup

ירידה ממוקדת

Dropend

דרופסטארט

פריטי תפריט

פָּעִיל

נָכֶה

יישור תפריט

יישור רספונסיבי

אפשרויות יישור

תוכן התפריט

כותרות

מְחוּגָה

טֶקסט

טפסים

התנהגות סגירה אוטומטית

CSS

משתנים

משתנים Sass

מיקסינס

נוֹהָג

באמצעות תכונות נתונים

דרך JavaScript

`data-bs-toggle="dropdown"`עדיין נדרש

אפשרויות

שימוש בפונקציה עם`popperConfig`

שיטות

אירועים

תפריטים נפתחים

סקירה כללית

נְגִישׁוּת

דוגמאות

כפתור בודד

כפתור פיצול

גודל

תפריטים נפתחים כהים

הוראות הגעה

RTL

מְרוּכָּז

Dropup

ירידה ממוקדת

Dropend

דרופסטארט

פריטי תפריט

פָּעִיל

נָכֶה

יישור תפריט

יישור רספונסיבי

אפשרויות יישור

תוכן התפריט

כותרות

כותרת נפתחת

מְחוּגָה

טֶקסט

טפסים

אפשרויות נפתחות

התנהגות סגירה אוטומטית

CSS

משתנים

משתנים Sass

מיקסינס

נוֹהָג

באמצעות תכונות נתונים

דרך JavaScript

data-bs-toggle="dropdown"עדיין נדרש

אפשרויות

שימוש בפונקציה עםpopperConfig

שיטות

אירועים

`data-bs-toggle="dropdown"`עדיין נדרש

שימוש בפונקציה עם`popperConfig`