in English

Navbar

Dokimantasyon ak egzanp pou header navigasyon pwisan Bootstrap a, navbar la. Gen ladan sipò pou mak, navigasyon, efondreman plugin, ak plis ankò.

Ki jan li fonksyone

Men sa ou bezwen konnen anvan ou kòmanse ak navbar la:

Navbars mande pou yon anbalaj .navbarak .navbar-expand{-sm|-md|-lg|-xl}pou efondreman reponn ak klas konplo koulè .
Navbars ak sa ki ladan yo likid pa default. Sèvi ak resipyan opsyonèl pou limite lajè orizontal yo.
Sèvi ak espas sèvis piblik nou yo ak flex klas pou kontwole espas ak aliyman nan navbars.
Navbars yo reponn pa default, men ou ka fasilman modifye yo pou chanje sa. Konpòtman reponn depann de Plugin JavaScript Collapse nou an.
Navbars yo kache pa default lè enprime. Fòse yo enprime lè yo ajoute .d-printnan .navbar. Gade klas sèvis piblik ekspozisyon an.
Asire aksè a lè w sèvi ak yon <nav>eleman oswa, si w ap itilize yon eleman ki pi jenerik tankou yon <div>, ajoute yon role="navigation"nan chak navbar pou idantifye li klèman kòm yon rejyon enpòtan pou itilizatè teknoloji asistans yo.

Efè animasyon eleman sa a depann de prefers-reduced-motionrechèch medya yo. Gade seksyon mouvman redui nan dokiman aksè nou an .

Kontni sipòte

Navbars vini ak sipò entegre pou yon ti ponyen sub-konpozan. Chwazi nan sa ki annapre yo jan sa nesesè:

.navbar-brandpou konpayi ou, pwodwi, oswa non pwojè ou.
.navbar-navpou yon navigasyon plen wotè ak lejè (ki gen ladan sipò pou dropdowns).
.navbar-togglerpou itilize ak Plugin efondreman nou an ak lòt konpòtman baskil navigasyon .
.form-inlinepou nenpòt kontwòl fòm ak aksyon.
.navbar-textpou ajoute strings tèks ki santre vètikal.
.collapse.navbar-collapsepou gwoupman ak kache kontni navbar pa yon pwen breakpoint paran.

Isit la se yon egzanp tout sou-konpozan ki enkli nan yon navbar ki reponn ak tematik limyè ki otomatikman tonbe nan lg(gwo) breakpoint la.

<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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <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">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>

Egzanp sa a sèvi ak klas itilite koulè ( bg-light) ak espas ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Mak

Yo .navbar-brandka aplike nan pifò eleman, men yon jete lank travay pi byen, kòm kèk eleman ta ka mande pou klas sèvis piblik oswa estil koutim.

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

Ajoute imaj yo .navbar-brandpral gen anpil chans toujou mande pou estil koutim oswa sèvis piblik yo byen gwosè. Men kèk egzanp pou demontre.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/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.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Nav

Lyen navigasyon Navbar yo bati sou .navopsyon nou yo ak pwòp klas modifye yo epi yo mande pou yo sèvi ak klas toggler pou yon fason apwopriye ki reponn. Navigasyon nan navbars ap grandi tou pou okipe plis espas orizontal ke posib pou kenbe kontni navbar ou byen aliyen.

Eta aktif—ak .active—pou endike paj aktyèl la ka aplike dirèkteman nan .nav-links oswa paran imedya .nav-itemyo.

<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">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Epi paske nou itilize klas pou nav nou yo, ou ka evite apwòch ki baze sou lis antyèman si ou renmen.

<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-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

Ou kapab tou itilize dropdowns nan navbar ou. Meni dropdown mande pou yon eleman anbalaj pou pwezante, kidonk asire w ke ou sèvi ak eleman separe ak enbrike pou .nav-itemak .nav-linkjan yo montre anba a.

<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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <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>

Fòm

Mete divès kalite kontwòl fòm ak eleman nan yon navbar ak .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>

Eleman timoun imedyat nan .navbaritilize flex layout epi yo pral default nan justify-content: space-between. Sèvi ak lòt sèvis piblik fleksib jan sa nesesè pou ajiste konpòtman sa a.

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

Gwoup antre travay, tou:

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

Yo sipòte plizyè bouton kòm yon pati nan fòm navbar sa yo tou. Sa a se tou yon gwo rapèl ke sèvis piblik aliyman vètikal yo ka itilize aliman eleman diferan gwosè.

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

Tèks

Navbars ka genyen ti moso tèks avèk èd .navbar-text. Klas sa a ajiste aliyman vètikal ak espas orizontal pou fisèl tèks yo.

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

Melanje ak matche ak lòt konpozan ak sèvis piblik jan sa nesesè.

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

Koulè rapid

Tematik navbar la pa janm te pi fasil gras a konbinezon tematik klas ak background-colorsèvis piblik yo. Chwazi nan .navbar-lightpou itilize ak koulè background limyè, oswa .navbar-darkpou koulè background nwa. Lè sa a, Customize ak .bg-*sèvis piblik.

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

Kontenè

Malgre ke li pa obligatwa, ou ka vlope yon navbar nan yon .containersantre li sou yon paj. Oswa ou ka ajoute yon veso andedan .navbarpou sèlman santre sa ki nan yon navbar fiks oswa estatik .

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

Lè veso a nan navbar ou a, yo retire padding orizontal li nan pwen rupture ki pi ba pase .navbar-expand{-sm|-md|-lg|-xl}klas ou espesifye. Sa a asire nou pa double sou padding san nesesite sou vi ki pi ba yo lè navbar ou a tonbe.

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

Plasman

Sèvi ak sèvis piblik pozisyon nou yo pou mete navbars nan pozisyon ki pa estatik. Chwazi nan fiks nan tèt la, fiks nan anba a, oswa kolan nan tèt la (defile ak paj la jiskaske li rive nan tèt la, Lè sa a, rete la). Navbars fiks yo sèvi ak position: fixed, sa vle di yo retire nan koule nòmal DOM la epi yo ka mande CSS koutim (egzanp, padding-topsou <body>) pou anpeche sipèpoze ak lòt eleman.

Epitou sonje ke .sticky-topitilize position: sticky, ki pa konplètman sipòte nan chak navigatè .

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

Defile

Ajoute .navbar-nav-scrollnan yon .navbar-collapse(oswa lòt sub-konpozan navbar) pou pèmèt defile vètikal nan sa ki ka chanje nan yon navbar ki tonbe. Pa default, defile anvwaye nan 75vh(oswa 75% nan wotè a viewport), men ou ka pase sou plas sa ak estil enline oswa koutim. Nan pi gwo pòtay lè navbar la elaji, kontni ap parèt menm jan li fè sa nan yon navbar default.

Tanpri sonje ke konpòtman sa a vini ak yon dezavantaj potansyèl nan overflow- lè anviwònman overflow-y: auto(obligasyon pou defile kontni an isit la), overflow-xse ekivalan a auto, ki pral koupe kèk kontni orizontal.

Isit la nan yon egzanp navbar lè l sèvi avèk .navbar-nav-scrollak style="max-height: 100px;", ak kèk sèvis piblik Marge siplemantè pou espas pi gwo.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <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="#" role="button" data-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">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Konpòtman ki reponn

Navbars ka itilize .navbar-toggler, .navbar-collapse, ak .navbar-expand{-sm|-md|-lg|-xl}klas pou detèmine lè kontni yo tonbe dèyè yon bouton. Nan konbinezon ak lòt sèvis piblik, ou ka fasilman chwazi lè yo montre oswa kache eleman patikilye.

Pou navbars ki pa janm tonbe, ajoute .navbar-expandklas la sou navbar la. Pou navbars ki toujou tonbe, pa ajoute okenn .navbar-expandklas.

Toggler

Navbar togglers yo aliye sou bò gòch pa default, men yo ta dwe swiv yon eleman frè ak sè tankou yon .navbar-brand, yo pral otomatikman dwe aliyen sou bò dwat la. Ranvèse maketing ou a pral ranvèse plasman toggler la. Anba a se egzanp diferan estil baskil.

San yo pa .navbar-brandmontre nan pwen rupture ki pi piti a:

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

Avèk yon non mak yo montre sou bò gòch la ak baskile sou bò dwat la:

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

Avèk yon baskil sou bò gòch la ak non mak sou bò dwat la:

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

Kontni ekstèn

Pafwa ou vle sèvi ak plugin efondreman an pou deklanche yon eleman veso pou kontni ki estriktirèl chita deyò nan .navbar. Paske Plugin nou an ap travay sou la idak data-targetmatche, sa fasil fè!

Kontni tonbe

Baskile atravè mak navbar la.

<div class="fixed-top">
  <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>

Lè ou fè sa, nou rekòmande pou mete plis JavaScript pou deplase konsantre nan pwogramasyon nan veso a lè li louvri. Sinon, itilizatè klavye yo ak itilizatè teknoloji asistans yo pral gen anpil chans pou yo jwenn kontni ki fèk revele a - sitou si veso ki te louvri a vini anvan baskil la nan estrikti dokiman an. Nou rekòmande tou pou asire w ke toggler a gen aria-controlsatribi a, lonje dwèt sou idveso kontni an. Nan teyori, sa pèmèt itilizatè teknoloji asistans yo sote dirèkteman nan baskile a nan veso li kontwole a, men sipò pou sa a se kounye a byen inégal.