האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
Check
in English

נאַוובאַר

דאַקיומע��טיישאַן און ביישפילן פֿאַר באָאָטסטראַפּ ס שטאַרק, אָפּרופיק נאַוויגאַציע כעדער, די נאַוובאַר. ינקלודז שטיצן פֿאַר בראַנדינג, נאַוויגאַציע און מער, אַרייַנגערעכנט שטיצן פֿאַר אונדזער ייַנבראָך פּלוגין.

אויף דעם בלאַט

וויאזוי עס ארבעט

דאָ ס וואָס איר דאַרפֿן צו וויסן איידער איר אָנהייבן מיט די נאַוובאַר:

  • נאַוובאַרס דאַרפן אַ ראַפּינג .navbarמיט .navbar-expand{-sm|-md|-lg|-xl|-xxl}פֿאַר אָפּרופיק קאַלאַפּסינג און קאָליר סכעמע קלאסן.
  • נאַוובאַרס און זייער אינהאַלט זענען פליסיק דורך פעליקייַט. טוישן דעם קאַנטיינער צו באַגרענעצן זייער האָריזאָנטאַל ברייט אין פאַרשידענע וועגן.
  • ניצן אונדזער ספּייסינג און פלעקס נוצן קלאסן פֿאַר קאַנטראָולינג ספּייסינג און אַליינמאַנט אין נאַוובאַרס.
  • נאַוובאַרס זענען אָפּרופיק דורך פעליקייַט, אָבער איר קענען לייכט מאָדיפיצירן זיי צו טוישן דאָס. אָפּרופיק נאַטור דעפּענדס אויף אונדזער קאַלאַפּס דזשאַוואַסקריפּט פּלוגין.
  • פאַרזיכערן אַקסעסאַביליטי דורך ניצן אַ <nav>עלעמענט אָדער, אויב איר נוצן אַ מער דזשאַנעריק עלעמענט אַזאַ ווי אַ <div>, לייגן אַ role="navigation"צו יעדער נאַוובאַר צו בפירוש ידענטיפיצירן עס ווי אַ לאַנדמאַרק געגנט פֿאַר יוזערז פון אַסיסטיוו טעקנאַלאַדזשיז.
  • אָנווייַזן דעם קראַנט נומער דורך ניצן aria-current="page"פֿאַר דעם קראַנט בלאַט אָדער aria-current="true"פֿאַר דעם קראַנט נומער אין אַ גאַנג.
  • נייַ אין וו5.2.0: נאַוובאַרס קענען זיין טימד מיט CSS וועריאַבאַלז וואָס זענען סקאָופּעד צו די .navbarבאַזע קלאַס. .navbar-lightאיז דיפּרישיייטיד און .navbar-darkאיז רירייט צו אָווועררייד CSS וועריאַבאַלז אַנשטאָט פון אַדינג נאָך סטיילז.
די אַנאַמיישאַן ווירקונג פון דעם קאָמפּאָנענט איז אָפענגיק אויף די prefers-reduced-motionמידיאַ אָנפֿרעג. זען די רידוסט באַוועגונג אָפּטיילונג פון אונדזער אַקסעסאַביליטי דאַקיומענטיישאַן .

שטיצט אינהאַלט

נאַוובאַרס קומען מיט אַ געבויט-אין שטיצן פֿאַר אַ האַנדפול פון סאַב-קאָמפּאָנענט. קלייַבן פון די פאלגענדע ווי דארף:

  • .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אָפּציעס מיט זייער אייגענע מאָדיפיער קלאַס און דאַרפן די נוצן פון טאַגלער קלאסן פֿאַר געהעריק אָפּרופיק סטילינג. נאַוויגאַציע אין נאַוובאַרס וועט אויך וואַקסן צו פאַרנעמען ווי פיל האָריזאָנטאַל פּלאַץ ווי מעגלעך צו האַלטן דיין נאַוובאַר אינהאַלט סיקיורלי אַליינד.

לייג די .activeקלאַס אויף .nav-linkצו אָנווייַזן דעם קראַנט בלאַט.

ביטע טאָן אַז איר זאָל אויך לייגן דעם aria-currentאַטריביוט אויף די אַקטיוו .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>

Forms

שטעלן פאַרשידן פאָרעם קאָנטראָלס און קאַמפּאָונאַנץ אין אַ נאַוובאַר:

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: נאַוובאַר טימינג איז איצט פּאַוערד דורך CSS וועריאַבאַלז און .navbar-lightאיז דיפּרישיייטיד. CSS וועריאַבאַלז זענען געווענדט צו .navbar, דיפאָלטינג צו די "ליכט" אויסזען, און קענען זיין אָווועררידאַן מיט .navbar-dark.

נאַוובאַר טימז זענען גרינגער ווי אלץ דאַנק צו באָאָטסטראַפּ ס קאָמבינאַציע פון ​​סאַס און קסס וועריאַבאַלז. די פעליקייַט איז אונדזער "ליכט נאַוובאַר" פֿאַר נוצן מיט ליכט הינטערגרונט פֿאַרבן, אָבער איר קענען אויך צולייגן .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-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וואָס ריכטן זיך, דאָס איז לייכט געטאן!

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>

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

אָפקאַנוואַס

יבערמאַכן דיין יקספּאַנדיד און קאַלאַפּסינג נאַוובאַר אין אַן אָפקאַנוואַס שופלאָד מיט די אָפקאַנוואַס קאָמפּאָנענט . מיר פאַרברייטערן ביידע די אָפקאַנוואַס פעליקייַט סטיילז און נוצן אונדזער .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>

ווען איר נוצן אָפקאַנוואַס אין אַ טונקל נאַוובאַר, זיין אַווער אַז איר קען דאַרפֿן צו האָבן אַ טונקל הינטערגרונט אויף די אָפקאַנוואַס אינהאַלט צו ויסמיידן די טעקסט איז ומלעגאַל. אין דעם בייַשפּיל אונטן, מיר לייגן .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

ווי אַ טייל פון Bootstrap ס יוואַלווינג CSS וועריאַבאַלז צוגאַנג, נאַוובאַרס איצט נוצן היגע CSS וועריאַבאַלז .navbarפֿאַר ימפּרוווד פאַקטיש-צייט קוסטאָמיזאַטיאָן. וואַלועס פֿאַר די CSS וועריאַבאַלז זענען באַשטימט דורך סאַס, אַזוי סאַס קוסטאָמיזאַטיאָן איז נאָך געשטיצט אויך.

  --#{$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)};

סאָס וועריאַבאַלז

וועריאַבאַלז פֿאַר אַלע נאַוובאַרס:

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