Source

נאַוובאַר

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

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

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

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

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

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

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

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

נאַוויגאַטאָר נאַוויגאַציע פֿאַרבינדונגען בויען אויף אונדזער .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" 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>

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

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>

ייַנרייען די אינהאַלט פון דיין ינלינע פארמען מיט יוטילאַטיז ווי דארף.

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

קאָליר סקימז

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

קאַלאַפּסט אינהאַלט

טאָגלאַבלע דורך די נאַוובאַר סאָרט.

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