Source

ناوبەر

بەڵگەنامە و نموونە بۆ سەردێڕی گەشتیاری بەهێز و وەڵامدەرەوەی Bootstrap، navbar. پشتگیری بۆ براندکردن، گەشتکردن و زۆر شتی تر لەخۆدەگرێت، لەوانەش پشتگیری بۆ پێوەکراوەکەی داڕمان.

چۆن کاردەکات

لێرەدا ئەو شتانە دەخەینەڕوو کە پێویستە بزانیت پێش ئەوەی دەست بە navbar بکەیت:

ناوبارەکان پێویستیان بە پێچانێک هەیە .navbarلەگەڵ .navbar-expand{-sm|-md|-lg|-xl}بۆ پۆلەکانی داڕمانی وەڵامدەرەوە و ڕەنگاوڕەنگ .
ناوبارەکان و ناوەڕۆکەکانیان بە شێوازی پێشوەختە شلەن. بەکارهێنانی دەفری ئیختیاری بۆ سنووردارکردنی پانایی ئاسۆیییان.
پۆلەکانی سوودمەندی دووری و فلیکسمان بەکاربهێنە بۆ کۆنترۆڵکردنی دووری و ڕێکخستن لەناو navbars.
ناوبارەکان بە شێوازی پێشوەختە وەڵامدەرەوەن، بەڵام دەتوانیت بە ئاسانی دەستکارییان بکەیت بۆ ئەوەی ئەوە بگۆڕیت. هەڵسوکەوتی وەڵامدانەوە بەندە بە پێوەکراوەکەی Collapse JavaScript ـمانەوە.
ناوبارەکان بە شێوازی پێشوەختە لە کاتی چاپکردندا دەشاردرێنەوە. ناچارکردنیان چاپ بکرێن بە زیادکردنی .d-printبۆ .navbar. سەیری پۆلی سوودمەندی پیشاندانی بکە.
دەستڕاگەیشتن بە بەکارهێنانی <nav>توخمێک یان، ئەگەر توخمێکی گشتیتر وەک a بەکاربهێنیت <div>، a زیاد بکە role="navigation"بۆ هەموو ناوبارێک بۆ ئەوەی بە ڕوونی وەک ناوچەیەکی هێما بۆ بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان دەستنیشان بکەیت.

بۆ نموونە و لیستی پێکهاتە لاوەکییە پشتگیریکراوەکان بەردەوام بخوێنەرەوە.

ناوەڕۆکی پشتگیریکراو

ناوبارەکان پشتگیرییەکی ناوەکییان لەگەڵدایە بۆ مشتێک پێکهاتەی لاوەکی. بەپێی پێویست لەمانەی خوارەوە هەڵبژێرە:

.navbar-brandبۆ ناوی کۆمپانیا، بەرهەم، یان پڕۆژەکەت.
.navbar-navبۆ گەشتێکی تەواو بەرز و سووک (لەوانەش پشتگیری بۆ دابەزینەکان).
.navbar-togglerبۆ بەکارهێنان لەگەڵ پێوەکراوەکانی داڕمان و هەڵسوکەوتەکانی تری گۆڕینی گەشتکردنمان .
.form-inlineبۆ هەر فۆرمێک کۆنتڕۆڵ و کردارێک.
.navbar-textبۆ زیادکردنی ڕیزەکانی دەق کە ناوەندی ڕاست بن.
.collapse.navbar-collapseبۆ گرووپکردن و شاردنەوەی ناوەڕۆکی navbar بەپێی خاڵی شکاندنی باوک.

لێرەدا نموونەیەک لە هەموو ئەو پێکهاتە لاوەکیانە دەخەینەڕوو کە لە ناوبارێکی وەڵامدەرەوەی ڕووناکی-تەوەرەدا هاتووە کە بە شێوەیەکی ئۆتۆماتیکی لە 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دەتوانرێت The بۆ زۆربەی توخمەکان بەکاربهێنرێت، بەڵام ئەنکر باشترین کاردەکات چونکە هەندێک توخم لەوانەیە پێویستیان بە پۆلی سوودبەخش یان ستایلە تایبەتمەندەکان هەبێت.

<!-- 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هەڵبژاردەکانمان بە پۆلی دەستکاریکەری تایبەت بە خۆیان بنیات دەنرێت و پێویستیان بە بەکارهێنانی پۆلەکانی toggler هەیە بۆ ستایلکردنی وەڵامدەرەوەی دروست. هەروەها گەشتکردن لە ناوبارەکاندا گەشە دەکات بۆ ئەوەی زۆرترین شوێنی ئاسۆیی داگیر بکات بۆ ئەوەی ناوەڕۆکی ناوبارەکانت بە شێوەیەکی پارێزراو ڕێکبخرێت.

دۆخە چالاکەکان-لەگەڵ .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>

وە لەبەر ئەوەی ئێمە پۆلەکان بۆ navsەکانمان بەکاردەهێنین، دەتوانیت بە تەواوی خۆت لە رێبازی بنەمای لیست بەدوور بگرێت ئەگەر حەزت لێیە.

<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 ـەکەتدا لە درۆپداونەکان کەڵک وەربگریت. مینیوەکانی دابەزین پێویستیان بە توخمێکی پێچان هەیە بۆ جێگیرکردن، بۆیە دڵنیابە لە بەکارهێنانی توخمە جیاواز و هێلانەکراوەکان بۆ .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>

دەفرەکان

هەرچەندە پێویست نییە، دەتوانیت ناوبارێک لە a بپێچیتەوە .containerبۆ ئەوەی لە لاپەڕەیەکدا ناوەڕاستی بکەیت یان یەکێک زیاد بکەیت لەناوەوە بۆ ئەوەی تەنها ناوەڕۆکی ناوبارێکی سەرەوەی جێگیر یان ئیستاتیک لە ناوەڕاستدا بێت .

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

کاتێک کە کۆنتێنەرەکە لەناو navbar ـەکەتدایە، پادکردنی ئاسۆیی لە خاڵەکانی شکاندنی کەمتر لە .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>

جێگیرکردن

سوودمەندییەکانی پێگەی ئێمە بەکاربهێنە بۆ دانانی ناوبارەکان لە شوێنی نائیستاتیکدا. لە جێگیر بۆ سەرەوە، جێگیر بۆ خوارەوە، یان چەسپاو بە سەرەوە هەڵبژێرە (لەگەڵ لاپەڕەکەدا دەڕوات تا دەگاتە سەرەوە، پاشان لەوێ دەمێنێتەوە). navbars جێگیرەکان , بەکاردەهێنن 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انەی کە هەمیشە دادەخرێن، هیچیان زیاد مەکە.navbar-expand پۆلێک زیاد مەکەن.

تۆگلەر

تۆگلەرەکانی ناوبار بە شێوازی پێشوەختە بە چەپ ڕێکدەخرێن، بەڵام دەبێت شوێن توخمێکی خوشک و برا وەک a بکەون.navbar-brand ، ئەوا بە شێوەیەکی ئۆتۆماتیکی ڕیز دەکرێن بۆ لای ڕاستی کۆتایی. پێچەوانەکردنەوەی مارکاپەکەت شوێنی تۆگلەرەکە پێچەوانە دەکاتەوە. لە خوارەوە نموونەی ستایلە جیاوازەکانی toggle دەخەینەڕوو.

بەبێ ئەوەی .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>

ناوەڕۆکی دەرەکی

هەندێک جار دەتەوێت پێوەکراوەکەی collapse بەکاربهێنیت بۆ دەستپێکردنی ناوەڕۆکی شاراوە لە شوێنەکانی تری لاپەڕەکە. چونکە پێوەکراوەکەمان لەسەر idو data-targetهاوتاکردن کاردەکات، ئەوە بە ئاسانی ئەنجام دەدرێت!

Collapsed content

Toggleable via the navbar brand.

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