Source

Navbar

Belgekirin û nimûneyên ji bo sernavê navîgasyonê ya hêzdar, bersivdar a Bootstrap, navbar. Piştgiriya ji bo nîşankirin, navîgasyon, û bêtir vedihewîne, di nav de piştgirî ji bo pêveka hilweşîna me.

Çawa dixebite

Li vir tiştê ku hûn hewce ne ku zanibin berî ku hûn dest bi navbarê bikin ev e:

  • Navbar ji bo qutbûna bersivdar û dersên nexşeya rengîn pêdivî bi pêçekê .navbarheye ..navbar-expand{-sm|-md|-lg|-xl}
  • Navbar û naveroka wan ji hêla xwerû ve herikbar in. Konteynirên vebijarkî bikar bînin da ku firehiya wan a horizontal sînordar bikin.
  • Ji bo kontrolkirina cihêbûn û lihevhatina di navbaran de dersên meya ferq û kargêriya nerm bikar bînin .
  • Navbar ji hêla xwerû ve bersivdar in, lê hûn dikarin bi hêsanî wan biguhezînin da ku wê biguhezînin. Tevgera bersivdar bi pêveka meya Collapse JavaScript ve girêdayî ye.
  • Dema çapkirinê navbar ji hêla xwerû ve têne veşartin. Bi zêdekirina wan bi zorê çap .d-printbikin .navbar. Binêre çîna karûbarê nîşankirinê.
  • Bi karanîna <nav>hêmanek ve gihîştinê piştrast bikin an jî, heke hêmanek gelemperîtir wekî , bikar bînin , li her navbarek <div>zêde bikin da ku ew bi eşkere wekî herêmek berbiçav ji bo bikarhênerên teknolojiyên arîkar nas bikin.role="navigation"

Bandora anîmasyonê ya vê hêmanê bi pirsa prefers-reduced-motionmedyayê ve girêdayî ye. Binêre beşa tevgera kêmkirî ya belgeya gihîştina me .

Ji bo mînakek û navnîşa jêr-hêmanên piştgirî bixwînin.

Naveroka piştgirî

Navbar ji bo çend hêmanan bi piştgirîya çêkirî tê. Li gorî hewcedariyê ji van jêrîn hilbijêrin:

  • .navbar-brandji bo pargîdaniya we, hilber, an navê projeya we.
  • .navbar-navji bo navîgasyonek tije-bilind û sivik (tevî piştgirîya dakêşan).
  • .navbar-togglerji bo karanîna bi pêveka meya hilweşandinê û tevgerên din ên guheztina navîgasyonê re.
  • .form-inlineji bo her cûre kontrol û çalakiyan.
  • .navbar-textji bo lêzêdekirina rêzikên nivîsê yên vertîkal navendî.
  • .collapse.navbar-collapseji bo komkirin û veşartina naveroka navbarê ji hêla xala veqetandinê ya dêûbav.

Li vir mînakek ji hemî jêr-pêkhatan hene ku di navbarek bi mijara ronahiyê ya bersivdar de hene ku bixweber li xala lgveqetandinê (mezin) hilweşe.

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

Ev nimûne çînên karûbar reng ( bg-light) û dûr ( my-2, my-lg-0, mr-sm-0, ) bikar tîne.my-sm-0

Şanika şewatê

Dibe .navbar-brandku li piraniya hêmanan were sepandin, lê ankerek çêtirîn dixebite ji ber ku hin hêman dibe ku hewceyê dersên karûbar an şêwazên xwerû hewce bike.

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

Zêdekirina wêneyan li .navbar-brandwê belkî her gav hewce dike ku şêwazên xwerû an karûbarên xwerû bi mezinahiya rast hewce bike. Li vir çend nimûne hene ku nîşan bidin.

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

Zencîreyên navîgasyonê .navyên navbarê li ser vebijarkên me bi çîna xweya guhêrbar ava dikin û ji bo şêwaza bersivdar a rast pêdivî bi karanîna dersên veguheztinê hewce dikin . Navîgasyon di navbaran de dê her weha mezin bibe da ku bi qasî ku pêkan cîhê horizontî dagîr bike da ku naveroka navbara we bi ewlehî li hev bihêle.

Dewletên çalak-bi-ji .activebo nîşankirina rûpela heyî dikare rasterast li .nav-links an s-yên dêûbavên wan ên yekser were sepandin .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>

Û ji ber ku em dersan ji bo navên xwe bikar tînin, heke hûn bixwazin hûn dikarin ji nêzîkatiya bingehîn-lîsteyê bi tevahî dûr bixin.

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

Her weha hûn dikarin di navbara navbarê de dakêşan bikar bînin. Pêşekên dakêşanê ji bo pozîsyonê hêmanek pêçandî hewce dike, ji ber vê yekê pê ewle bin ku hûn ji bo .nav-itemû .nav-linkwekî ku li jêr tê xuyang kirin hêmanên veqetandî û hêlîn bikar bînin.

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

Forms

Kontrol û pêkhateyên cihêreng ên formê di navbarek bi .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>

Hêmanên zarokan ên yekser di .navbarkaranîna nexşeya nerm de bikar tînin û dê wekî xwerû justify-content: space-between. Ji bo eyarkirina vê tevgerê wekî ku hewce be karûbarên flex ên din bikar bînin.

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

Komên têketinê jî dixebitin:

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

Bişkokên cihêreng wekî beşek ji van formên navbarê jî têne piştgirî kirin. Ev di heman demê de bîranînek girîng e ku karûbarên hevrêziya vertîkal dikare were bikar anîn da ku hêmanên mezinahiyên cihêreng li hev bikin.

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

Nivîstok

Dibe ku navbar bi alîkariya .navbar-text. Ev çîn ji bo rêzikên nivîsê hevrêziya vertîkal û cîhê horizontî eyar dike.

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

Li gorî hewcedariyê bi hêman û amûrên din re tevlihev bikin û li hev bikin.

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

Rengên rengan

Mijara navbarê bi saya tevhevkirina dersên mijarê û karûbaran qet hêsantir nebûye background-color. Ji .navbar-lightbo karanîna bi rengên paşxaneya sivik, an .navbar-darkji bo rengên paşxaneya tarî hilbijêrin. Dûv re, bi .bg-*karûbaran xweş bikin.

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

Konteynirên

Her çend ew ne hewce ye jî, hûn dikarin navbarek di navbarekê de bipêçin da .containerku wê li ser rûpelek navend bike an yekek di hundurê de zêde bike da ku tenê naverokê navbarek navbarek jorîn a sabît an statîk bike.

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

Gava ku konteynir di navbara we de ye, pelika wê ya horizontî li xalên veqetandinê ji .navbar-expand{-sm|-md|-lg|-xl}çîna weya diyarkirî kêmtir tê rakirin. Ev piştrast dike ku dema ku navbara we hilweşe, em li ser dîmenderên jêrîn ên nehewce padding dubare nakin.

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

Cihkirin

Karûbarên pozîsyona me bikar bînin da ku navbaran di pozîsyonên ne-statîk de bi cîh bikin. Ji yên sabît ber bi jor ve, ji binî ve sabîtkirî, an bi jor ve zeliqandî hilbijêrin (bi rûpelê re digere heya ku digihîje jor, dûv re li wir dimîne). Navbarên rastkirî bikar tînin position: fixed, tê vê wateyê ku ew ji herikîna normal ya DOM-ê têne derxistin û dibe ku CSS-ya xwerû hewce bike (mînak, padding-topli ser <body>) da ku pêşî li hevgirtina bi hêmanên din re bigire.

Di heman demê de bala xwe bidin ku .sticky-topbikar tîne position: sticky, ku di her gerokê de bi tevahî nayê piştgirî kirin .

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

Tevgerên bersivdar

Navbar dikarin .navbar-toggler, .navbar-collapse, û .navbar-expand{-sm|-md|-lg|-xl}çînan bikar bînin da ku dema ku naveroka wan li pişt bişkokekê hilweşe biguhere. Bi tevlêbûna bi karûbarên din re, hûn dikarin bi hêsanî hilbijêrin kengê hêmanên taybetî nîşan bidin an veşêrin.

Ji bo navbarên ku qet naqedin, .navbar-expandçîna li ser navbarê zêde bikin. Ji bo navbarên ku her gav hildiweşin, tu .navbar-expandçînek zêde nekin.

Toggler

Veguhezerên navbarê ji hêla xwerû ve li çepê têne rêz kirin, lê ger ew hêmanek xwişk û birayên mîna a bişopînin .navbar-brand, ew ê bixweber berbi rasta dûr ve werin rêz kirin. Berevajîkirina nîşankirina we dê cîhkirina vekêşanê berevajî bike. Li jêr mînakên şêwazên cûda yên guheztinê hene.

.navbar-brandDi xala veqetandinê ya herî nizm de nayê nîşandan:

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

Bi navek marqeya ku li milê çepê û veguheztina li milê rastê tê xuyang kirin:

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

Li milê çepê vekêşkek û navê marqeyê li milê rastê:

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

Naveroka derve

Carinan hûn dixwazin pêveka hilweşandinê bikar bînin da ku naveroka veşartî li cîhek din a rûpelê bişopînin. Ji ber ku pêveka me li ser idû lihevhatinê dixebite data-target, ew bi hêsanî tê kirin!

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