Navbar

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

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.

Li kontinye pou yon egzanp ak lis sou-konpozan sipòte.

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="#" 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="#">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 paske 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.1/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.1/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" href="#">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-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="#">Disabled</a>
    </div>
  </div>
</nav>

Ou kapab tou itilize dropdowns nan navbar ou a. 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="#" 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>

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 imedyat timoun nan .navbaritilize flex layout epi yo pral default nan justify-content: 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 ajoute youn nan 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>

Konpòtman ki reponn

Navbars ka itilize .navbar-toggler, .navbar-collapse, ak .navbar-expand{-sm|-md|-lg|-xl}klas pou chanje 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.

Ki pa .navbar-brandmontre nan pwen rupture ki pi ba:

<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="#">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" href="#">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" href="#">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 kontni kache yon lòt kote sou paj la. Paske Plugin nou an ap travay sou la idak data-targetmatche, sa fasil fè!

Collapsed content

Toggleable via the navbar brand.

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