Source

Navbar fɔ di wan dɛn we de

Dokumɛnt ɛn ɛgzampul fɔ Bootstrap in pawaful, rispɔnsiv nevigishɔn hεda, di navbar. Inklud sɔpɔt fɔ branding, nevigishɔn, ɛn ɔda tin dɛn, inklud sɔpɔt fɔ wi kollaps plɔgin.

Aw i de wok

Na dis na wetin yu nid fɔ no bifo yu bigin wit di navbar:

  • Navbars nid wan wrapping .navbarwit .navbar-expand{-sm|-md|-lg|-xl}fɔ rispɔnsiv kollaps ɛn kala skim klas dɛn.
  • Navbars ɛn dɛn kɔntinyu na fluid bay difɔlt. Yuz kɔntena dɛn we yu kin pik fɔ stɔp dɛn ɔrizɔntal wit.
  • Yuz wi spays ɛn fleks yutiliti klas fɔ kɔntrol spɛshal ɛn alaynɛshɔn insay navbar dɛn.
  • Navbar dɛn kin ansa bay difɔlt, bɔt yu kin izi fɔ chenj dɛn fɔ chenj dat. Rispɔnsiv bihayvya dipen pan wi Kɔlaps JavaSkript plɔgin.
  • Navbar dɛn de ayd bay difɔlt we dɛn de print. Fos dɛn fɔ print bay we yu ad .d-printdi .navbar. Si di displei yutiliti klas.
  • Mek shɔ se yu gɛt akses bay we yu yuz wan <nav>ɛlimɛnt ɔ, if yu de yuz wan mɔ jenɛrik ɛlimɛnt lɛk a <div>, ad a role="navigation"to ɛvri navbar fɔ mek yu no klia wan se na landmak rijyɔn fɔ di wan dɛn we de yuz ɛp tɛnkɔlɔji dɛn.

Di animashɔn ifɛkt fɔ dis kɔmpɔnɛnt de dipen pan di prefers-reduced-motionmidia kwɛstyɔn. Si di ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .

Rid fɔ wan ɛgzampul ɛn list fɔ di sab-kɔmpɔnɛnt dɛn we dɛn sɔpɔt.

Kɔntinyu dɛn we dɛn sɔpɔt

Navbars kam wit bilt-in sɔpɔt fɔ wan anful sab-kɔmpɔnɛnt dɛn. Pik frɔm dɛn wan ya as nid de:

  • .navbar-brandfɔ yu kɔmni, prɔdak, ɔ prɔjek nem.
  • .navbar-navfɔ wan ful-ayt ɛn laytwɛt nevigishɔn (inklud sɔpɔt fɔ drɔpdɔwn dɛn).
  • .navbar-togglerfɔ yuz wit wi kollaps plɔgin ɛn ɔda nevigishɔn tɔglin bihayvya dɛn.
  • .form-inlinefɔ ɛni fɔm kɔntrol ɛn akshɔn dɛn.
  • .navbar-textfɔ ad string dɛn we gɛt tɛks we gɛt vertikal sɛnt.
  • .collapse.navbar-collapsefɔ grup ɛn ayd navbar kɔntinyu bay wan mama ɛn papa brekpɔynt.

Na dis na wan ɛgzampul fɔ ɔl di sab-kɔmpɔnɛnt dɛn we de insay wan rispɔnsiv layt-tim navbar we de kɔlaps ɔtomɛtik wan na di lg(big) brekpɔynt.

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

Dis ɛgzampul de yuz kɔlɔ ( bg-light) ɛn spɛshal ( my-2, my-lg-0, mr-sm-0, my-sm-0) yutiliti klas dɛn.

Mak

Di .navbar-brandkin aplay to mɔs ɛlimɛnt dɛn, bɔt wan ankɔ de wok fayn as sɔm ɛlimɛnt dɛn kin nid yutiliti klas ɔ kɔstɔm stayl dɛn.

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

If yu ad pikchɔ dɛn to di .navbar-brand, i go mɔs bi se ɔltɛm yu nid kɔstɔm stayl ɔ yutiliti dɛn fɔ mek dɛn saiz fayn fayn wan. Na sɔm ɛgzampul dɛn ya fɔ sho.

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

Navbar nevigishɔn link dɛn bil pan wi .navopshɔn dɛn wit dɛn yon modifya klas ɛn dɛn nid fɔ yuz toggler klas dɛn fɔ mek dɛn stayl di rayt we fɔ ansa. Nevigishɔn insay navbar dɛn go gro bak fɔ tek bɔku ɔrizɔntal spɛs as pɔsibul fɔ kip yu navbar kɔntinyu dɛn alaynɛd ​​fayn fayn wan.

Aktiv stet dɛn—wit .active—fɔ sho di pej we de naw kin aplay dairekt to .nav-links ɔ dɛn mama ɛn papa we de nia .nav-itemdɛn s.

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

Ɛn bikɔs wi de yuz klas fɔ wi nav dɛn, yu kin avɔyd di list-based aprɔch ɔltogɛda if yu want.

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

Yu kin yuz drɔpdɔwn dɛn bak na yu navbar nav. Drɔpdɔwn mɛnyu dɛn nid fɔ rap ɛlimɛnt fɔ posishun, so mek shɔ se yu yuz sɛpret ɛn nɛst ɛlimɛnt dɛn fɔ .nav-itemɛn .nav-linklɛk aw dɛn sho dɔŋ ya.

<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 dɛn

Put difrɛn fɔm kɔntrol ɛn kɔmpɔnɛnt dɛn insay wan navbar wit .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>

Wantɛm pikin dɛn ɛlimɛnt dɛn we de .navbaryuz fleks layout ɛn go difɔlt to justify-content: space-between. Yuz ɔda fleks yutiliti dɛn as nid de fɔ ajɔst dis bihayvya.

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

Input grup dɛn de wok, dɛnsɛf:

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

Difrɛn bɔtin dɛn de sɔpɔt as pat pan dɛn navbar fɔm dɛn ya, bak. Dis na big mɛmba bak se dɛn kin yuz vertikal alaynɛshɔn yutiliti fɔ alaynɛd ​​difrɛn saiz ɛlimɛnt dɛn.

<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

Navbar dɛn kin gɛt bit dɛn fɔ tɛks wit di ɛp we .navbar-text. Dis klas de ajɔst vertikal alaynɛshɔn ɛn ɔrizɔntal spɛshal fɔ string dɛn na tɛks.

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

Miks ɛn mach wit ɔda kɔmpɔnɛnt ɛn yutiliti dɛn as nid de.

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

Kɔlɔ skim dɛn

Tim di navbar nɔ ɛva izi tank to di kɔmbaynshɔn fɔ tim klas ɛn background-coloryutiliti. Pik frɔm .navbar-lightfɔ yuz wit layt bakgrɔn kɔlɔ dɛn, ɔ .navbar-darkfɔ dak bakgrɔn kɔlɔ dɛn. Dɔn, kɔstɔmayt wit .bg-*yutiliti dɛn.

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

Kɔntena dɛn

Pan ɔl we i nɔ nid, yu kin rap wan navbar insay a .containerfɔ sɛnt am na wan pej ɔ ad wan insay fɔ jɔs sɛnt di tin dɛn we de insay wan fiks ɔ statik tɔp navbar .

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

We di kɔntena de insay yu navbar, dɛn kin pul in ɔrizɔntal pad na di brek pɔynt dɛn we smɔl pas di .navbar-expand{-sm|-md|-lg|-xl}klas we yu dɔn spɛsifa. Dis de mek shɔ se wi nɔ de dubl ɔp pan padding we nɔ nid fɔ de pan lɔwa viupɔt dɛn we yu navbar dɔn kol.

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

Di ples we dɛn fɔ put am

Yuz wi pozishɔn yutiliti fɔ put navbar dɛn na nɔ-statik pozishɔn dɛn. Pik frɔm fiks to di ɔp, fiks to di bɔt, ɔ stik to di ɔp (skrol wit di pej te i rich ɔp, dɔn i de de). Fiks navbar dɛn de yuz position: fixed, we min se dɛn pul dɛn frɔm di nɔmal flɔ na di DOM ɛn dɛn kin nid kɔstɔm CSS (ɛgz., padding-topna di <body>) fɔ mek dɛn nɔ ɔvalap wit ɔda ɛlimɛnt dɛn.

Notis bak se .sticky-topyuz position: sticky, we nɔ fulɔp fɔ sɔpɔt na ɛvri brawza .

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

Di we aw pipul dɛn de biev we dɛn de ansa

Navbars kin yuz .navbar-toggler, .navbar-collapse, ɛn .navbar-expand{-sm|-md|-lg|-xl}klas fɔ chenj we dɛn kɔntinyu fɔ kol biɛn wan bɔtin. We yu jɔyn wit ɔda yutiliti dɛn, yu kin pik izi wan ustɛm fɔ sho ɔ ayd patikyula tin dɛn.

Fɔ navbar dɛn we nɔ de ɛva kɔlap, ad di .navbar-expandklas na di navbar. Fɔ navbar dɛn we kin ɔltɛm kol, nɔ ad ɛni .navbar-expandklas.

Toggler fɔ di wan dɛn we de chenj

Navbar togglers na lef-alayn bay difɔlt, bɔt if dɛn fala wan brɔda ɛn sista ɛlimɛnt lɛk wan .navbar-brand, dɛn go ɔtomɛtik alaynɛd ​​to di fa rayt. We yu rivɛns yu mak, i go rivɛns di ples we dɛn put di tɔgl. Dis dɔŋ ya na ɛgzampul dɛn bɔt difrɛn stayl dɛn we dɛn kin yuz fɔ tɔgl.

Wit no .navbar-brandsho in lowest brekpoint:

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

Wit wan brand nem we dɛn sho na di lɛft ɛn toggler na di rayt say:

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

Wit wan toggler na di lef ɛn brand nem na di rayt:

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

Di tin dɛn we de na do

Sɔntɛnde, yu kin want fɔ yuz di kɔlaps plɔgin fɔ mek yu gɛt tin dɛn we yu ayd ɔdasay na di pej. Bikɔs wi plɔgin de wok pan di idɛn data-targetmaching, dat kin izi fɔ du!

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