Navbar

Documentation sy ohatra ho an'ny lohatenin'ny fitetezana mahery vaika an'i Bootstrap, ny navbar. Ahitana fanohanana ho an'ny marika, fitetezana, sy ny maro hafa, ao anatin'izany ny fanohanana ny plugin rava.

Amin'ity pejy ity

Ahoana ny fiasan'izany

Ity ny zavatra tokony ho fantatrao alohan'ny hanombohan'ny navbar:

Ny Navbars dia mila famonosana .navbarmiaraka .navbar-expand{-sm|-md|-lg|-xl|-xxl}amin'ny kilasin'ny firodanan'ny fandokoana sy loko .
Ny Navbars sy ny ao anatiny dia tsy misy dikany amin'ny alàlan'ny default. Hanova ny fitoeran -javatra mba hamerana ny sakan'ny marindrano amin'ny fomba samihafa.
Ampiasao ny kilasin'ny fampandehanana elanelana sy flex mba hifehezana ny elanelana sy ny fampifanarahana ao anatin'ny navbars.
Ny Navbars dia mamaly amin'ny alàlan'ny default, saingy azonao atao ny manova azy ireo mora foana hanovana izany. Miankina amin'ny plugin Collapse JavaScript ny fitondran-tena mamaly.
Ataovy azo antoka ny fidirana amin'ny alàlan'ny fampiasana <nav>singa iray na, raha mampiasa singa mahazatra kokoa toy ny <div>, ampio a role="navigation"isaky ny navbar mba hamantarana azy mazava ho faritra manan-tantara ho an'ny mpampiasa ny teknolojia fanampiana.
Tondroy ny singa amin'izao fotoana izao amin'ny alàlan'ny fampiasana aria-current="page"ho an'ny pejy ankehitriny na aria-current="true"ho an'ny singa ankehitriny ao anaty andiana.
Vaovao amin'ny v5.2.0: Ny Navbars dia azo atao lohahevitra miaraka amin'ny fari-piainan'ny CSS izay miompana amin'ny .navbarkilasy fototra. .navbar-lightdia nolavina ary .navbar-darknaverina nosoratana mba hanilihana ny fari-piainan'ny CSS fa tsy hanampiana fomba fanampiny.

Miankina amin'ny prefers-reduced-motionfangatahan'ny haino aman-jery ny fiantraikan'ity singa ity. Jereo ny fizarana mihetsika mihena amin'ny antontan-taratasinay momba ny fahafahana miditra .

Votoaty tohanana

Ny Navbars dia miaraka amin'ny fanohanana naorina ho an'ny singa kely vitsivitsy. Mifidiana amin'ireto manaraka ireto raha ilaina:

.navbar-brandho an'ny orinasanao, vokatra, na anaran'ny tetikasa.
.navbar-navho an'ny fitetezana avo lenta sy maivana (anisan'izany ny fanohanana ny fidina).
.navbar-togglerho ampiasaina miaraka amin'ny plugin fandrotsahana sy ny fitondran-tena mandika ny fitetezana hafa .
Flex sy spacing utility ho an'ny fanaraha-maso sy hetsika rehetra.
.navbar-textmba hanampiana tady mitsangana afovoany lahatsoratra.
.collapse.navbar-collapseho an'ny fanakambanana sy fanafenana ny votoatin'ny navbar amin'ny alàlan'ny fisarahan'ny ray aman-dreny.
Manampia safidy .navbar-scrollhametrahana max-heightsy hanoratanao atiny navbar nitarina .

Ity misy ohatra iray amin'ireo zana-singa rehetra tafiditra ao amin'ny navbar misy lohahevitra maivana izay mirodana ho azy eo amin'ny teboka lg(lehibe).

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>

Ity ohatra ity dia mampiasa kilasy fampiasa fototra ( bg-light) sy elanelana ( me-auto, mb-2, mb-lg-0, me-2).

Marika

Azo .navbar-brandampiharina amin'ny ankamaroan'ny singa, fa ny vatofantsika dia miasa tsara indrindra, satria ny singa sasany dia mety mitaky kilasy fampiasa na fomba fanao mahazatra.

Text

Ampio ny lahatsoratrao ao anatin'ny singa iray miaraka amin'ny .navbar-brandkilasy.

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>

SARY

Azonao atao ny manolo ny lahatsoratra ao .navbar-brandanatin'ny <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>

Sary sy lahatsoratra

Azonao atao koa ny mampiasa fitaovana fanampiny hanampiana sary sy lahatsoratra miaraka. Mariho ny fanampin'ny .d-inline-blocksy .align-text-topeo amin'ny <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

Ny rohin'ny fitetezana Navbar dia manorina amin'ny safidintsika .navmiaraka amin'ny kilasin'ny fanovana azy manokana ary mitaky ny fampiasana kilasin'ny toggler ho an'ny famolavolana mifanaraka tsara. Ny fitetezana ao amin'ny navbars dia hitombo ihany koa mba hibodo toerana marindrano betsaka araka izay azo atao mba hitazonana ny votoatin'ny navbaro ho azo antoka.

Ampio ny .activekilasy .nav-linkhanondro ny pejy ankehitriny.

Mariho fa tokony hampidirinao aria-currentao amin'ny active .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>

Ary satria mampiasa kilasy ho an'ny navs izahay, azonao atao ny misoroka ny fomba fiasa mifototra amin'ny lisitra tanteraka raha tianao.

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>

Azonao atao koa ny mampiasa dropdowns ao amin'ny navbaro. Ny menio midina dia mila singa famonosana ho an'ny fametrahana, koa aoka ho azo antoka ny hampiasa singa misaraka sy misy akany ho an'ny .nav-itemsy .nav-linkaraka ny aseho eto ambany.

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>

teny

Asio fanaraha-maso sy singa isan-karazany ao anaty 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>

Ireo singa ankizy avy hatrany amin'ny .navbarfampiasana fandrindrana flex ary ho default amin'ny justify-content: space-between. Mampiasà fitaovana flex fanampiny raha ilaina hanitsiana io fihetsika io.

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>

Miasa ihany koa ny vondrona fampidirana. Raha endrika iray manontolo na endrika iray ny navbar-nao, dia azonao atao ny mampiasa ilay <form>singa ho fitoeran-javatra ary mitahiry HTML sasany.

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>

Ny bokotra isan-karazany dia tohanana ao anatin'ireo endrika navbar ireo ihany koa. Fampahatsiahivana lehibe ihany koa izany fa ny fitaovana fampifanarahana mitsangana dia azo ampiasaina hampifanaraka ireo singa samihafa.

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>

Text

Navbars dia mety ahitana sombin-tsoratra miaraka amin'ny fanampian'ny .navbar-text. Ity kilasy ity dia manitsy ny firindrana mitsangana sy ny elanelana marindrano ho an'ny tady lahatsoratra.

html

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

Afangaro ary ampifanaraho amin'ny singa sy fitaovana hafa raha ilaina.

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>

Tetika loko

Vaovao amin'ny v5.2.0: Navbar theming dia ampiasain'ny CSS varimbazaha ary .navbar-lighttsy ampiasaina intsony. Ny fari-pahaizan'ny CSS dia ampiharina amin'ny .navbar, miompana amin'ny endrika "hazavana", ary azo ovaina amin'ny .navbar-dark.

Mora kokoa noho ny hatramin'izay ny lohahevitra Navbar noho ny fampifangaroan'i Bootstrap ny fari-piadidiana Sass sy CSS. Ny default dia ny "navbar maivana" ho an'ny fampiasana amin'ny loko maivana, fa azonao atao koa .navbar-darkny mampihatra loko maizina. Avy eo, ampifanaraho amin'ny .bg-*utility.

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

fitoeran

Na dia tsy ilaina aza izany dia azonao atao ny mametaka navbar iray .containermba hampifantoka azy amin'ny pejy iray–na dia mariho fa mbola ilaina ny fitoeran-javatra anatiny. Na azonao atao ny manampy kaontenera ao anatiny .navbarmba hampifantoka ny votoatin'ny navbar ambony raikitra na static .

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>

Ampiasao ny iray amin'ireo kaontenera mandray andraikitra hanovana ny haben'ny votoatin'ny navbaro.

html

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

fametrahana

Ampiasao ny fampiasanay toerana hametrahana ny navbar amin'ny toerana tsy mitongilana. Misafidiana avy amin'ny raikitra mankany ambony, miraikitra amin'ny ambany, mipetaka amin'ny ambony (horonana miaraka amin'ny pejy mandra-pahatongany any ambony, dia mijanona eo), na mipetaka amin'ny farany (horonana miaraka amin'ny pejy mandra-pahatongany any ambany, dia mijanona. Ery).

Navbars raikitra dia mampiasa position: fixed, midika izany fa nesorina tamin'ny fikorianan'ny DOM mahazatra izy ireo ary mety mitaky CSS manokana (oh, padding-topeo amin'ny <body>) mba hisorohana ny fifandonana amin'ny singa hafa.

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>

Scralling

Ampio .navbar-nav-scrollamin'ny .navbar-nav(na zana-tsipìka navbar hafa) mba ahafahana mivezivezy mitsangana ao anatin'ny atiny azo toggle amin'ny navbar nirodana. Amin'ny alàlan'ny default, miditra amin'ny 75vh(na 75% amin'ny haavon'ny viewport) ny horonan-taratasy, saingy azonao atao ny manafoana izany amin'ny fananana CSS eo an-toerana --bs-navbar-heightna fomba fanao mahazatra. Any amin'ny seranan-tsambo lehibe kokoa rehefa mivelatra ny navbar dia hiseho toy ny ao amin'ny navbar mahazatra ny atiny.

Mariho fa ity fihetsika ity dia miaraka amin'ny mety ho tsy fahampian'ny overflow-rehefa mametraka overflow-y: auto(ilaina ny manodina ny atiny eto), overflow-xdia mitovy amin'ny auto, izay hanapaka votoaty marindrano.

Ity misy ohatra navbar mampiasa .navbar-nav-scrollmiaraka amin'ny style="--bs-scroll-height: 100px;", miaraka amin'ny fampiasana margin fanampiny ho an'ny elanelana tsara indrindra.

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>

Fihetsika mamaly

Ny Navbars dia afaka mampiasa .navbar-toggler, .navbar-collapse, ary .navbar-expand{-sm|-md|-lg|-xl|-xxl}kilasy hamaritana hoe rahoviana ny atiny no mirodana ao ambadiky ny bokotra iray. Miaraka amin'ny fitaovana hafa, azonao atao ny misafidy mora foana ny fotoana hanehoana na hanafenana singa manokana.

Ho an'ny navbar izay tsy mirodana mihitsy, ampio ny .navbar-expandkilasy amin'ny navbar. Ho an'ny navbar izay mirodana foana, aza ampiana .navbar-expandkilasy.

Toggler

Navbar togglers dia miankavia amin'ny alàlan'ny default, fa raha manaraka singa iray amin'ny mpiray tam-po toy ny a .navbar-brand, dia ho tonga amin'ny farany havanana izy ireo. Ny famadihana ny marikao dia hampivadika ny fametrahana ny toggler. Ireto ambany ireto ny ohatra amin'ny karazana toggle samihafa.

Tsy .navbar-brandaseho amin'ny teboka faran'izay kely indrindra:

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>

Miaraka amin'ny anarana marika aseho eo ankavia ary toggler eo ankavanana:

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>

Miaraka amin'ny toggler eo ankavia ary anarana marika eo ankavanana:

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>

Votoaty ivelany

Indraindray ianao te-hampiasa ny plugin collapse hanetsika singa fitoeran-javatra ho an'ny atiny izay mipetraka ivelan'ny .navbar. Satria miasa amin'ny idsy data-bs-targetmifanandrify ny plugin-nay, dia vita izany!

Votoaty nirodana

Azo afindra amin'ny marika 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>

Rehefa manao izany ianao dia manoro hevitra ny hampidirana JavaScript fanampiny mba hamindra ny fifantohana amin'ny programa amin'ny fitoeran-javatra rehefa misokatra. Raha tsy izany, dia mety ho sarotra amin'ny mpampiasa klavier sy ny mpampiasa ny teknolojia manampy ny fitadiavana ny atiny vao nambara - indrindra raha ny fitoeran'entana nosokafana dia tonga alohan'ny mpanodina ao amin'ny firafitry ny antontan-taratasy. Manoro hevitra ihany koa izahay mba hahazoana antoka fa manana ny aria-controlstoetra ny toggler, manondro ny idfitoeran'ny atiny. Amin'ny teoria dia ahafahan'ny mpampiasa teknolojia manampy hitsambikina mivantana avy amin'ny toggler mankany amin'ny fitoeran-javatra feheziny izany-saingy tsy misy dikany ny fanohanana izany amin'izao fotoana izao.

Offcanvas

Ovay ny navbar mivelatra sy mirodana ho lasa sari-sarinao offcanvas miaraka amin'ny singa offcanvas . Ampitomboinay ny fomba fanao mahazatra offcanvas ary ampiasainay ny .navbar-expand-*kilasinay mba hamoronana sidebar navigateur mavitrika sy mora azo.

Ao amin'ny ohatra etsy ambany, mba hamoronana navbar offcanvas izay mirodana hatrany amin'ny teboka fiatoana rehetra, esory .navbar-expand-*tanteraka ny kilasy.

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>

Mba hamoronana navbar offcanvas izay mivelatra ho navbar mahazatra amin'ny toerana fiatoana manokana toy ny lg, ampiasao .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>

Rehefa mampiasa offcanvas amin'ny navbar maizimaizina ianao dia tandremo fa mety mila manana ambadika maizina amin'ny atiny offcanvas ianao mba tsy ho lasa tsy azo vakiana ny lahatsoratra. Ao amin'ny ohatra etsy ambany, ampianay ny , ny , ny , ary .navbar-darkny to ho an'ny famolavolana mety miaraka amin'ny offcanvas maizina..bg-dark.navbar.text-bg-dark.offcanvas.dropdown-menu-dark.dropdown-menu.btn-close-white.btn-close

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

hiovaova

Nampiana v5.2.0

Amin'ny maha-ampahany amin'ny fomba fiovaovan'ny CSS mivoatra an'ny Bootstrap, ny navbars izao dia mampiasa ny fari-piadidiana CSS eo an .navbar-toerana ho an'ny fanatsarana ny fotoana tena izy. Ny soatoavina ho an'ny fari-piainan'ny CSS dia apetraka amin'ny alàlan'ny Sass, noho izany dia mbola tohanana ihany koa ny fanamboarana Sass.

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

Misy variables CSS fanampiny sasany koa hita ao amin'ny .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);

Ny fanasokajiana amin'ny alàlan'ny fari-piadidiana CSS dia azo jerena ao amin'ny .navbar-darkkilasy izay manafoana ny soatoavina manokana nefa tsy manampy ireo mpifidy CSS dika mitovy.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Sass variables

Variables ho an'ny navbar rehetra:

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

Variables ho an'ny maizina navbar :

$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

Ny kilasy navbar mamaly / mirodana (oh, .navbar-expand-lg) dia mitambatra amin'ny $breakpointssari-tany ary avoaka amin'ny alalan'ny loop in 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;
          }
        }
      }
    }
  }
}