Navbar

תיעוד ודוגמאות לכותרת הניווט העוצמתית והמגיבה של Bootstrap, ה-navbar. כולל תמיכה במיתוג, ניווט ועוד, כולל תמיכה בתוסף הכיווץ שלנו.

בעמוד זה

איך זה עובד

הנה מה שאתה צריך לדעת לפני שמתחילים עם סרגל הניווט:

סרגלי Navbar דורשים עטיפה .navbarעם .navbar-expand{-sm|-md|-lg|-xl|-xxl}עבור כיווץ רספונסיבי ושיעורי ערכת צבעים .
ברירת הניווט והתוכן שלהם זורמים כברירת מחדל. שנה את המיכל כדי להגביל את הרוחב האופקי שלהם בדרכים שונות.
השתמש במחלקות השירות של ריווח וגמישות שלנו לשליטה במרווחים ויישור בתוך סרגלי ניווט.
סרגלי הניווט מגיבים כברירת מחדל, אך אתה יכול לשנות אותם בקלות כדי לשנות זאת. התנהגות תגובה תלויה בתוסף ה-Clapse JavaScript שלנו.
הבטח נגישות על ידי שימוש <nav>ברכיב או, אם אתה משתמש ברכיב גנרי יותר כגון <div>, הוסף a role="navigation"לכל סרגל ניווט כדי לזהות אותו באופן מפורש כאזור ציון דרך עבור משתמשים בטכנולוגיות מסייעות.
ציין את הפריט הנוכחי באמצעות aria-current="page"עבור הדף הנוכחי או aria-current="true"עבור הפריט הנוכחי בסט.
חדש בגרסה 5.2.0: ניתן להגדיר נושאים של סרגלי ניווט עם משתני CSS המותאמים למחלקת .navbarהבסיס. .navbar-lightהוצא משימוש .navbar-darkונכתב מחדש כדי לעקוף משתני CSS במקום הוספת סגנונות נוספים.

אפקט האנימציה של רכיב זה תלוי prefers-reduced-motionבשאילתת המדיה. עיין בסעיף תנועה מופחתת בתיעוד הנגישות שלנו .

תוכן נתמך

Navbars מגיעים עם תמיכה מובנית עבור קומץ רכיבי משנה. בחר מבין האפשרויות הבאות לפי הצורך:

.navbar-brandעבור שם החברה, המוצר או הפרויקט שלך.
.navbar-navלניווט בגובה מלא וקל משקל (כולל תמיכה בתפריטים נפתחים).
.navbar-togglerלשימוש עם הפלאגין שלנו להתכווצות והתנהגויות חילופי ניווט אחרות.
כלי עזר להגמיש ומרווח עבור כל בקרות ופעולות של טופס.
.navbar-textלהוספת מחרוזות טקסט ממורכזות אנכית.
.collapse.navbar-collapseלקיבוץ והסתרה של תוכן סרגל הניווט לפי נקודת עצירה של אב.
הוסף אופציונלי .navbar-scrollלהגדיר max-heightולגלול תוכן סרגל ניווט מורחב .

הנה דוגמה לכל רכיבי המשנה הכלולים בסרגל ניווט מגיב לנושא אור שמתמוטט אוטומטית בנקודת הפריצה lg(הגדולה).

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <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">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

דוגמה זו משתמשת במחלקות עזר ברקע ( bg-light) וברווח ( me-auto, mb-2, mb-lg-0, ).me-2

מותג

ניתן .navbar-brandלהחיל את זה על רוב האלמנטים, אבל עוגן עובד הכי טוב, מכיוון שאלמנטים מסוימים עשויים לדרוש מחלקות שירות או סגנונות מותאמים אישית.

טֶקסט

הוסף את הטקסט שלך בתוך אלמנט עם .navbar-brandהכיתה.

html

<!-- As a link -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

תמונה

אתה יכול להחליף את הטקסט בתוך .navbar-brandב- <img>.

html

<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

תמונה וטקסט

אתה יכול גם לעשות שימוש בכמה כלי עזר נוספים כדי להוסיף תמונה וטקסט בו-זמנית. שימו לב לתוספת של .d-inline-blockועל .align-text-topה- <img>.

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Nav

קישורי ניווט של Navbar מתבססים על .navהאפשרויות שלנו עם מחלקה משלהם ודורשים שימוש בשיעורי חילופין לעיצוב רספונסיבי נכון. הניווט בסרגלי הניווט גם יגדל ותתפוס מקום אופקי רב ככל האפשר כדי לשמור על תוכן סרגל הניווט שלך מיושר בצורה מאובטחת.

הוסף את .activeהכיתה .nav-linkכדי לציין את העמוד הנוכחי.

שים לב שאתה צריך גם להוסיף את aria-currentהתכונה ב-active .nav-link.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

אתה יכול גם להשתמש בתפריטים נפתחים בסרגל הניווט שלך. תפריטים נפתחים דורשים רכיב גלישה למיקום, אז הקפידו להשתמש באלמנטים נפרדים ומקוננים עבור .nav-itemוכפי .nav-linkשמוצג להלן.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link 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>
        </li>
      </ul>
    </div>
  </div>
</nav>

טפסים

מקם פקדי טפסים ורכיבים שונים בתוך סרגל ניווט:

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

אלמנטים צאצאים מיידיים של .navbarשימוש מתגמשים בפריסה ויתנו כברירת מחדל justify-content: space-between. השתמש בכלי שירות גמישים נוספים לפי הצורך כדי להתאים התנהגות זו.

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

גם קבוצות קלט עובדות. אם סרגל הניווט שלך הוא טופס שלם, או בעיקר טופס, אתה יכול להשתמש <form>באלמנט כמכיל ולשמור קצת HTML.

html

<nav class="navbar bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

כפתורים שונים נתמכים גם כחלק מטפסי הניווט הללו. זו גם תזכורת נהדרת לכך שניתן להשתמש בכלי עזר ליישור אנכי כדי ליישר אלמנטים בגדלים שונים.

html

<nav class="navbar bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

טֶקסט

סרגלי הניווט עשויים להכיל פיסות טקסט בעזרת .navbar-text. מחלקה זו מתאימה את היישור האנכי והמרווח האופקי עבור מחרוזות טקסט.

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

ערבבו והתאימו עם רכיבים וכלי עזר אחרים לפי הצורך.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

ערכות צבעים

חדש בגרסה 5.2.0: עיצוב הנושא של Navbar מופעל כעת על ידי משתני CSS והוצא .navbar-lightמשימוש. משתני CSS מוחלים על .navbar, כברירת מחדל למראה ה"בהיר", וניתן לעקוף אותם באמצעות .navbar-dark.

ערכות נושא של Navbar קלות מאי פעם הודות לשילוב של Bootstrap של משתני Sass ו-CSS. ברירת המחדל היא "סרגל הניווט הבהיר" שלנו לשימוש עם צבעי רקע בהירים, אבל אתה יכול גם להחיל .navbar-darkצבעי רקע כהים. לאחר מכן, התאם אישית עם .bg-*כלי עזר.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

מיכלים

למרות שזה לא חובה, אתה יכול לעטוף סרגל ניווט ב- .containerכדי למרכז אותו על דף - אם כי שים לב שעדיין נדרש מכולה פנימית. לחלופין, אתה יכול להוסיף מיכל בתוך .navbarכדי למרכז רק את התוכן של סרגל ניווט עליון קבוע או סטטי .

html

<div class="container">
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

השתמש בכל אחד מהמכולות הרספונסיביות כדי לשנות את גודל התוכן בסרגל הניווט שלך.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

מיקום

השתמש בכלי השירות שלנו למיקום כדי למקם סרגלי ניווט במיקומים לא סטטיים. בחר בין קבוע לחלק העליון, קבוע למטה, מודבק לחלק העליון (גולל עם הדף עד שהוא מגיע לחלק העליון, ואז נשאר שם), או דביק לתחתית (גולל עם הדף עד שהוא מגיע לתחתית, ואז נשאר שם).

סרגלי ניווט קבועים משתמשים ב- position: fixed, כלומר הם נשלפים מהזרימה הרגילה של ה-DOM ועשויים לדרוש CSS מותאם אישית (למשל, padding-topב- <body>) כדי למנוע חפיפה עם אלמנטים אחרים.

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

html

<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

html

<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

html

<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

html

<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

גְלִילָה

הוסף .navbar-nav-scrollל- .navbar-nav(או רכיב משנה אחר של סרגל ניווט) כדי לאפשר גלילה אנכית בתוך התוכן הניתן להחלפה של סרגל ניווט מכווץ. כברירת מחדל, הגלילה מתחילה ב- 75vh(או 75% מגובה נקודת התצוגה), אבל אתה יכול לעקוף זאת עם מאפיין ה-CSS המותאם אישית המקומי --bs-navbar-heightאו סגנונות מותאמים אישית. ביציאות תצוגה גדולות יותר כאשר סרגל הניווט מורחב, תוכן יופיע כפי שהוא מופיע בסרגל ניווט ברירת מחדל.

שים לב שהתנהגות זו מגיעה עם חיסרון פוטנציאלי של overflow-כאשר ההגדרה overflow-y: auto(נדרש לגלול את התוכן כאן), overflow-xהיא המקבילה ל- auto, אשר תחתוך חלק מהתוכן האופקי.

הנה דוגמה של סרגל ניווט המשתמש .navbar-nav-scrollעם style="--bs-scroll-height: 100px;", עם כמה כלי עזר לשוליים נוספים עבור מרווח אופטימלי.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            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><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

התנהגויות רספונסיביות

סרגלי הניווט יכולים להשתמש ב- .navbar-toggler, .navbar-collapse, .navbar-expand{-sm|-md|-lg|-xl|-xxl}ובשיעורים כדי לקבוע מתי התוכן שלהם מתמוטט מאחורי כפתור. בשילוב עם כלי עזר אחרים, אתה יכול בקלות לבחור מתי להציג או להסתיר אלמנטים מסוימים.

עבור סרגלי ניווט שלעולם אינם מתכווצים, הוסף את .navbar-expandהכיתה בסרגל הניווט. עבור סרגלי ניווט שמתכווצים תמיד, אל תוסיף אף .navbar-expandמחלקה.

מתחלף

החלפת מצבי Navbar מיושרים לשמאל כברירת מחדל, אבל אם הם עוקבים אחר אלמנט אח כמו .navbar-brand, הם יתיישרו אוטומטית לקצה הימני. היפוך הסימון שלך יהפוך את המיקום של הבורר. להלן דוגמאות לסגנונות החלפה שונים.

ללא .navbar-brandתצוגה בנקודת השבירה הקטנה ביותר:

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

עם שם מותג שמוצג בצד שמאל וחילופין בצד ימין:

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

עם מתג משמאל ושם מותג מימין:

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

תוכן חיצוני

לפעמים אתה רוצה להשתמש בתוסף הכיווץ כדי להפעיל רכיב מכיל עבור תוכן שנמצא מבנית מחוץ ל- .navbar. מכיוון שהתוסף שלנו עובד על התואם, זה נעשה בקלות id!data-bs-target

Collapsed content

Toggleable via the navbar brand.

html

<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Collapsed content</h5>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

כאשר אתה עושה זאת, אנו ממליצים לכלול JavaScript נוסף כדי להעביר את הפוקוס באופן תכנותי אל המכולה כאשר הוא נפתח. אחרת, סביר להניח שמשתמשי מקלדת ומשתמשים בטכנולוגיות מסייעות יתקשו למצוא את התוכן החדש שנחשף - במיוחד אם המכולה שנפתחה מגיעה לפני המתג במבנה המסמך. כמו כן, אנו ממליצים לוודא שלמחליף יש את aria-controlsהתכונה, המצביע על idשל מיכל התוכן. בתיאוריה, זה מאפשר למשתמשי טכנולוגיה מסייעת לקפוץ ישירות מהמתג אל המיכל שעליו הוא שולט - אך התמיכה בכך היא כרגע די חלקית.

Offcanvas

הפוך את סרגל הניווט המתרחב והמתכווץ שלך למגירת offcanvas עם רכיב offcanvas . אנו מרחיבים את שני סגנונות ברירת המחדל offcanvas ומשתמשים .navbar-expand-*בשיעורים שלנו כדי ליצור סרגל צד דינמי וגמיש לניווט.

בדוגמה שלמטה, כדי ליצור סרגל ניווט מחוץ לקנבס שמכווץ תמיד על פני כל נקודות השבירה, השמיט את .navbar-expand-*המחלקה לחלוטין.

html

<nav class="navbar bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <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">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

כדי ליצור סרגל ניווט מחוץ לקנבס שמתרחב לסרגל ניווט רגיל בנקודת עצירה מסוימת כמו lg, השתמש ב .navbar-expand-lg.

<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

בעת שימוש ב-offcanvas בסרגל ניווט כהה, שים לב שייתכן שיהיה עליך רקע כהה בתוכן offcanvas כדי למנוע מהטקסט להפוך לבלתי קריא. בדוגמה שלמטה, אנו מוסיפים .navbar-darkול- , .bg-darkל- , ל- ו- לעיצוב נכון עם קנבס כהה ..navbar.text-bg-dark.offcanvas.dropdown-menu-dark.dropdown-menu.btn-close-white.btn-close

html

<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <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>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

משתנים

נוסף בגרסה 5.2.0

כחלק מגישת משתני CSS המתפתחת של Bootstrap, סרגלי ניווט משתמשים כעת במשתני CSS מקומיים .navbarלהתאמה אישית משופרת בזמן אמת. ערכים עבור משתני ה-CSS נקבעים באמצעות Sass, כך שגם התאמה אישית של Sass עדיין נתמכת.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

כמה משתני CSS נוספים קיימים גם ב .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

ניתן לראות התאמה אישית באמצעות משתני CSS .navbar-darkבמחלקה שבה אנו עוקפים ערכים ספציפיים מבלי להוסיף בוררי CSS כפולים.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

משתנים Sass

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

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color:          $navbar-light-active-color;
$navbar-light-brand-hover-color:    $navbar-light-active-color;

משתנים עבור סרגל הניווט האפל :

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);
$navbar-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

לולאה סאס

מחלקות הרחבה/כיווץ של סרגל ניווט רספונסיבי (למשל, .navbar-expand-lg) משולבות עם $breakpointsהמפה ומיוצרות באמצעות לולאה ב- scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}