in English

Navbar

Dukumeenti iyo tusaalooyin loogu talagalay Bootstrap's awood badan, madax-wareejin ka jawaabaya, navbar. Waxaa ku jira taageerada summeynta, hagidda, iyo wax ka badan, oo ay ku jirto taageerada pluginkeenna burburka.

Boggan

Sida ay u shaqeyso

Waa kuwan waxa aad u baahan tahay inaad ogaato ka hor intaadan bilaabin navbar:

Navbars-ku waxay u baahan yihiin in lagu duubo burburka jawaaba .navbarleh .navbar-expand{-sm|-md|-lg|-xl|-xxl}iyo fasallada nidaamka midabka .
Navbars iyo waxa ku jira waa dareere ahaan. U beddel weelka si aad u xaddiddo ballacooda jiifka ah siyaabo kala duwan.
U isticmaal kala dheeraynta iyo fasallada utility-ga dabacsan si aad u xakamayso kala dheeraynta iyo toosinta navbars gudahooda.
Navbars si toos ah ayey uga jawaabaan, laakiin si fudud ayaad u beddeli kartaa si aad taas u beddesho. Dabeecada jawaab celinta waxay ku xiran tahay Burburinta JavaScript plugin.
Hubi gelitaanka adigoo isticmaalaya shay <nav>ama, haddii la isticmaalayo curiye ka badan sida a <div>, ku dar role="navigation"navbar kasta si aad si cad ugu aqoonsato inuu yahay gobol calaamad u ah isticmaalayaasha tignoolajiyada caawinta.
Tilmaan shayga hadda jira adiga oo aria-current="page"u isticmaalaya bogga hadda jira ama aria-current="true"shayga hadda jira ee ku jira set.
Ku cusub v5.2.0: Navbars waxa lagu dul-duleeli karaa doorsoomayaasha CSS kuwaas oo loo eegayo .navbarheerka hoose. .navbar-lightwaa la jabiyay oo .navbar-darkdib ayaa loo qoray si loo tirtiro doorsoomayaasha CSS halkii lagu dari lahaa qaabab dheeraad ah.

Saamaynta animation ee qaybtani waxay ku xidhan tahay prefers-reduced-motionwaydiinta warbaahinta. Eeg qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .

Waxyaabaha la taageeray

Navbars waxay la yimaadaan taageero ku dhisan qayb yar oo ka kooban qaybo hoose. Ka dooro kuwa soo socda haddii loo baahdo:

.navbar-brandee shirkaddaada, alaabtaada, ama magaca mashruuca.
.navbar-navloogu talagalay socodka dhererka buuxa iyo fududaanta (ay ku jirto taageerada hoos u dhaca).
.navbar-togglersi loogu isticmaalo pluginkeena burburay iyo dabeecadaha kale ee leexinta .
Flex iyo kala dheeraynta utility ee nooc kasta oo kontaroolada iyo falalka.
.navbar-textsi loogu daro xardho qoraal ah oo toosan.
.collapse.navbar-collapsekooxaynta iyo qarinta waxa ku jira navbar barta waalidka.
Ku dar ikhtiyaari .navbar-scrollsi aad u dejiso oo u max-heightrog macluumaadka navbar balaariyay .

Waa kuwan tusaale dhammaan qaybaha-hoosaadka ee lagu daray navbar-fudud iftiin leh oo si toos ah ugu dunta meesha lg(weyn).

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>

Tusaalahani waxa uu isticmaalayaa asalka ( bg-light) iyo kala dheeraynta ( me-auto, mb-2, mb-lg-0) me-2fasalada utility.

Summada

Midda .navbar-brandwaxaa lagu dabaqi karaa inta badan walxaha, laakiin barroosintu si fiican ayey u shaqeysaa, maadaama walxaha qaar ay u baahan karaan fasalo utility ama qaabab gaar ah.

Qoraal

Ku dar qoraalkaaga cutub ka mid ah .navbar-brandfasalka.

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>

Sawirka

Waxaad ku bedeli kartaa qoraalka .navbar-brandgudaha <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>

Sawirka iyo qoraalka

Waxa kale oo aad isticmaali kartaa adeegyo dheeraad ah si aad ugu darto sawir iyo qoraal isku mar. U fiirso ku-darka .d-inline-blockiyo .align-text-topdusha <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

Isku xirka navbar navigation waxay ku dhismaan .navikhtiyaarkayaga fasalkooda wax ka beddelka waxayna u baahan yihiin isticmaalka fasallada toggler si habayn habboon looga jawaabo. Navigation in navbars ayaa sidoo kale kori doona si ay u qabsadaan inta badan oo bannaan oo siman inta suurtogalka ah si aad u ilaaliso waxa ku jira navbar si ammaan ah.

Ku dar .activefasalka .nav-linksi aad u muujiso bogga hadda jira.

Fadlan ogow inaad sidoo kale ku darto aria-currentsifada firfircoonida .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>

Iyo sababta oo ah waxaan u isticmaalnaa xiisadaha maraakiibtayada, waxaad ka fogaan kartaa habka liiska ku saleysan gabi ahaanba haddii aad rabto.

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>

Waxa kale oo aad isticmaali kartaa hoos-u-dhacyada navbar-kaaga. Liiska hoos-u-dhaca waxay u baahan yihiin cunsur wax lagu duubo meelaynta, markaa hubso inaad isticmaasho walxo gaar ah oo buul leh .nav-itemiyo .nav-linksida hoos ku cad.

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>

Foomamka

Dhig kontaroolo kala duwan iyo qaybo kala duwan gudaha 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>

Cunsurada ilmaha ee degdega ah ee .navbaristicmaalka qaabaynta dabacsanaanta waxayna ku dhici doontaa justify-content: space-between. Isticmaal qalab dabacsan oo dheeri ah markaad u baahan tahay si aad u hagaajiso dhaqankan.

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>

Kooxaha wax gelinta ayaa sidoo kale shaqeeya. Haddii navbaragu uu yahay foom dhan, ama badi foom, waxaad isticmaali kartaa <form>curiyaha weel ahaan oo waxaad kaydin kartaa HTML.

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>

Badhamada kala duwan ayaa sidoo kale lagu taageeraa qayb ka mid ah foomamka navbar-kan. Tani waxay sidoo kale xusuusin weyn u tahay in utility-ka toosan ee toosan loo isticmaali karo in lagu toosiyo walxaha kala duwan.

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>

Qoraal

Navbars waxaa laga yaabaa inay ku jiraan qaybo qoraal ah iyadoo la kaashanayo .navbar-text. Fasalkani wuxuu hagaajiyaa toosinta toosan iyo kala dheeraynta toosan ee xargaha qoraalka.

html

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

Ku qas oo ku dhig qaybaha kale iyo adeegyada sida loo baahdo.

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>

Nidaamyada midabka

Ku cusub v5.2.0: Mawduuca Navbar hadda waxa ku shaqeeya doorsoomayaasha CSS oo .navbar-lightwaa laga saaray. Doorsoomayaasha CSS waxa lagu dabaqaa .navbar, iyaga oo u janjeedha muuqaalka "iftiin", waxaana lagaga gudbi karaa .navbar-dark.

Mawduucyada Navbar way ka sahlan yihiin weligood iyadoo ay ugu wacan tahay Bootstrap isku darka doorsoomayaasha Sass iyo CSS. Asal ahaan waa "navbar iftiin" si loogu isticmaalo midabada asalka iftiinka, laakiin sidoo kale waxaad codsan kartaa .navbar-darkmidabada asalka madow. Ka dib, ku beddel .bg-*adeegyada.

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

Konteenarada

Inkasta oo aan loo baahnayn, waxaad ku duubi kartaa navbar a .containersi aad u dhex dhigto bogga -in kasta oo la soco in weel gudaha ah weli loo baahan yahay. Ama waxaad ku dari kartaa weel gudaha gudaha ah .navbaroo kaliya dhexda ugu jira waxa ku jira navbar sare oo go'an ama taagan .

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>

Isticmaal mid ka mid ah weelasha ka jawaaba si aad u bedesho inta ay le'eg tahay waxa ku jira navbarkaaga la soo bandhigay.

html

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

Meelaynta

Adeegso utility booskayaga si aad u dhigto navbars boosaska aan joogsiga lahayn. Ka dooro mid go'an ilaa sare, ku dheggan xagga hoose, ku dheggan xagga sare (ku duub bogga ilaa uu ka gaadhayo xagga sare, ka dibna halkaa ku sii jiraya), ama ku dheggan xagga hoose (lagu duub bogga ilaa uu ka gaadhayo xagga hoose, ka dibna sii joogaya). halkaas).

Navbars go'an ayaa adeegsada position: fixed, taasoo la macno ah in laga soo jiiday socodka caadiga ah ee DOM waxaana laga yaabaa inay u baahdaan CSS caado ah (tusaale, padding-topon the <body>) si looga hortago isku dhafka walxaha kale.

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>

Duubista

.navbar-nav-scrollKu dar .navbar-nav(ama qayb-hoosaadka navbar kale) si aad awood ugu yeelatid rogid toosan gudaha waxa ku jira beddelka navbar burburay. Sida caadiga ah, 75vhrog-rogiddu waxay ku bilaabataa (ama 75% ee dhererka muuqaalka), laakiin waxaad taas kaga takhalusi kartaa hantida CSS ee deegaanka --bs-navbar-heightama qaababka caadiga ah. Goobaha waaweyn ee daawashada marka navbar la balaadhiyo, waxa ku jira waxa ay ka soo muuqan doonaan sida navbar caadiga ah.

Fadlan ogow in hab-dhaqankani uu la yimaado dib-u-dhac suurtagal ah oo ah — overflowmarka dejinta overflow-y: auto(loo baahan yahay in lagu rogo waxa ku jira halkan), overflow-xwaxa ay u dhigantaa auto, kaas oo goosan doona qayb toosan.

Waa kuwan tusaale navbar la isticmaalayo .navbar-nav-scroll, style="--bs-scroll-height: 100px;"oo wata qaar ka mid ah utility margin dheeraad ah ee kala dheeraynta ugu wanaagsan.

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>

Dabeecadaha ka jawaaba

Navbars waxay isticmaali karaan .navbar-toggler, .navbar-collapse, iyo .navbar-expand{-sm|-md|-lg|-xl|-xxl}fasallo si ay u go'aamiyaan marka nuxurkoodu ku dumo badhan gadaashiisa. Marka lagu daro tas-hiilaadka kale, waxaad si fudud u dooran kartaa marka aad muujinayso ama qarinayso waxyaabo gaar ah.

Navbars aan waligood dumin, ku dar .navbar-expandfasalka navbar-ka. Navbar-yada had iyo jeer burbura, ha ku darin wax .navbar-expandfasal ah.

Toggler

Togglers Navbar si toos ah ayay bidix u toosan yihiin, laakiin haddii ay raacaan walxaha walaalaha ah sida a .navbar-brand, waxay si toos ah ula toosi doonaan midigta fog. Dib u noqoshada calaamadayntaada waxay beddeli doontaa meelaynta toggler-ka. Hoos waxaa ah tusaalayaal qaababka beddelka ee kala duwan.

Iyadoo aan .navbar-brandlagu tusin meesha ugu yar:

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>

Leh magaca summada oo ka muuqda bidix iyo toggler dhanka midig:

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>

Ku-rogeeyaha bidix iyo magaca summada ee midig:

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>

Waxyaabaha dibadda

Mararka qaarkood waxaad rabtaa inaad isticmaasho plugin burburka si aad u kiciso curiyaha weelka ee nuxurka qaab ahaan u fadhiya meel ka baxsan .navbar. Sababtoo ah pluginkeena wuxuu ka shaqeeyaa isku id- data-bs-targetdhafka, taas si fudud ayaa loo sameeyaa!

Waxyaabaha burburay

Lagu beddeli karo astaanta 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>

Markaad tan sameyso, waxaan kugula talineynaa inaad ku darto JavaScript dheeraad ah si aad barnaamij ahaan diirada ugu wareejiso weelka marka la furo. Haddii kale, isticmaalayaasha kiiboodhka iyo isticmaalayaasha tignoolajiyada caawinta waxay u badan tahay inay ku adkaan doonto helista waxa cusub ee la daaha ka qaaday - gaar ahaan haddii weelka la furay uu ka hor yimaado beddelaha qaab dhismeedka dukumeentiga. Waxaan sidoo kale ku talinaynaa in la hubiyo in toggler-ku uu leeyahay sifada aria-controls, iyadoo tilmaamaysa idweelka ka kooban yahay. Aragti ahaan, tani waxay u oggolaanaysaa isticmaalayaasha tignoolajiyada caawinta inay si toos ah uga boodaan toggler-ka oo ay u gudbaan weelka ay gacanta ku hayso-laakin taageerada tani hadda aad bay u yar tahay.

Offcanvas

U beddel balaadhintaada iyo burburka navbarkaaga oo u beddel khaanad-offcanvas oo leh qaybta offcanvas . Waanu kordhinayna qaababka caadiga ah ee offcanvas waxaanan isticmaalnaa .navbar-expand-*fasaladayada si aan u abuurno bar dhinac socod oo firfircoon oo dabacsan.

Tusaalaha hoose, si aad u abuurto navbar-ka-baxsan oo had iyo jeer ku dunsan dhammaan meelaha jaban, ka dhaaf .navbar-expand-*fasalka gabi ahaanba.

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>

Si aad u abuurto navbar offcanvas ah oo ku fidaysa navbar caadiga ah meel gaar ah sida lg, isticmaal .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>

Markaad isticmaalayso offcanvas gudaha navbar mugdi ah, la soco in laga yaabo inaad u baahato inaad asal madow ku yeelato nuxurka offcanvas si aad uga fogaato in qoraalku noqdo mid aan la akhrin karin. Tusaalaha hoose, waxaanu ku darnaa .navbar-darkoo .bg-darkku dhejinaynaa .navbar, .text-bg-darkku .offcanvas, .dropdown-menu-darkku .dropdown-menu, iyo habaynta .btn-close-whitehabboon .btn-closeee madmadow.

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

Kala duwanaansho

Lagu daray v5.2.0

Iyada oo qayb ka ah habka isbeddelaya ee Bootstrap ee CSS, navbar-yadu hadda waxay isticmaalaan doorsoomayaasha CSS-ga maxalliga ah .navbarsi loo horumariyo habaynta waqtiga-dhabta ah. Qiimaha doorsoomayaasha CSS waxa lagu dejiyay Sass, sidaa darteed habaynta Sass wali waa la taageerayaa, sidoo kale.

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

Qaar ka mid ah doorsoomayaal CSS oo dheeraad ah ayaa sidoo kale ku jira .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);

Isbeddelka iyada oo loo marayo doorsoomayaasha CSS ayaa laga arki karaa .navbar-darkfasalka halkaas oo aan ka saarno qiyamka gaarka ah iyada oo aan lagu darin xulashooyin CSS nuqul ah.

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

Doorsoomayaasha Sass

Kala duwanaanshaha dhammaan navbars:

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

Kala duwanaanshaha navbar mugdiga ah :

$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

Fasallada fidinta/burburinta navbar ka jawaaba (tusaale, .navbar-expand-lg) ayaa lagu daray $breakpointskhariidadda waxaana laga soo saaray wareegga 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;
          }
        }
      }
    }
  }
}