in English

נאַוובאַר

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

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

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

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

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

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

  • .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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <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">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-0my-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.6/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.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

נאַוויגאַטאָר נאַוויגאַציע פֿאַרבינדונגען בויען אויף אונדזער .navאָפּציעס מיט זייער אייגענע מאָדיפיער קלאַס און דאַרפן די נוצן פון טאַגלער קלאסן פֿאַר געהעריק אָפּרופיק סטילינג. נאַוויגאַציע אין נאַוובאַרס וועט אויך וואַקסן צו פאַרנעמען ווי פיל האָריזאָנטאַל פּלאַץ ווי מעגלעך צו האַלטן דיין נאַוובאַר אינהאַלט סיקיורלי אַליינד.

אַקטיוו שטאַטן - מיט .active- צו אָנווייַזן דעם קראַנט בלאַט קענען זיין געווענדט גלייַך צו .nav-linkס אָדער זייער באַלדיק פאָטער .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">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-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

איר קענט אויך נוצן דראָפּדאָוונס אין דיין נאַוובאַר. דראָפּדאָוון מעניוז דאַרפן אַ ראַפּינג עלעמענט פֿאַר פּאַזישאַנינג, אַזוי זיין זיכער צו נוצן באַזונדער און נעסטעד עלעמענטן פֿאַר .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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Forms

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

גלייך קינד עלעמענטן פון .navbarנוצן פלעקס אויסלייג און וועט פעליקייַט צו justify-content: space-between. ניצן נאָך פלעקס יוטילאַטיז ווי דארף צו סטרויערן דעם נאַטור.

<nav class="navbar navbar-light bg-light">
  <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>

קאָליר סקימז

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

<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-nav-scrollצו אַ .navbar-collapse(אָדער אנדערע נאַוובאַר סאַב-קאָמפּאָנענט) צו געבן ווערטיקאַל סקראָללינג אין די טאַגאַלאַבאַל אינהאַלט פון אַ קאַלאַפּסט נאַוובאַר. דורך פעליקייַט, סקראָללינג קיקס אין 75vh(אָדער 75% פון די וויופּאָרט הייך), אָבער איר קענען אָווועררייד דעם מיט ינלינע אָדער מנהג סטיילז. אין גרעסערע וויופּאָרץ ווען די נאַוובאַר איז יקספּאַנדיד, אינהאַלט וועט דערשייַנען ווי אין אַ פעליקייַט נאַוובאַר.

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

דאָ ס אַ ביישפּיל נאַוובאַר ניצן .navbar-nav-scrollמיט style="max-height: 100px;", מיט עטלעכע עקסטרע גרענעץ יוטילאַטיז פֿאַר אָפּטימום ספּייסינג.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <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="#" role="button" data-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">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

אָפּרופיק ביכייוויערז

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

פֿאַר נאַוובאַרס וואָס קיינמאָל ייַנבראָך, לייגן די .navbar-expandקלאַס אויף די נאַוובאַר. פֿאַר נאַוובאַרס וואָס שטענדיק ייַנבראָך, טאָן ניט לייגן קיין .navbar-expandקלאַס.

טאָגגלער

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

פונדרויסנדיק אינהאַלט

מאל איר ווילן צו נוצן די ייַנבראָך פּלוגין צו צינגל אַ קאַנטיינער עלעמענט פֿאַר אינהאַלט וואָס סטראַקטשעראַלי זיצט אַרויס פון די .navbar. ווייַל אונדזער פּלוגין אַרבעט אויף די idאון data-targetוואָס ריכטן זיך, דאָס איז לייכט געטאן!

<div class="fixed-top">
  <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">
    <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>

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