Source

Navbar

Litokomane le mehlala ea sehlooho sa Bootstrap se matla, se arabelang, navbar. E kenyelletsa tšehetso bakeng sa ho tuma, ho tsamaea, le tse ling, ho kenyeletsoa tšehetso bakeng sa plugin ea rona ea ho putlama.

Kamoo e sebetsang kateng

Mona ke seo u hlokang ho se tseba pele u qala ka navbar:

  • Li-Navbar li hloka sephutheloana .navbarbakeng .navbar-expand{-sm|-md|-lg|-xl}sa lihlopha tse arabelang tsa ho putlama le mebala .
  • Li-Navbar le litaba tsa tsona li na le mokelikeli ka ho sa feleng. Sebelisa lijana tseo u ka li khethang ho fokotsa bophara ba tsona bo tšekaletseng.
  • Sebelisa litlelase tsa rona tsa ho arohana le maemo bakeng sa ho laola sebaka le ho tsamaisana ka har'a li-navbar .
  • Li-Navbar li arabela ka ho sa feleng, empa u ka li fetola habonolo ho fetola seo. Boitšoaro ba ho arabela bo itšetlehile ka plugin ea rona ea Collapse JavaScript.
  • Li-Navbar li patiloe ka ho sa feleng ha u hatisa. Li qobelle hore li hatisoe ka ho eketsa .d-printho .navbar. Sheba sehlopha sa lisebelisoa tsa lisebelisoa.
  • Netefatsa phihlello ka ho sebelisa <nav>element kapa, ha o sebelisa ntho e tloaelehileng joalo ka <div>, eketsa a role="navigation"ho navbar e 'ngoe le e 'ngoe ho e supa ka ho hlaka e le sebaka sa bohlokoa bakeng sa basebelisi ba mahlale a thusang.

Liphetho tsa animation tsa karolo ena li ipapisitse le prefers-reduced-motionpotso ea media. Sheba karolo e fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .

Tsoela pele ho bala mohlala le lethathamo la likaroloana tse tšehetsoeng.

Litaba tse tšehelitsoeng

Li-Navbar li tla le ts'ehetso e kentsoeng bakeng sa likaroloana tse seng kae. Khetha ho tse latelang ha ho hlokahala:

  • .navbar-brandbakeng sa k'hamphani ea hau, sehlahisoa, kapa lebitso la projeke.
  • .navbar-navbakeng sa navigation ea bolelele bo felletseng le e bobebe (ho kenyeletsoa le ts'ehetso ea li-dropdown).
  • .navbar-togglerbakeng sa ho sebelisoa le plugin ea rona ea ho putlama le mekhoa e meng ea ho sesa .
  • .form-inlinebakeng sa mofuta ofe kapa ofe oa taolo le liketso.
  • .navbar-textbakeng sa ho kenya mongolo o otlolohileng bohareng.
  • .collapse.navbar-collapsebakeng sa ho hlophisa le ho pata litaba tsa navbar ka sebaka sa ho arohana le motsoali.

Mona ke mohlala oa likaroloana tsohle tse kenyellelitsoeng ho "navbar" e arabelang e nang le leseli e oelang sebakeng se lgseholo (se seholo).

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

Mohlala ona o sebelisa mebala ( bg-light) le sebaka ( my-2, my-lg-0, mr-sm-0, my-sm-0) litlelase tsa thuso.

Brand

E .navbar-brandka sebelisoa ho likarolo tse ngata, empa ankora e sebetsa hantle haholo kaha likarolo tse ling li ka hloka litlelase tsa ts'ebeliso kapa mekhoa e tloaelehileng.

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

Ho eketsa litšoantšo ho ka .navbar-brand'na ha hloka mekhoa e tloaelehileng kapa lisebelisoa ho isa boholo bo nepahetseng. Mehlala e meng ea ho bontša ke ena.

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

Lihokelo tsa Navbar Navigation li theha holim'a .navlikhetho tsa rona ka sehlopha sa tsona sa ho fetola 'me li hloka tšebeliso ea litlelase tsa toggler bakeng sa setaele se arabelang hantle. Ho tsamaea ka har'a li-navbar le hona ho tla hola ho nka sebaka se otlolohileng ka hohle kamoo ho ka khonehang ho boloka litaba tsa hau tsa navbar li hokahane ka mokhoa o sireletsehileng.

Active states-ka-ho .activebontša leqephe la hona joale le ka sebelisoa ka ho toba ho .nav-links kapa batsoali ba bona ba haufi .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>

Mme hobane re sebelisa litlelase bakeng sa li-navs tsa rona, o ka qoba mokhoa o thehiloeng lethathamong ka botlalo haeba o rata.

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

U ka boela ua sebelisa li-dropdown ho navbar ea hau. Manane a theoha a hloka ntho e phuthelang bakeng sa ho beha maemo, kahoo etsa bonnete ba hore o sebelisa likarolo tse arohaneng le tse behiloeng bakeng sa .nav-itemle .nav-linkjoalo ka ha ho bonts'itsoe ka tlase.

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

Mefuta

Beha mefuta e fapaneng ea taolo le likarolo ka har'a navbar ka .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>

Lintho tsa bana tsa hang-hang li .navbarsebelisoa kemisong ea flex 'me li tla lula li le justify-content: space-between. Sebelisa lisebelisoa tse eketsehileng tsa flex ha ho hlokahala ho fetola mokhoa ona.

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

Lihlopha tsa ho kenya li sebetsa hape:

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

Likonopo tse fapaneng li tšehetsoa e le karolo ea mefuta ena ea navbar, hape. Hona hape ke khopotso e ntle ea hore lisebelisoa tsa tekano tse otlolohileng li ka sebelisoa ho hokahanya likarolo tse fapaneng tsa boholo.

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

Mongolo

Navbar e kanna ea ba le likaroloana tsa mongolo ka thuso ea .navbar-text. Sehlopha sena se lokisa tekano e otlolohileng le sebaka se otlolohileng bakeng sa likhoele tsa mongolo.

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

Kopanya le ho kopanya le lisebelisoa tse ling le lisebelisoa ha ho hlokahala.

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

Merero ea mebala

Ho hlophisa navbar ha ho so ka ho ba bonolo ka lebaka la motsoako oa litlelase le background-colorlisebelisoa. Khetha ho tsoa .navbar-lightbakeng sa tšebeliso e nang le bokamorao ba mebala e khanyang, kapa .navbar-darkbakeng sa mebala e lefifi. Ka mor'a moo, ikamahanya le .bg-*lisebelisoa.

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

Lijana

Leha e sa hlokehe, o ka phuthela navbar ka .containerho e beha bohareng ba leqephe kapa oa eketsa e le 'ngoe ka hare ho bohareng feela ba litaba tsa navbar e tsitsitseng kapa e tsitsitseng .

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

Ha setshelo se le ka har'a navbar ea hau, padding ea eona e otlolohileng e tlosoa libakeng tsa phomolo tse tlase ho feta .navbar-expand{-sm|-md|-lg|-xl}sehlopha sa hau se boletsoeng. Sena se tiisa hore ha re ikopanye habeli ho pading ho sa hlokahale liema-boepong tse tlase ha navbar ea hau e putlama.

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

Ho beha

Sebelisa lisebelisoa tsa rona tsa maemo ho beha li-navbar libakeng tse sa tsitsitseng. Khetha ho tloha ho tse tsitsitseng ho ea holimo, tse tsitsitseng ho ea tlaase, kapa tse khomaretsoeng holimo (meqolo e nang le leqephe ho fihlela e fihla holimo, ebe e lula moo). Li-navbar tse tsitsitseng li sebelisa position: fixed, ho bolelang hore li ntšitsoe tseleng e tloaelehileng ea DOM 'me li ka hloka CSS e tloaelehileng (mohlala, padding-topho <body>) ho thibela ho kopana le likarolo tse ling.

Hape hlokomela hore e .sticky-topsebelisa position: sticky, e sa tšehetsoeng ka botlalo ho sebatli se seng le se seng .

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

Boitšoaro ba ho arabela

Li-Navbar li ka sebelisa .navbar-toggler, .navbar-collapse, le .navbar-expand{-sm|-md|-lg|-xl}litlelase ho fetoha ha litaba tsa tsona li putlama ka mor'a konopo. Hammoho le lits'ebeletso tse ling, o ka khetha habonolo nako ea ho bonts'a kapa ho pata likarolo tse itseng.

Bakeng sa li-navbar tse sa keng tsa putlama, kenya .navbar-expandsehlopha ho navbar. Bakeng sa li-navbar tse lulang li putlama, u se ke oa kenya sehlopha sefe kapa sefe .navbar-expand.

Toggler

Li-togglers tsa Navbar li hokahantsoe ka ho le letšehali, empa ha li ka latela ntho ea ngoan'eno joalo ka .navbar-brand, li tla ikamahanya le hole ka ho le letona. Ho khutlisa markup ea hau ho tla khutlisa sebaka sa toggler. Ka tlase ke mehlala ea mefuta e fapaneng ea toggle.

Ha .navbar-brande bonts'e sebaka se tlase haholo:

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

Ka lebitso la lebitso le hlahang ka ho le letšehali le toggler ka ho le letona:

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

Ka toggler ka ho le letšehali le lebitso la lebitso ka ho le letona:

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

Litaba tsa kantle

Ka linako tse ling u batla ho sebelisa plugin ea ho putlama ho qala litaba tse patiloeng kae kapa kae leqepheng. Hobane plugin ea rona e sebetsa ' idme data-targete bapisa, seo se etsoa habonolo!

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