in English

Navbar

Ditokomane le mehlala ya hlogo ya go sepelasepela ye maatla, ye e arabelago ya Bootstrap, navbar. E akaretša thekgo ya go swaya, go sepelasepela, le tše dingwe, go akaretšwa thekgo ya plugin ya rena ya go phuhlama.

Letlakaleng le

Kamoo e šomago ka gona

Se o swanetšego go se tseba pele o thoma ka navbar ke se:

Navbars hloka e phuthela .navbarle .navbar-expand{-sm|-md|-lg|-xl|-xxl}bakeng sa arabela phuhlama le mebala sekema dihlopha.
Di-navbar le dikagare tša tšona di a seela ka go ikemela. Fetoša setshelo go lekanyetša bophara bja tšona bjo bo rapaletšego ka ditsela tše di fapanego.
Šomiša diklase tša rena tša sekgoba le tša go koba tša mohola bakeng sa go laola sekgoba le go logaganya ka gare ga di-navbar.
Di-navbar di arabela ka go ikemela, eupša o ka di fetoša gabonolo go fetoša seo. Boitshwaro bja go arabela bo ithekgile ka plugin ya rena ya Collapse JavaScript.
Netefatša phihlelelo ka go šomiša <nav>elemente goba, ge o šomiša elemente ya kakaretšo kudu go swana le a <div>, oketša a role="navigation"go navbar ye nngwe le ye nngwe go e hlaola ka go lebanya bjalo ka selete sa leswao la naga go badiriši ba theknolotši ya go thuša.
Bontšha selo sa bjale ka go šomiša aria-current="page"bakeng sa letlakala la bjale goba aria-current="true"bakeng sa selo sa bjale ka seteng.

Phello ya dipopaye ya karolo ye e ithekgile ka prefers-reduced-motionpotšišo ya methopo ya ditaba. Bona karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .

Diteng tše di thekgwago

Di-navbar di tla le thekgo yeo e agetšwego ka gare bakeng sa dikarolo tše sego kae tše dinyenyane. Kgetha go tše di latelago ge go nyakega:

.navbar-brandbakeng sa khamphani ya gago, setšweletšwa, goba leina la projeke.
.navbar-navbakeng sa go sepelasepela ga bophagamo bjo bo tletšego le bjo bo bobebe (go akaretša le thekgo ya dilo tšeo di theogago).
.navbar-togglerbakeng sa go dirišwa le plugin ya rena ya go phuhlama le maitshwaro a mangwe a go fetoša go sepelasepela .
Flex le spacing utilities bakeng sa leha e le efe foromo taolo le liketso.
.navbar-textbakeng sa go oketša dithapo tša sengwalwa tšeo di tsepamego thwii.
.collapse.navbar-collapsebakeng sa go hlopha le go uta dikagare tša navbar ka ntlha ya go kgaotša ya motswadi.
Oketša kgetho .navbar-scrollgo beakanya max-heightle go sepelasepela diteng tša navbar ye e katološitšwego .

Mona ke mohlala wa dikarolo ka moka tše nnyane tšeo di akareditšwego ka go navbar ya go arabela ya sehlogo sa seetša yeo e phuhlamago ka go iketla ntlheng ya go lgkgaotša (ye kgolo).

<nav class="navbar navbar-expand-lg navbar-light 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="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <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">
        <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 wo o šomiša diklase tša mohola tša bokamorago ( bg-light) le sekgoba ( my-2, my-lg-0, me-sm-0, ).my-sm-0

Leswao

The .navbar-brande ka dirišwa go bontši bja dielemente, eupša ankora e šoma gabotse, ka ge dielemente tše dingwe di ka nyaka diklase tša mohola goba mekgwa ya tlwaelo.

Sengwalwa

Oketša sengwalwa sa gago ka gare ga elemente ka .navbar-brandklase.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

Seswantšho

O ka tšeela sengwalwa legato ka gare .navbar-brandga <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    </a>
  </div>
</nav>

Seswantšho le sengwalwa

O ka dira gape tšhomišo ya didirišwa tše dingwe tša tlaleletšo go oketša seswantšho le sengwalwa ka nako e tee. Hlokomela tlaleletšo ya .d-inline-blockle .align-text-topgodimo ga <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Nav

Dikgokagano tša go sepelasepela tša Navbar di aga godimo ga .navdikgetho tša rena ka sehlopha sa bona sa sefetoši gomme di nyaka tšhomišo ya diklase tša toggler bakeng sa setaele sa go arabela gabotse. Go sepelasepela ka go di-navbar le gona go tla gola go tšea sekgoba se segolo sa go rapalala ka mo go kgonegago go boloka dikagare tša gago tša navbar di logagane ka polokego.

Oketša .activeklase godimo .nav-linkgo laetša letlakala la bjale.

Hle ela hloko gore o swanetše go oketša gape aria-currentseka go active .nav-link.

<nav class="navbar navbar-expand-lg navbar-light 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>

Gomme ka ge re šomiša diklase bakeng sa di-nav tša rena, o ka efoga mokgwa wo o theilwego lenaneong ka mo go feletšego ge e ba o rata.

<nav class="navbar navbar-expand-lg navbar-light 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>

O ka šomiša gape le dithepo tša go theoga ka go navbar ya gago. Dimenu tša go theoga di nyaka elemente ya go phuthela bakeng sa go beakanya, ka fao kgonthiša gore o šomiša dielemente tše di aroganego le tše di tsentšwego ka gare bakeng sa .nav-itemle .nav-linkbjalo ka ge go bontšhitšwe ka mo tlase.

<nav class="navbar navbar-expand-lg navbar-light 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="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <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>

Diforomo

Bea ditaolo tša foromo tše di fapafapanego le dikarolo ka gare ga navbar:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <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>

Dielemente tša ngwana tša ka pela tša .navbartšhomišo di flex peakanyo gomme di tla default go justify-content: space-between. Diriša didirišwa tša tlaleletšo tša go koba ge go nyakega go beakanya boitshwaro bjo.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <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>

Dihlopha tša tsenyo di a šoma, le tšona. Ge e le gore navbar ya gago ke foromo ka moka, goba bontši bja foromo, o ka šomiša <form>elemente bjalo ka setshelo gomme wa boloka HTML ye nngwe.

<nav class="navbar navbar-light 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>

Dikonope tše di fapafapanego di thekgwa bjalo ka karolo ya diforomo tše tša navbar, le tšona. Ye gape ke kgopotšo ye kgolo ya gore didirišwa tša go logaganya thwii di ka šomišwa go logaganya dielemente tša bogolo bjo bo fapanego.

<nav class="navbar navbar-light 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>

Sengwalwa

Di-navbar di ka ba le diripana tša sengwalwa ka thušo ya .navbar-text. Sehlopha se se beakanya go logaganya go ema le sekgoba sa go rapalala sa dithapo tša sengwalwa.

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

Kopanya le go nyalelanya le dikarolo tše dingwe le didirišwa ge go nyakega.

<nav class="navbar navbar-expand-lg navbar-light 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>

Dikema tša mebala

Theming ya navbar ga se ya ka ya ba bonolo ka lebaka la motswako wa dihlopha tša theming le background-colordidirišwa. Kgetha go tšwa go .navbar-lightgo šomiša le mebala ya morago ye bofefo, goba .navbar-darkya mebala ya morago ye lefsifsi. Ka morago ga moo, tlwaetša ka .bg-*didirišwa.

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

Ditshelo

Le ge e le gore ga e nyakege, o ka phuthela navbar ka go a .containergo e bogareng letlakaleng–le ge e le gore ela hloko gore setshelo sa ka gare se sa nyakega. Goba o ka oketša setshelo ka gare ga .navbargo bogareng fela dikagare tša navbar ya godimo ye e sa fetogego goba ye e sa fetogego .

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

Šomiša efe goba efe ya ditshelo tše di arabelago go fetoša gore diteng ka go navbar ya gago di tšweletšwa ka bophara gakaakang.

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

Go bewa ga dilo

Diriša didirišwa tša rena tša maemo go bea di-navbar maemong ao e sego a go se fetoge. Kgetha go tšwa go tše di tsepamego go ya godimo, tše di tsepamego go ya fase, goba tše di kgomaretšego godimo (o phutholla ka letlakala go fihlela le fihla godimo, ke moka o dula moo). Fixed navbars use position: fixed, ho bolela hore ba hula ho tloha phallo e tloaelehileng ea DOM le ka 'na hloka tloaelo CSS (mohlala, padding-topka <body>) ho thibela overlap le elements tse ling.

Gape ela hloko gore .sticky-tope šomiša position: sticky, yeo e sa thekgwego ka botlalo go sephephediši se sengwe le se sengwe .

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

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

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

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

Go kgokološa

Oketša .navbar-nav-scrollgo .navbar-nav(goba karolo ye nngwe ya ka fasana ya navbar) go kgontšha go sepelasepela go ema thwii ka gare ga dikagare tše di fetošwago tša navbar ye e phuhlamego. Ka go ikemela, go kgokološa go a tsena ka 75vh(goba 75% ya bophagamo bja lefelo la go lebelela), eupša o ka tloša seo ka thepa ya tlwaelo ya CSS ya selegae --bs-navbar-heightgoba mekgwa ya tlwaelo. Ka dipono tše kgolo ge navbar e katološwa, diteng di tla tšwelela bjalo ka ge di dira ka go navbar ya go se fetoge.

Hle ela hloko gore boitshwaro bjo bo tla le bofokodi bjo bo ka bago gona bja overflow—ge go beakanya overflow-y: auto(go nyakega go kgokološa diteng mo), overflow-xe lekana le auto, yeo e tlago go bjala diteng tše dingwe tše di rapaletšego.

Mona ke mohlala navbar sebelisa .navbar-nav-scrollle style="--bs-scroll-height: 100px;", le ba bang ba eketsehileng margin utilities bakeng sa Optimum spacing.

<nav class="navbar navbar-expand-lg navbar-light 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="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <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 me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Maitshwaro a go arabela

Di-navbar di ka šomiša .navbar-toggler, .navbar-collapse, le .navbar-expand{-sm|-md|-lg|-xl|-xxl}diklase go bona gore diteng tša tšona di phuhlama neng ka morago ga konope. Ka kopanyo le didirišwa tše dingwe, o ka kgetha gabonolo gore o tla bontšha neng goba wa uta dielemente tše itšego.

Bakeng sa di-navbar tšeo di sa kego tša phuhlama, oketša .navbar-expandsehlopha go navbar. Bakeng sa di-navbar tšeo di dulago di phuhlama, o se ke wa oketša .navbar-expandsehlopha sefe goba sefe.

Sefetoledi sa go fetola

Di-toggler tša Navbar di logagantšwe ka go le letshadi ka go ikemela, eupša ge e ba di swanetše go latela elemente ya ngwanešo go swana le .navbar-brand, di tla logagantšwe ka go iketla go ya go le letona kudu. Go bušetša morago markup ya gago go tla bušetša morago go bewa ga toggler. Ka tlase ke mehlala ya mekgwa e fapaneng ya toggle.

Ka go se .navbar-brandbontšhitšwe ka breakpoint ye nnyane kudu:

<nav class="navbar navbar-expand-lg navbar-light 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">
        <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 leina la leina le le bontšhitšwego ka go le letshadi le toggler ka go le letona:

<nav class="navbar navbar-expand-lg navbar-light 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">
        <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 go le letshadi le leina la leina ka go le letona:

<nav class="navbar navbar-expand-lg navbar-light 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">
        <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>

Diteng tša ka ntle

Ka nako ye nngwe o nyaka go šomiša polaka ya go phuhlama go hlohleletša elemente ya setshelo sa diteng tšeo ka sebopego di dulago ka ntle ga .navbar. Ka lebaka la gore plugin ya rena e šoma go idle data-bs-targetgo swana, seo se dirwa gabonolo!

Collapsed content

Toggleable via the navbar brand.

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

Ge o dira se, re kgothaletša go akaretša JavaScript ya tlaleletšo go šuthiša nepo ka lenaneo go setshelo ge se bulwa. Go sego bjalo, badiriši ba khiiboto le badiriši ba theknolotši ya go thuša go na le kgonagalo ya gore ba tla ba le nako ye thata ya go hwetša diteng tšeo di sa tšwago go utollwa - kudukudu ge e le gore setshelo seo se butšwego se tla pele ga toggler ka sebopegong sa tokumente. Re kgothaletša gape go kgonthiša gore toggler e na le aria-controlsseka, e šupa go idya setshelo sa diteng. Ka kgopolo, se se dumelela badiriši ba theknolotši ya go thuša go tlola ka go lebanya go tšwa go toggler go ya go setshelo seo se se laolago–eupša thekgo ya se ga bjale e tloga e le patchy.

Ka ntle ga lešela

Fetoša navbar ya gago ya go atološa le go phuhlama go ba laeborari ya offcanvas ka plugin ya offcanvas. Re katološa bobedi mekgwa ya go se fetoge ya offcanvas gomme re šomiša .navbar-expand-*diklase tša rena go hlama bara ya ka thoko ya go sepelasepela ye e fetogago le ye e fetofetogago.

Mohlaleng wo o lego ka mo tlase, go hlama navbar ya offcanvas yeo e dulago e phuhlama go ralala le dintlha ka moka tša go kgaotša, tlogela .navbar-expand-*sehlopha ka botlalo.

<nav class="navbar navbar-light 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 text-reset" 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="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <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">
          <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>

Go hlama navbar ya offcanvas yeo e katološago go navbar ya tlwaelo ka ntlha ye e itšego ya go kgaotša go swana le lg, šomiša .navbar-expand-lg.

<nav class="navbar navbar-light 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>

Sass

Diphetogo

$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-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-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;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

Segole

Diklase tša go atološa/go phuhlama tša navbar tše di arabelago (mohlala, .navbar-expand-lg) di kopanywa le $breakpointsmmapa gomme tša tšweletšwa ka seloupu ka go 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: $navbar-nav-link-padding-x;
            padding-left: $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-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

        .offcanvas-body {
          display: flex;
          flex-grow: 0;
          padding: 0;
          overflow-y: visible;
        }
      }
    }
  }
}