Source

Navbar nga

Dokumentasion ken dagiti pagarigan para iti nabileg, makasungbat nga ulo ti nabigasion ti Bootstrap, ti navbar. Iramanna ti suporta para iti branding, nabigasion, ken dadduma pay, agraman ti suporta para iti collapse plugin-mi.

No kasano ti panagandar dayta

Adtoy ti masapul nga ammuem sakbay a mangrugika iti navbar:

  • Dagiti navbar ket agkasapulan ti panagbalkot .navbarnga addaan .navbar-expand{-sm|-md|-lg|-xl}para kadagiti makasungbat a panagrebba ken dagiti klase ti eskema ti kolor .
  • Dagiti navbar ken dagiti linaonda ket pluido babaen ti default. Usaren dagiti opsional a pagkargaan tapno malimitaran ti horizontal a kalawada.
  • Usaren dagiti klasemi ti spacing ken flex utility para iti panangtengngel ti espasyo ken panagtunos iti uneg dagiti navbar.
  • Dagiti navbar ket makasungbat babaen ti default, ngem nalakam a baliwan dagitoy tapno mabaliwan dayta. Ti makasungbat a kababalin ket agpannuray iti pluginmi a Collapse JavaScript.
  • Dagiti navbar ket nailemmeng babaen ti default no agimprenta. Piliten dagitoy a maimaldit babaen ti pananginayon .d-printiti .navbar. Kitaen ti klase ti utilidad ti display .
  • Siguraduen ti pannakagun-od babaen ti panagusar ti <nav>elemento wenno, no agus-usar ti ad-adu a sapasap nga elemento a kas ti <div>, inayon ti role="navigation"a iti tunggal maysa a navbar tapno nalawag a mailasin daytoy a kas maysa a pagilasinan a rehion para kadagiti agar-aramat kadagiti makatulong a teknolohia.

Ti epekto ti animasion daytoy a paset ket agpannuray iti prefers-reduced-motionpanagsaludsod ti media. Kitaen ti benneg ti naikkat a panaggunay ti dokumentasionmi ti pannakagun-od .

Basaen pay para iti pagarigan ken listaan ​​dagiti nasuportaran a sub-paset.

Nasuportaran a linaon

Dagiti Navbar ket umay nga addaan iti naibangon a suporta para iti sumagmamano a sub-paset. Pumili kadagiti sumaganad no kasapulan:

  • .navbar-brandpara iti nagan ti kompaniam, produktom, wenno proyektom.
  • .navbar-navpara iti naan-anay a kangato ken nalag-an a panaglayag (agraman ti suporta para kadagiti dropdown).
  • .navbar-togglerpara iti panagusar iti collapse plugin-tayo ken dagiti dadduma pay a kababalin ti panag-toggling ti nabigasion .
  • .form-inlinepara iti aniaman a porma a kontrol ken tignay.
  • .navbar-textpara iti pananginayon kadagiti bertikal a naisentro a kuerdas ti teksto.
  • .collapse.navbar-collapsepara iti panaggrupo ken panangilemmeng kadagiti linaon ti navbar babaen ti nagannak a breakpoint.

Adda ditoy ti pagarigan dagiti amin a sub-paset a nairaman iti sumungbat a navbar a natemaan iti lawag nga automatiko a marpuog iti lg(dakkel) a breakpoint.

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

Daytoy a pagarigan ket agus-usar kadagiti klase ti utilidad ti kolor ( bg-light) ken panagsisina ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Marka

Ti .navbar-brandmabalin a mayaplikar kadagiti kaaduan nga elemento, ngem ti maysa nga angkla ket kasayaatan nga agtrabaho a kas dagiti sumagmamano nga elemento ket mabalin a makasapul kadagiti klase ti utilidad wenno dagiti kostumbre nga estilo.

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

Ti pananginayon kadagiti ladawan iti .navbar-brandket nalabit kanayon a kasapulan dagiti kostumbre nga estilo wenno dagiti utilidad tapno umiso ti kadakkelda. Adtoy ti sumagmamano a pagarigan a maipakita.

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

Dagiti silpo ti nabigasion ti Navbar ket mangbangon kadagiti .navpagpilianmi nga addaan kadagiti bukodda a klase ti mangbalbaliw ken kasapulan ti panagusar kadagiti klase ti toggler para iti umno a sumungbat nga estilo. Ti panagnavigasion kadagiti navbar ket dumakkelto pay tapno mangsakup ti adu a horisontal nga espasio aginggana a mabalin tapno agtalinaed a natalged a naitunos dagiti linaon ti navbarmo.

Dagiti aktibo nga estado—nga addaan .active—tapno mangipakita ti agdama a panid ket mabalin a direkta a mayaplikar iti .nav-links wenno dagiti asideg a nagannakda .nav-itemkadagiti 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>

Ket gapu ta agusarkami kadagiti klase para kadagiti nav-mi, mabalinmo a liklikan nga interamente ti pamay-an a naibatay iti listaan ​​no kayatmo.

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

Mabalinmo pay nga usaren dagiti dropdown iti navbar nav-mo. Dagiti dropdown a menu ket agkasapulan ti elemento ti panagbalkot para iti panagposision, isu a siguraduen nga agusar kadagiti agsina ken naisanglad nga elemento para .nav-itemken .nav-linkkas naipakita iti baba.

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

Dagiti Pormas

Ikabil dagiti nadumaduma a kontrol ti porma ken dagiti paset iti uneg ti navbar nga addaan iti .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>

Dagiti dagus nga ubbing nga elemento iti .navbarpanagusar ket flex layout ken ag-default iti justify-content: between. Usaren dagiti kanayonan a flex utilities no kasapulan tapno maitunos daytoy a kababalin.

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

Agtrabaho met dagiti grupo ti input:

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

Nadumaduma a buton ti nasuportaran a kas paset dagitoy a porma ti navbar, met. Daytoy ket maysa pay a dakkel a palagip a dagiti bertikal a panagitunos a utilidad ket mabalin a mausar a mangitunos kadagiti nadumaduma a kadakkel nga elemento.

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

Teksto

Mabalin nga aglaon dagiti navbar kadagiti pedaso ti teksto babaen ti tulong ti .navbar-text. Daytoy a klase ket mangbalbaliw ti bertikal a panagtunos ken horisontal nga espasyo para kadagiti kuerdas ti teksto.

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

Ilaok ken iparis dagiti dadduma a paset ken utilities no kasapulan.

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

Dagiti eskema ti kolor

Ti panangtema ti navbar ket saan pay a pulos a nalaklaka gapu ti kombinasion dagiti klase ti panagtema ken background-colordagiti utilidad. Pilien manipud .navbar-lightiti mausar kadagiti nalawag a kolor ti likudan, wenno .navbar-darkpara kadagiti natayengteng a kolor ti likudan. Kalpasanna, i-customize babaen kadagiti .bg-*utilities.

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

Dagiti Pagkargaan

Urayno saan a kasapulan, mabalinmo a baluten ti navbar iti a .containertapno maisentro daytoy iti panid wenno manginayon ti maysa iti uneg tapno laeng maisentro ti linaon ti naikeddeng wenno estatiko a ngato a navbar .

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

No ti pagkargaan ket adda iti uneg ti navbarmo, ti horisontal a paddingna ket maikkat kadagiti breakpoint a nababbaba ngem ti naikeddeng a .navbar-expand{-sm|-md|-lg|-xl}klasem. Daytoy ket mangsigurado a saankami a mangdoble iti padding a saan a kasapulan kadagiti nababbaba a viewport no ti navbarmo ket nadadael.

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

Panagplastar

Usaren dagiti utilidad ti posisionmi tapno mangikabil kadagiti navbar kadagiti saan nga estatiko a posision. Pilien manipud iti naipatakder iti ngato, naipatakder iti baba, wenno nadekket iti ngato (ag-scroll a kadua ti panid agingga a makadanon iti ngato, sa agtalinaed sadiay). Dagiti natarimaan a navbar ket agus-usar ti position: fixed, a ti kayatna a sawen ket naguyod dagitoy manipud iti gagangay nga ayus ti DOM ken mabalin a kasapulan ti kostumbre a CSS (kas pagarigan, padding-topiti <body>) tapno malapdan ti panagtuon kadagiti sabali nga elemento.

Imutektekanyo pay nga .sticky-topagus-usar position: sticky, a saan a naan-anay a nasuportaran iti tunggal maysa a browser .

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

Dagiti makasungbat a kababalin

Dagiti Navbar ket mabalinda nga usaren ti .navbar-toggler, .navbar-collapse, ken .navbar-expand{-sm|-md|-lg|-xl}dagiti klase tapno agbaliw no ti linaonda ket agrupsa iti likudan ti maysa a buton. No maikuyog kadagiti dadduma a utilidad, nalaka laeng a pilien no kaano nga ipakita wenno ilemmeng dagiti partikular nga elemento.

Para kadagiti navbar a pulos a di ag-collapse, inayon ti .navbar-expandklase iti navbar. Para kadagiti navbar a kanayon a ma-collapse, saan nga inayon ti ania man a .navbar-expandklase.

Toggler nga

Dagiti toggler ti Navbar ket kannigid-a-naitunos babaen ti kasisigud, ngem no surotenda ti maysa nga elemento ti kabsat a kas ti .navbar-brand, automatiko a naitunosda iti adayo a kannawan. Ti panangbaliktad iti markup-mo ket mangbaliktad iti pannakaikabil ti toggler. Iti baba ket dagiti pagarigan ti nadumaduma nga estilo ti toggle.

Iti awan a .navbar-brandnaipakita iti kababaan a breakpoint:

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

Iti nagan ti brand a naipakita iti kannigid ken toggler iti kannawan:

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

Adda toggler iti kannigid ken brand name iti kannawan:

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

Linaon iti ruar

No dadduma kayatmo nga usaren ti collapse plugin tapno mangtignay iti nailemmeng a linaon iti sabali a paset ti panid. Gapu ta agtrabaho ti plugin-tayo iti idken data-targetpanagtunos, nalaka laeng nga aramiden dayta!

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