in English

Navbar na ɛwɔ hɔ

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

Wɔ kratafa yi so

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|-xxl}ma mmuae collapsing ne kɔla nhyehyɛe adesua ahorow.
Navbars ne emu nsɛm no yɛ nsu default. Sesa ade no ma ɛnto wɔn trɛw a ɛkɔ soro no ano hye wɔ akwan horow so.
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.
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.
Kyerɛ ade a ɛwɔ hɔ mprempren no denam fa a wode bedi dwuma aria-current="page"ama kratafa a ɛwɔ hɔ mprempren no anaasɛ aria-current="true"ade a ɛwɔ hɔ mprempren wɔ nhyehyɛe bi mu no so.
Foforo wɔ v5.2.0 mu: Navbars betumi ayɛ themed ne CSS variables a wɔde scoped akɔ .navbarbase class no mu. .navbar-lightwɔagyae na .navbar-darkwɔasan akyerɛw de abɔ CSS nsakrae ahorow no so sen sɛ wɔde akwan foforo bɛka ho.

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 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.
Flex ne spacing utilities ma krataa biara controls 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.
Fa optional bi ka ho .navbar-scrollna fa set a max-heightna scroll expanded navbar content .

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.

html na ɛwɔ hɔ

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

Saa nhwɛsoɔ yi de akyi ( bg-light) ne ntamgyinafoɔ ( me-auto, mb-2, mb-lg-0, me-2) 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.

Atwerɛ

Fa wo nsɛm no ka element bi ho ne .navbar-brandadesuakuw no.

html na ɛwɔ hɔ

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

Mfoni

Wubetumi de nsɛm a ɛwɔ mu no asi ananmu .navbar-brandde <img>.

html na ɛwɔ hɔ

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

Mfonini ne nsɛm a wɔakyerɛw

Wubetumi nso de nneɛma foforo bi adi dwuma de mfonini ne nsɛm aka ho bere koro mu. Hyɛ nea wɔde aka ho .d-inline-blockne .align-text-topnea ɛwɔ so no nsow <img>.

html na ɛwɔ hɔ

<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

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

Fa .activeadesuakuw no ka ho .nav-linkna kyerɛ kratafa a ɛwɔ hɔ mprempren no.

Yɛsrɛ wo hyɛ no nsow sɛ ɛsɛ sɛ wode aria-currentattribute no nso ka active no ho .nav-link.

html na ɛwɔ hɔ

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

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

html na ɛwɔ hɔ

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

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.

html na ɛwɔ hɔ

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

Nkyerɛwee ahorow

Fa form controls ne components ahorow gu navbar bi mu:

html na ɛwɔ hɔ

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

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.

html na ɛwɔ hɔ

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

Input akuw nso yɛ adwuma. Sɛ wo navbar yɛ fom mũ no nyinaa, anaasɛ dodow no ara yɛ fom a, wubetumi de <form>element no adi dwuma sɛ container no na wode HTML bi asie.

html na ɛwɔ hɔ

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

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.

html na ɛwɔ hɔ

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

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.

html na ɛwɔ hɔ

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

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

html na ɛwɔ hɔ

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

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

Foforo wɔ v5.2.0 mu: Navbar theming no seesei CSS variables na ɛma ahoɔden na .navbar-lightwɔagyae. Wɔde CSS nsakrae ahorow no di dwuma wɔ .navbar, defaulting to “hann” anim, na wobetumi de .navbar-dark.

Navbar asɛmti ahorow no yɛ mmerɛw sen bere biara esiane Bootstrap no Sass ne CSS nsakrae ahorow a wɔaka abom nti. Default no ne yɛn “light navbar” a yɛde bedi dwuma wɔ akyi kɔla a ɛyɛ hann ho, nanso wubetumi nso abisa .navbar-darkakyi kɔla a ɛyɛ sum. 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" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Nneɛma a wɔde gu mu

Ɛwom sɛ ɛnyɛ nea ɛho hia de, nanso wubetumi abɔ navbar mu wɔ a mu .containerde ahyɛ mfinimfini wɔ kratafa bi so–ɛwom sɛ hyɛ no nsow sɛ wɔda so ara hia ade a ɛwɔ mu de. 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 .

html na ɛwɔ hɔ

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

Fa responsive containers no mu biara sesa sɛnea wɔde nsɛm a ɛwɔ wo navbar no mu no trɛw.

html na ɛwɔ hɔ

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-md">
    <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 fi fixed to the top, fixed to the ase, stickied to the top (de kratafa no kyerɛw kosi sɛ ebedu soro, afei ɛbɛtra hɔ), anaasɛ sticked wɔ ase (de kratafa no abɔ kosi sɛ ebedu ase, afei ɛbɛtra hɔ). 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.

html na ɛwɔ hɔ

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

html na ɛwɔ hɔ

<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

html na ɛwɔ hɔ

<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

html na ɛwɔ hɔ

<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

html na ɛwɔ hɔ

<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

Nsɛm a Wɔahyehyɛ

Fa ka .navbar-nav-scroll( .navbar-navanaasɛ 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 local CSS custom property --bs-navbar-heightanaa custom styles no 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="--bs-scroll-height: 100px;", a ebinom extra margin utilities ma optimum spacing.

html na ɛwɔ hɔ

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

Suban ahorow a ɛma mmuae

Navbars betumi de .navbar-toggler, .navbar-collapse, ne .navbar-expand{-sm|-md|-lg|-xl|-xxl}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:

html na ɛwɔ hɔ

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

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

html na ɛwɔ hɔ

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

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

html na ɛwɔ hɔ

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

Nsɛm a ɛwɔ akyi

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

Collapsed content

Toggleable via the navbar brand.

html na ɛwɔ hɔ

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

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.

Offcanvas a wɔde di dwuma

Dane wo navbar a ɛretrɛw na ɛrebubu no ayɛ no offcanvas drawer a offcanvas component no ka ho . Yɛtrɛw offcanvas default styles no nyinaa mu na yɛde yɛn .navbar-expand-*class ahorow no yɛ navigation sidebar a ɛyɛ nnam na ɛyɛ mmerɛw.

Wɔ nhwɛsoɔ a ɛwɔ aseɛ ha yi mu no, sɛ wopɛ sɛ wobɔ offcanvas navbar a ɛbubu bere nyinaa wɔ breakpoints nyinaa so a, yi .navbar-expand-*adesua no koraa.

html na ɛwɔ hɔ

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

Sɛ wopɛ sɛ wobɔ offcanvas navbar a ɛtrɛw kɔ navbar a ɛyɛ daa mu wɔ breakpoint pɔtee bi te sɛ lg, fa .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>

Sɛ wode offcanvas redi dwuma wɔ navbar a ɛyɛ sum mu a, hu sɛ ebia ɛho behia sɛ wunya akyi a ɛyɛ sum wɔ offcanvas nsɛm no so na amma nsɛm no anyɛ nea wontumi nkenkan. Wɔ nhwɛsoɔ a ɛwɔ aseɛ ha yi mu no, yɛde .navbar-darkne .bg-darkka .navbar, .text-bg-darkto .offcanvas, .dropdown-menu-darkto .dropdown-menu, ne .btn-close-whiteto .btn-closema styling yie a ɛwɔ offcanvas a ɛyɛ sum.

html na ɛwɔ hɔ

<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 a ɛwɔ hɔ no

Nneɛma a Ɛsakra

Wɔde aka ho wɔ v5.2.0 mu

Sɛ́ Bootstrap CSS nsakrae kwan a ɛrekɔ so no fã no, navbars mprempren de mpɔtam hɔ CSS nsakrae ahorow di dwuma wɔ so .navbarma bere ankasa mu nsakrae a ɛkɔ anim. Wɔde Sass so ahyɛ CSS nsakraeɛ no botaeɛ, enti Sass nhyehyɛɛ no da so ara boa, nso.

  --#{$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 nsakraeɛ foforɔ bi nso wɔ hɔ wɔ .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);

Wobetumi ahu customization nam CSS variables so wɔ .navbar-darkclass no so baabi a yɛde values pɔtee bi gu so a yɛmfa CSS selectors a ɛyɛ abien nka ho.

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

Sass nsakrae ahorow

Nsakraeɛ a ɛwɔ navbars nyinaa mu:

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

Nneɛma a ɛsakra ma navbar a ɛyɛ sum no : .

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

Sass a ɛyɛ loop

Wɔde navbar expand/collapse classes a ɛyɛ mmuaeɛ (sɛ nhwɛsoɔ no, .navbar-expand-lg) ka $breakpointsmap no ho na ɛnam loop so na ɛyɛ wɔ 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;
          }
        }
      }
    }
  }
}