Source

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.

Ny fomba fiasa

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

  • Ny Navbars dia mila famonosana .navbarmiaraka .navbar-expand{-sm|-md|-lg|-xl}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. Mampiasà kaontenera azo atao mba hamerana ny sakany marindrano.
  • 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.
  • Navbars dia miafina amin'ny alàlan'ny default rehefa manonta. Manery azy ireo hatao pirinty amin'ny fanampiana .d-printny .navbar. Jereo ny kilasin'ny fitaovana fampirantiana .
  • 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.

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

Vakio ny ohatra iray sy ny lisitr'ireo zana-tsinga tohana.

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 .
  • .form-inlineho 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 teboka fiatoana ray aman-dreny.

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Ity ohatra ity dia mampiasa kilasy fampiasa amin'ny loko ( bg-light) sy ny elanelana ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Marika

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

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

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

Ny fampidirana sary amin'ny sary .navbar-branddia mety mitaky fomba manokana na fitaovana ampiasaina amin'ny habeny araka ny tokony ho izy. Ireto misy ohatra vitsivitsy haseho.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Ny rohin'ny fitetezana Navbar dia manorina amin'ny safidintsika .navmiaraka amin'ny kilasy modifier-ny manokana ary mitaky ny fampiasana kilasin'ny toggler ho an'ny styling mifanaraka tsara. Ny fitetezana ao amin'ny navbars dia hitombo ihany koa mba hibodo toerana marindrano betsaka araka izay azo atao mba hitazonana ny atiny navbar ho azo antoka.

Ny fanjakana mavitrika-miaraka amin'ny .active- mba hanondroana ny pejy ankehitriny dia azo ampiharina mivantana amin'ny .nav-links na ny ray aman-dreniny akaiky .nav-item.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </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.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Azonao atao koa ny mampiasa dropdowns ao amin'ny navbar nav anao. 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.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

teny

Mametraha fanaraha-maso sy singa isan-karazany ao anaty navbar miaraka amin'ny .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Ireo singa ho an'ny ankizy eo no ho eo dia .navbarmampiasa layout flex ary ho default amin'ny justify-content: space-between. Mampiasà fitaovana flex fanampiny raha ilaina hanitsiana io fihetsika io.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Miasa ihany koa ny vondrona fampidirana:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <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. Ity dia fampahatsiahivana lehibe ihany koa fa ny fitaovana fampifanarahana mitsangana dia azo ampiasaina hampifanaraka ireo singa samihafa.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Text

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

Tetika loko

Ny fametrahana ny navbar dia tsy mora kokoa noho ny fampifangaroana kilasy sy kojakoja momba ny lohahevitra background-color. Misafidiana amin'ny .navbar-lightampiasaina amin'ny loko ambadika maivana, na .navbar-darkamin'ny 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 navbar-light" 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 manampy iray ao anatiny mba hampifantohana fotsiny ny votoatin'ny navbar ambony raikitra na static .

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

Rehefa ao anatin'ny navbar-nao ilay kaontenera, dia esorina amin'ny toerana fiatoana ambany noho ny .navbar-expand{-sm|-md|-lg|-xl}kilasy voatondronao ny fonony mitsivalana. Izany dia miantoka fa tsy hampitombo avo roa heny ny padding tsy ilaina amin'ny seranan-tsambo ambany kokoa rehefa mirodana ny navbar-nao.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <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, raikitra mankany ambany, na mipetaka amin'ny tampony (horonana miaraka amin'ny pejy mandra-pahatongany eny ambony, dia mijanona eo). 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.

Mariho koa fa ny .sticky-topfampiasana position: sticky, izay tsy tohanana tanteraka amin'ny navigateur rehetra .

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

Fihetsika mamaly

Navbars dia afaka mampiasa .navbar-toggler, .navbar-collapse, ary .navbar-expand{-sm|-md|-lg|-xl}kilasy hanovana rehefa mirodana ao ambadiky ny bokotra iray ny atiny. 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 hamadika ny fametrahana ny toggler. Ireto ambany ireto ny ohatra amin'ny karazana toggle samihafa.

Tsy .navbar-brandhita amin'ny teboka farany ambany indrindra:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Votoaty ivelany

Indraindray ianao dia te-hampiasa ny plugin collapse hanetsika votoaty miafina any an-kafa ao amin'ny pejy. Satria miasa amin'ny idsy data-targetmifanandrify ny plugin-nay, dia vita izany!

<div class="pos-f-t">
  <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">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>