Source

Navbar

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

איך זה עובד

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

סרגלי Navbar דורשים עטיפה .navbarעם .navbar-expand{-sm|-md|-lg|-xl}עבור קריסה מגיבה וערכת צבעים רספונסיבי ושיעורי
סרגלי הניווט והתוכן שלהם זורמים כברירת מחדל. השתמש במיכלים אופציונליים כדי להגביל את הרוחב האופקי שלהם.
השתמש במרווח שלנו והגמיש בתוך סרגלי ניווט.
סרגלי הניווט מגיבים כברירת מחדל, אך אתה יכול לשנות אותם בקלות כדי לשנות זאת. התנהגות תגובה תלויה בתוסף ה-Clapse JavaScript שלנו.
סרגלי הניווט מוסתרים כברירת מחדל בעת הדפסה. הכריח אותם להדפיס על ידי הוספה .d-printל- .navbar. ראה את התצוגה מחלקת השירות
הבטח נגישות על ידי שימוש <nav>ברכיב או, אם אתה משתמש ברכיב גנרי יותר כגון <div>, הוסף a role="navigation"לכל סרגל ניווט כדי לזהות אותו באופן מפורש כאזור ציון דרך עבור משתמשים בטכנולוגיות מסייעות.

המשך לקרוא לקבלת דוגמה ורשימת רכיבי משנה נתמכים.

תוכן נתמך

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

דוגמה זו משתמשת במחלקות עזר צבע ( bg-light) ומרווח ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

מותג

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

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

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

הוספת תמונות לתמונות .navbar-brandתדרוש ככל הנראה תמיד סגנונות מותאמים אישית או כלי עזר לגודל נכון. להלן כמה דוגמאות להדגמה.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Nav

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

מצבים פעילים - עם .active-כדי לציין את הדף הנוכחי ניתן להחיל ישירות על .nav-links או ההורים המיידיים שלהם .nav-item.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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>
      </li>
    </ul>
  </div>
</nav>

טפסים

מקם פקדי טופס ורכיבים שונים בתוך סרגל ניווט עם .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

יישר את התוכן של הטפסים המוטבעים שלך עם כלי עזר לפי הצורך.

<nav class="navbar navbar-light bg-light justify-content-between">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

גם קבוצות קלט עובדות:

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

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

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

טֶקסט

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

ערכות צבעים

עיצוב ה-navbar מעולם לא היה קל יותר הודות לשילוב של כיתות נושא וכלי background-colorעזר. בחר מתוך .navbar-lightלשימוש עם צבעי רקע בהירים, או .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 navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

מיכלים

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

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

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

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

מיקום

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

שים לב גם .sticky-topשמשתמשים position: sticky, שאינם נתמכים במלואם בכל דפדפן .

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

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

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

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

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

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

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

מתחלף

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

תוכן חיצוני

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

תוכן מכווץ

ניתן להחלפה באמצעות המותג navbar.

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