in English

Navbar na ɛwɔ hɔ

Nwoma ne nhwɛsoɔ ma Bootstrap tumi, mmuaeɛ akwantuo ti, navbar. Nea ɛka ho ne mmoa a wɔde ma branding, navigation, collapse plugin, ne nea ɛkeka ho.

Sɛnea ɛyɛ adwuma

Nea ɛsɛ sɛ wuhu ansa na woafi ase de navbar no ni:

  • Navbars hwehwɛ wrapping .navbarne .navbar-expand{-sm|-md|-lg|-xl}ma mmuae collapsing ne kɔla nhyehyɛe adesua ahorow.
  • Navbars ne emu nsɛm no yɛ nsu default. Fa nsukorade a wopɛ di dwuma de siw wɔn trɛw a ɛkɔ soro no ano hye.
  • Fa yɛn spacing ne flex utility classes no di dwuma ma hwɛ spacing ne alignment wɔ navbars mu.
  • Navbars no yɛ mmuae default so, nanso wubetumi asesa no ntɛm de asesa saa. Suban a ɛma mmuae gyina yɛn Collapse JavaScript plugin no so.
  • Navbars no wɔde sie default so bere a woretintim no. Hyɛ wɔn ma wontintim denam nea wode bɛka ho .d-printno so .navbar. Hwɛ display utility adesuakuw no.
  • Hwɛ sɛ wobɛtumi anya bi denam <nav>element bi a wode bedi dwuma so anaasɛ, sɛ wode element a ɛyɛ generic kɛse te sɛ a redi dwuma a <div>, fa a ka role="navigation"navbar biara ho de kyerɛ pefee sɛ ɛyɛ ɔmantam a ɛyɛ agyiraehyɛde ma wɔn a wɔde mfiridwuma a ɛboa di dwuma no.
Animation nkɛntɛnso a ɛwɔ saa ade yi mu no gyina prefers-reduced-motionmedia asɛmmisa no so. Hwɛ yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .

Nsɛm a wɔboa

Navbars ba a wɔasisi mu mmoa ma nsa kakraa bi sub-components. Paw nea edidi so yi mu sɛnea ɛho hia:

  • .navbar-brandma wo adwumakuw, ade, anaa adwuma no din.
  • .navbar-navma akwantu a ɛkorɔn ne nea emu yɛ hare (a mmoa a wɔde ma wɔ nneɛma a wɔde gu fam ka ho).
  • .navbar-togglersɛ wode bedi dwuma wɔ yɛn collapse plugin ne navigation toggling suban afoforo ho.
  • .form-inlinema ɔkwan biara so tumidi ne nneyɛe.
  • .navbar-textsɛ wode nsɛm nhama a ɛwɔ mfinimfini gyina hɔ bɛka ho.
  • .collapse.navbar-collapsema navbar mu nsɛm a wɔde akuwakuw na wɔde sie denam ɔwofo breakpoint so.

Nhwɛsoɔ a ɛfa sub-components nyinaa a ɛka ho wɔ responsive light-themed navbar a ɛhwe ase ankasa wɔ lg(kɛseɛ) breakpoint no nie.

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

Saa nhwɛsoɔ yi de kɔla ( bg-light) ne ntamgyinafoɔ ( my-2, my-lg-0, mr-sm-0, my-sm-0) mfasoɔ adesua ahodoɔ di dwuma.

Adeban

Wobetumi de The .navbar-brandno adi dwuma wɔ element dodow no ara ho, nanso anchor yɛ adwuma yiye, efisɛ element ahorow bi betumi ahwehwɛ utility classes anaa custom styles.

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

Ɛda adi sɛ mfonini ahorow a wode bɛka ho no .navbar-brandbɛhwehwɛ bere nyinaa sɛ wobɛyɛ custom styles anaa utilities na ama ne kɛse ayɛ yiye. Nhwɛso ahorow bi a yebetumi ayɛ ho ɔyɛkyerɛ ni.

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

Navbar navigation links si yɛn .navoptions so ne wɔn ankasa modifier class na ɛhwehwɛ sɛ wɔde toggler classes di dwuma ma mmuae a ɛfata styling. Navigation wɔ navbars mu nso bɛnyin akɔfa horizontal space pii sɛdeɛ ɛbɛyɛ yie na ama wo navbar mu nsɛm no akɔ so ayɛ pɛpɛɛpɛ.

Wobetumi de tebea horow a ɛyɛ adwuma—a .active—a ɛkyerɛ kratafa a ɛwɔ hɔ mprempren no adi dwuma tẽẽ wɔ .nav-links anaa wɔn awofo a wɔbɛn wɔn pɛɛ .nav-items so.

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

Na esiane sɛ yɛde classes di dwuma ma yɛn navs nti, wubetumi akwati list-based approach no koraa sɛ wopɛ a.

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

Wubetumi nso de dropdowns adi dwuma wɔ wo navbar no mu. Dropdown menus hwehwɛ wrapping element ma positioning, enti hwɛ hu sɛ wode elements a ɛtetew ne nested bedi dwuma ama .nav-itemne .nav-linksɛnea wɔakyerɛ wɔ ase ha no.

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

Nkyerɛwee ahorow

Fa form controls ne components ahorow gu navbar bi mu a .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>

Ntɛm ara abofra elements of .navbaruse flex layout na ɛbɛ default akɔ justify-content: space-between. Fa flex utilities foforo di dwuma sɛnea ɛho hia na woasiesie saa suban yi.

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

Input akuw ahorow nso yɛ adwuma:

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

Wɔboa bɔton ahorow sɛ navbar nkrataa yi fã, nso. Eyi nso yɛ nkaebɔ kɛse sɛ wobetumi de vertical alignment utilities adi dwuma de ahyɛ element ahorow a ɛsono ne kɛse hyia.

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

Atwerɛ

Navbars betumi akura nsɛm nketenkete bi a ɛnam .navbar-text. Saa adesua yi sesa vertical alignment ne horizontal spacing ma nsɛm a wɔahyehyɛ no nhama.

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

Fa fra na fa nneɛma afoforo ne nneɛma a wɔde di dwuma no fra mu sɛnea ɛho hia.

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

Kɔla ahorow a wɔde yɛ nneɛma

Theming navbar no nyɛ mmerɛw da esiane theming adesua ahorow ne background-colorutilities a wɔaka abom nti. Paw bi .navbar-lightna wode bedi dwuma wɔ akyi kɔla a ɛyɛ hann, anaasɛ .navbar-darkakyi kɔla a ɛyɛ tumm. Afei, fa .bg-*utilities yɛ wo ho sɛnea wopɛ.

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

Nneɛma a wɔde gu mu

Ɛwom sɛ ɛnyɛ nea ɛho hia de, nanso wubetumi de navbar abɔ a mu .containerde ayɛ mfinimfini wɔ kratafa bi so. Anaasɛ wubetumi de ade bi aka ho wɔ mu .navbarde ayɛ mfinimfini navbar a ɛwɔ soro a ɛyɛ pintinn anaasɛ ɛnyɛ nea ɛwɔ soro no mu nkutoo .

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

Sɛ container no wɔ wo navbar no mu a, woyi ne horizontal padding no fi hɔ wɔ breakpoints a ɛba fam sen wo .navbar-expand{-sm|-md|-lg|-xl}class a woakyerɛ no. Wei hwɛ sɛ yɛrenyɛ mmɔho mmienu wɔ padding so a ɛho nhia wɔ viewports a ɛwɔ fam so bere a wo navbar no abubu.

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

Nneɛma a wɔde bɛto hɔ

Fa yɛn gyinabea utilities no si navbars wɔ gyinabea a ɛnyɛ static. Paw fixed to the top, fixed to the bottom, anaa stickied to the top (fa kratafa no kyerɛw kosi sɛ ebedu soro, afei ɛtra hɔ). Fixed navbars de di dwuma position: fixed, a ɛkyerɛ sɛ wɔtwe wɔn fi DOM no nsu a ɛsen daa no mu na ebetumi ahwehwɛ CSS a wɔahyɛ da ayɛ (sɛ nhwɛso no, padding-topwɔ <body>) no so na asiw nneɛma afoforo a ɛbɛka abom no ano.

Afei nso hyɛ no nsow sɛ .sticky-topde di dwuma position: sticky, a wɔmfa mmoa koraa wɔ browser biara mu .

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

Nsɛm a Wɔahyehyɛ

Fa ka .navbar-nav-scroll( .navbar-collapseanaasɛ navbar sub-component foforo) ho na ama woatumi ayɛ vertical scrolling wɔ toggleable contents a ɛwɔ navbar a abubu no mu. Sɛnea wɔahyɛ no, scrolling kicks in wɔ 75vh(anaasɛ 75% wɔ viewport height), nanso wubetumi de inline anaa custom styles abɔ so. Wɔ viewports akɛse mu bere a wɔatrɛw navbar no mu no, nsɛm no bɛda adi sɛnea ɛte wɔ default navbar no mu no.

Yɛsrɛ wo hyɛ no nsow sɛ saa suban yi de ɔhaw bi a ebetumi aba a ɛne overflow—bere a nhyehyɛe overflow-y: auto(a ɛho hia sɛ wobɛtwetwe nsɛm no wɔ ha), overflow-xyɛ nea ɛne auto, a ɛbɛtwitwa nsɛm bi a ɛkɔ soro no yɛ pɛ.

Ɛha na nhwɛsoɔ navbar de di dwuma .navbar-nav-scrollne style="max-height: 100px;", a ebinom extra margin utilities ma optimum spacing.

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

Suban ahorow a ɛma mmuae

Navbars betumi de .navbar-toggler, .navbar-collapse, ne .navbar-expand{-sm|-md|-lg|-xl}adesua ahorow adi dwuma de ahu bere a wɔn nsɛm no bɛhwe ase wɔ bɔtn bi akyi. Sɛ wode nneɛma afoforo ka ho a, ɛnyɛ den sɛ wobɛpaw bere a wobɛkyerɛ anaa wode nneɛma pɔtee bi besie.

Sɛ wopɛ navbars a ɛnhwe ase da a, fa .navbar-expandclass no ka ho wɔ navbar no so. Navbars a ɛhwe ase bere nyinaa no, mfa .navbar-expandadesua biara nka ho.

Toggler a wɔde yɛ nneɛma

Navbar togglers no yɛ benkum-aligned default, nanso sɛ wodi sibling element akyi te sɛ a .navbar-brand, wɔbɛfa wɔn ho akɔ nifa so koraa. Sɛ wodan wo markup no a, ɛbɛdan toggler no a wode besi hɔ no. Ase hɔ no yɛ nhwɛso ahorow a ɛfa toggle style ahorow ho.

Bere a .navbar-brandwɔankyerɛ biara wɔ breakpoint ketewaa bi no:

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

Bere a wɔakyerɛ brand din wɔ benkum so ne toggler wɔ nifa so:

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

Na toggler wɔ benkum so na brand din wɔ nifa so:

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

Nsɛm a ɛwɔ akyi

Ɛtɔ da bi a wopɛ sɛ wode collapse plugin no di dwuma de kanyan container element bi ma nsɛm a ɛwɔ structurally tra .navbar. Esiane sɛ yɛn plugin no yɛ adwuma wɔ idne data-targetmatching no so nti, ɛno yɛ mmerɛw sɛ wɔbɛyɛ!

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

Sɛ woyɛ eyi a, yɛhyɛ nyansa sɛ fa JavaScript foforo ka ho na ama wode focus no akɔ nhyehyɛe kwan so akɔ container no mu bere a wɔabue no. Sɛ ɛnte saa a, ɛbɛyɛ sɛ wɔn a wɔde keyboard di dwuma ne wɔn a wɔde mmoa mfiridwuma di dwuma no benya ɔhaw wɔ nsɛm a wɔada no adi foforo no ho - titiriw sɛ ade a wobuee no di toggler no anim wɔ krataa no nhyehyɛe mu a. Yɛsan nso hyɛ nyansa sɛ hwɛ sɛ toggler no wɔ aria-controlsattribute no, twe adwene si idof the content container no so. Wɔ nsusuwii mu no, eyi ma mmoa mfiridwuma a wɔde di dwuma no kwan ma wohuruw tẽẽ fi toggler no mu kɔ container a ɛhwɛ so no so–nanso mmoa a wɔde ma eyi no yɛ mprempren patchy koraa.