in English

Navbar

Litokomane le mehlala ea sehlooho sa Bootstrap se matla, se arabelang, navbar. E kenyelletsa tšehetso bakeng sa ho tuma, ho tsamaea, le tse ling, ho kenyeletsoa tšehetso bakeng sa plugin ea rona ea ho putlama.

Leqepheng lena

Kamoo e sebetsang kateng

Mona ke seo u hlokang ho se tseba pele u qala ka navbar:

Li-Navbar li hloka sephutheloana .navbarbakeng .navbar-expand{-sm|-md|-lg|-xl|-xxl}sa lihlopha tse arabelang tsa ho putlama le mebala .
Li-Navbar le litaba tsa tsona li na le mokelikeli ka ho sa feleng. Fetola setshelo ho fokotsa bophara ba bona bo otlolohileng ka mekhoa e fapaneng.
Sebelisa litlelase tsa rona tsa ho arohana le maemo bakeng sa ho laola sebaka le ho tsamaisana ka har'a li-navbar .
Li-Navbar li arabela ka ho sa feleng, empa u ka li fetola habonolo ho fetola seo. Boitšoaro ba ho arabela bo itšetlehile ka plugin ea rona ea Collapse JavaScript.
Netefatsa phihlello ka ho sebelisa <nav>element kapa, ha o sebelisa ntho e tloaelehileng joalo ka <div>, eketsa a role="navigation"ho navbar e 'ngoe le e 'ngoe ho e supa ka ho hlaka e le sebaka sa bohlokoa bakeng sa basebelisi ba mahlale a thusang.
Hlahisa ntho ea hajoale ka ho sebelisa aria-current="page"leqephe la hajoale kapa aria-current="true"bakeng sa ntho ea hajoale ka sete.
E ncha ho v5.2.0: Navbar e ka ba le theme ka mefuta ea CSS e fetisetsoang ho sehlopha .navbarsa motheo. .navbar-lighte tlositsoe mosebetsing 'me .navbar-darke ngotsoe bocha ho hlakola mefuta e fapaneng ea CSS ho fapana le ho eketsa mefuta e meng.

Liphetho tsa animation tsa karolo ena li ipapisitse le prefers-reduced-motionpotso ea media. Sheba karolo e fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .

Litaba tse tšehelitsoeng

Li-Navbar li tla le ts'ehetso e kentsoeng bakeng sa likaroloana tse seng kae. Khetha ho tse latelang ha ho hlokahala:

.navbar-brandbakeng sa k'hamphani ea hau, sehlahisoa, kapa lebitso la projeke.
.navbar-navbakeng sa navigation ea bolelele bo felletseng le e bobebe (ho kenyeletsoa le ts'ehetso ea li-dropdown).
.navbar-togglerbakeng sa ho sebelisoa le plugin ea rona ea ho putlama le mekhoa e meng ea ho sesa .
Lisebelisoa tsa Flex le sebaka bakeng sa taolo le liketso tsa mofuta ofe kapa ofe.
.navbar-textbakeng sa ho kenya mongolo o otlolohileng bohareng.
.collapse.navbar-collapsebakeng sa ho hlophisa le ho pata litaba tsa navbar ka sebaka sa ho arohana le motsoali.
Eketsa boikhethelo .navbar-scrollho seta le ho tsamaisa max-heightlitaba tse atolositsoeng tsa navbar .

Mona ke mohlala oa likaroloana tsohle tse kenyellelitsoeng ho "navbar" e arabelang e nang le leseli e oelang sebakeng se lgseholo (se seholo).

html

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

Mohlala ona o sebelisa bokamorao ( bg-light) le sebaka ( me-auto, mb-2, mb-lg-0, me-2) litlelase tsa thuso.

Brand

E .navbar-brandka sebelisoa ho likarolo tse ngata, empa ankora e sebetsa hantle, kaha likarolo tse ling li ka hloka litlelase tsa ts'ebeliso kapa mekhoa e tloaelehileng.

Mongolo

Kenya mongolo oa hau ka har'a ntho e itseng le .navbar-brandsehlopha.

html

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

Setšoantšo

U ka fetola mongolo ka .navbar-brandhar'a <img>.

html

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

Setšoantšo le mongolo

U ka boela ua sebelisa lisebelisoa tse ling ho eketsa setšoantšo le mongolo ka nako e le 'ngoe. Ela hloko tlatsetso ea .d-inline-blockle .align-text-topho <img>.

html

<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

Lihokelo tsa Navbar navigation li theha holim'a .navlikhetho tsa rona ka sehlopha sa tsona sa ho fetola 'me li hloka tšebeliso ea litlelase tsa toggler bakeng sa setaele se arabelang hantle. Ho tsamaea ka har'a li-navbar le hona ho tla hola ho nka sebaka se otlolohileng ka hohle kamoo ho ka khonehang ho boloka litaba tsa hau tsa navbar li hokahane ka mokhoa o sireletsehileng.

Kenya .activesehlopha .nav-linkho bontša leqephe la hajoale.

Ka kopo hlokomela hore o tlameha ho eketsa aria-currenttšobotsi ho e sebetsang .nav-link.

html

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

Mme hobane re sebelisa litlelase bakeng sa li-navs tsa rona, o ka qoba mokhoa o thehiloeng lethathamong ka botlalo haeba o rata.

html

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

U ka sebelisa li-dropdown ho navbar ea hau. Manane a theoha a hloka karolo e phuthelang bakeng sa ho beha maemo, kahoo etsa bonnete ba hore o sebelisa likarolo tse arohaneng le tse behiloeng bakeng sa .nav-itemle .nav-linkjoalo ka ha ho bonts'itsoe ka tlase.

html

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

Mefuta

Beha mefuta e fapaneng ea taolo le likarolo ka har'a navbar:

html

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

Lintlha tsa hang-hang tsa ngoana tsa .navbartšebeliso ea sebopeho sa flex 'me li tla lula li le justify-content: space-between. Sebelisa lisebelisoa tse eketsehileng tsa flex ha ho hlokahala ho fetola mokhoa ona.

html

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

Lihlopha tsa ho kenya li sebetsa, le tsona. Haeba navbar ea hau e le mofuta o felletseng, kapa hangata e le foromo, o ka sebelisa <form>element e le setshelo mme o boloke HTML e itseng.

html

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

Likonopo tse fapaneng li tšehetsoa e le karolo ea mefuta ena ea navbar, hape. Hona hape ke khopotso e ntle ea hore lisebelisoa tsa tekano tse otlolohileng li ka sebelisoa ho hokahanya likarolo tse fapaneng tsa boholo.

html

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

Mongolo

Navbar e kanna ea ba le likaroloana tsa mongolo ka thuso ea .navbar-text. Sehlopha sena se lokisa tekano e otlolohileng le sebaka se otlolohileng bakeng sa likhoele tsa mongolo.

html

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

Kopanya le ho kopanya le lisebelisoa tse ling le lisebelisoa ha ho hlokahala.

html

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

Merero ea mebala

E ncha ho v5.2.0: Theme ea Navbar e se e tsamaisoa ke mefuta-futa ea CSS 'me .navbar-lighte tlositsoe. Mefuta e fapaneng ea CSS e sebelisoa ho .navbar, e sa fetoheng ho ponahalo ea "leseli", 'me e ka fetoloa ka .navbar-dark.

Lihlooho tsa Navbar li bonolo ho feta leha e le neng pele ka lebaka la motsoako oa Bootstrap oa mefuta e fapaneng ea Sass le CSS. Ntho ea kamehla ke "navbar" ea rona bakeng sa tšebeliso e nang le mebala e khanyang, empa o ka kenya kopo .navbar-darkbakeng sa mebala e lefifi. Ka mor'a moo, ikamahanya le .bg-*lisebelisoa.

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

Lijana

Le hoja e sa hlokehe, o ka phuthela navbar ka .containerho e beha bohareng ba leqephe-le hoja u hlokomela hore setshelo sa ka hare se ntse se hlokahala. Kapa o ka eketsa sets'oants'o ka har'a sebaka sa marang- rang .navbarho beha feela likahare tsa navbar e tsitsitseng kapa e tsitsitseng .

html

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

Sebelisa leha e le efe ea lijana tse arabelang ho fetola hore na litaba tse ka har'a navbar ea hau li hlahisoa ka bophara hakae.

html

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

Ho beha

Sebelisa lisebelisoa tsa rona tsa maemo ho beha li-navbar libakeng tse sa tsitsitseng. Khetha ho tloha ho tse tsitsitseng ho ea holimo, tse tsitsitseng ho ea tlaase, tse khomaretsoeng holimo (meqolo e nang le leqephe ho fihlela e fihla holimo, ebe e lula moo), kapa e khomarele ka tlaase (meqolo e nang le leqephe ho fihlela e fihla tlaase, ebe e lula Mono).

Li-navbar tse tsitsitseng li sebelisa position: fixed, ho bolelang hore li ntšitsoe tseleng e tloaelehileng ea DOM 'me li ka hloka CSS e tloaelehileng (mohlala, padding-topho <body>) ho thibela ho kopana le likarolo tse ling.

html

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

html

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

html

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

html

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

html

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

Ho tsamaisetsa

Eketsa .navbar-nav-scrollho .navbar-nav(kapa karolo e 'ngoe ea navbar) ho nolofalletsa ho phenya ho ea holimo ka har'a lintho tse ka fetolehang tsa navbar e sohlokehileng. Ka mokhoa o ikhethileng, ho tsamaisetsa ho qala ho 75vh(kapa 75% ea bophahamo ba pono), empa u ka e tlola ka thepa ea lehae ea CSS --bs-navbar-heightkapa mekhoa e tloahelehileng. Libakeng tse kholoanyane tsa pono ha navbar e atolosoa, litaba li tla hlaha joalo ka ha li hlaha ho navbar ea kamehla.

Ka kopo hlokomela hore boits'oaro bona bo tla le khaello e ka bang teng ea overflow-ha ho beoa overflow-y: auto(ho hlokahala ho tsamaisa litaba mona), overflow-xke ntho e lekanang le auto, e tla hlahisa litaba tse tšekaletseng.

Mohlala ke ona navbar e sebelisang .navbar-nav-scrollle style="--bs-scroll-height: 100px;", e nang le lisebelisoa tse ling tsa marang-rang bakeng sa sebaka se nepahetseng.

html

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

Boitšoaro ba ho arabela

Li-Navbar li ka sebelisa .navbar-toggler, .navbar-collapse, le .navbar-expand{-sm|-md|-lg|-xl|-xxl}litlelase ho fumana hore na litaba tsa tsona li putlama ka mor'a konopo. Hammoho le lits'ebeletso tse ling, o ka khetha habonolo nako ea ho bonts'a kapa ho pata likarolo tse itseng.

Bakeng sa li-navbar tse sa keng tsa putlama, kenya .navbar-expandsehlopha ho navbar. Bakeng sa li-navbar tse lulang li putlama, u se ke oa kenya sehlopha sefe kapa sefe .navbar-expand.

Toggler

Li-togglers tsa Navbar li hokahantsoe ka ho le letšehali, empa ha li ka latela ntho ea ngoan'eno joalo ka .navbar-brand, li tla ikamahanya le hole ka ho le letona. Ho khutlisa markup ea hau ho tla khutlisa sebaka sa toggler. Ka tlase ke mehlala ea mefuta e fapaneng ea toggle.

Ha ho .navbar-brandboletsoe sebakeng se senyenyane sa breakpoint:

html

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

Ka lebitso la lebitso le hlahang ka ho le letšehali le toggler ka ho le letona:

html

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

Ka toggler ka ho le letšehali le lebitso la lebitso ka ho le letona:

html

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

Litaba tsa kantle

Ka nako e 'ngoe u batla ho sebelisa plugin ea ho putlama ho qala karolo ea setshelo bakeng sa litaba tse lutseng ka ntle ho .navbar. Hobane plugin ea rona e sebetsa ' idme data-bs-targete bapisa, seo se etsoa habonolo!

Litaba tse koetsoeng

E ka fetoha ka mofuta oa navbar.

html

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

Ha o etsa sena, re khothaletsa ho kenyelletsa JavaScript e 'ngoe ho tsamaisa tsepamiso ka mokhoa oa lenaneo ho sets'oants'o ha se buloa. Ho seng joalo, basebelisi ba keyboard le basebelisi ba mahlale a thusang ba tla thatafalloa ke ho fumana litaba tse sa tsoa senoloa - haholo-holo haeba sets'oants'o se neng se butsoe se tla ka pel'a mofetoleli sebopehong sa tokomane. Hape re khothaletsa ho etsa bonnete ba hore toggler e na le aria-controlstšobotsi, e supang idsetshelo sa litaba. Ka khopolo, sena se lumella basebelisi ba mahlale a thusang ho tlola ka kotloloho ho tloha ho toggler ho ea sets'oants'o seo e se laolang-empa ts'ehetso ea sena hajoale e thata haholo.

Offcanvas

Fetolela navbar ea hau e ntseng e hola le e putlamang hore e be lae ea offcanvas e nang le karolo ea offcanvas . Re holisa mekhoa ea kamehla ea offcanvas mme re sebelisa .navbar-expand-*litlelase tsa rona ho theha sebaka se ka thoko sa ho sesa se feto-fetohang.

Mohlaleng o ka tlase, ho theha navbar ea offcanvas e lulang e putlame libakeng tsohle tsa phomolo, tlohela .navbar-expand-*sehlopha ka botlalo.

html

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

Ho theha navbar ea offcanvas e atolohang ho navbar e tloaelehileng sebakeng se ikhethileng joalo ka lg, sebelisa .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>

Ha u sebelisa offcanvas sebakeng se lefifi sa navbar, ela hloko hore u kanna ua hloka ho ba le bokamorao bo lefifi ho litaba tsa offcanvas ho qoba hore mongolo o se balehe. Mohlaleng o ka tlase, re eketsa .navbar-darkle .bg-darkho .navbar, .text-bg-darkho .offcanvas, .dropdown-menu-darkho .dropdown-menu, le .btn-close-whitebakeng .btn-closesa setaele se nepahetseng ka lesela le lefifi la offcanvas.

html

<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

Lintho tse fapaneng

E kentsoe ho v5.2.0

E le karolo ea mokhoa oa ho fetoha oa CSS oa Bootstrap, li-navbars joale li sebelisa mefuta-futa ea CSS ea lehae .navbarbakeng sa ho ntlafatsa nako ea sebele. Litekanyetso tsa mefuta-futa ea CSS li behiloe ka Sass, kahoo mokhoa oa Sass o ntse o tšehetsoa, le oona.

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

Likarolo tse ling tse eketsehileng tsa CSS li teng hape ho .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);

Ho itloaetsa ka mefuta e fapaneng ea CSS ho ka bonoa .navbar-darksehlopheng moo re fetisang litekanyetso tse ikhethileng ntle le ho kenyelletsa likhetho tse peli tsa CSS.

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

Mefuta e fapaneng ea Sass

Liphetoho bakeng sa li-navbar tsohle:

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

Liphetoho bakeng sa navbar e lefifi :

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

Litlelase tse arabelang tsa ho atolosa/ho putlama (mohlala, .navbar-expand-lg) li kopantsoe le ' $breakpointsmapa 'me li hlahisoa ka loop ho 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;
          }
        }
      }
    }
  }
}