Source

Navbar

Dokumentasyon at mga halimbawa para sa makapangyarihan, tumutugon na header ng nabigasyon ng Bootstrap, ang navbar. May kasamang suporta para sa pagba-brand, pag-navigate, at higit pa, kabilang ang suporta para sa aming collapse plugin.

Paano ito gumagana

Narito ang kailangan mong malaman bago magsimula sa navbar:

Ang mga Navbar ay nangangailangan ng isang pambalot para .navbarsa .navbar-expand{-sm|-md|-lg|-xl}tumutugon na pagbagsak at mga klase ng scheme ng kulay.
Ang mga Navbar at ang kanilang mga nilalaman ay tuluy-tuloy bilang default. Gumamit ng mga opsyonal na lalagyan upang limitahan ang kanilang pahalang na lapad.
Gamitin ang aming spacing at flex utility class para sa pagkontrol ng spacing at alignment sa loob ng mga navbar.
Ang mga Navbar ay tumutugon bilang default, ngunit madali mong mababago ang mga ito upang baguhin iyon. Nakadepende ang tumutugon na gawi sa aming Collapse JavaScript plugin.
Ang mga Navbar ay nakatago bilang default kapag nagpi-print. Pilitin ang mga ito na i-print sa pamamagitan ng pagdaragdag .d-printsa .navbar. Tingnan ang klase ng display utility.
Tiyakin ang pagiging naa-access sa pamamagitan ng paggamit ng <nav>elemento o, kung gumagamit ng mas generic na elemento gaya ng <div>, magdagdag ng a role="navigation"sa bawat navbar upang tahasang tukuyin ito bilang landmark na rehiyon para sa mga gumagamit ng mga pantulong na teknolohiya.

Magbasa para sa isang halimbawa at listahan ng mga sinusuportahang sub-bahagi.

Sinusuportahang nilalaman

Ang mga Navbar ay may kasamang built-in na suporta para sa isang dakot ng mga sub-bahagi. Pumili sa mga sumusunod kung kinakailangan:

.navbar-brandpara sa iyong kumpanya, produkto, o pangalan ng proyekto.
.navbar-navpara sa isang buong taas at magaan na nabigasyon (kabilang ang suporta para sa mga dropdown).
.navbar-togglerpara gamitin sa aming collapse plugin at iba pang gawi sa pag- toggling ng nabigasyon .
.form-inlinepara sa anumang form na kontrol at pagkilos.
.navbar-textpara sa pagdaragdag ng patayong nakasentro na mga string ng teksto.
.collapse.navbar-collapsepara sa pagpapangkat at pagtatago ng mga nilalaman ng navbar sa pamamagitan ng isang breakpoint ng magulang.

Narito ang isang halimbawa ng lahat ng sub-components na kasama sa isang tumutugon na light-themed navbar na awtomatikong nag-collapse sa lg(malaking) 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="#">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>

Ang halimbawang ito ay gumagamit ng kulay ( bg-light) at espasyo ( my-2, my-lg-0, mr-sm-0, my-sm-0) mga klase ng utility.

Tatak

Ang .navbar-brandmaaaring ilapat sa karamihan ng mga elemento, ngunit ang isang anchor ay pinakamahusay na gumagana dahil ang ilang mga elemento ay maaaring mangailangan ng mga klase ng utility o mga custom na istilo.

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

Ang pagdaragdag ng mga larawan sa .navbar-branday malamang na palaging mangangailangan ng mga custom na istilo o mga kagamitan sa tamang sukat. Narito ang ilang mga halimbawa upang ipakita.

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

Nav

Bumubuo ang mga link sa navigation ng Navbar sa aming .navmga opsyon gamit ang sarili nilang modifier class at nangangailangan ng paggamit ng mga toggler class para sa tamang tumutugon na istilo. Ang pag-navigate sa mga navbar ay lalago din upang sakupin ang mas maraming pahalang na espasyo hangga't maaari upang panatilihing ligtas na nakahanay ang iyong mga nilalaman ng navbar.

Ang mga aktibong estado—na may .active—upang ipahiwatig ang kasalukuyang pahina ay maaaring direktang ilapat sa .nav-links o sa kanilang agarang magulang .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="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

At dahil gumagamit kami ng mga klase para sa aming mga nav, maiiwasan mo nang buo ang diskarteng nakabatay sa listahan kung gusto mo.

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

Maaari mo ring gamitin ang mga dropdown sa iyong navbar nav. Ang mga dropdown na menu ay nangangailangan ng wrapping element para sa pagpoposisyon, kaya siguraduhing gumamit ng hiwalay at nested na elemento para sa .nav-itemat .nav-linktulad ng ipinapakita sa ibaba.

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

Mga porma

Maglagay ng iba't ibang mga kontrol sa form at mga bahagi sa loob ng isang navbar na may .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>

Ihanay ang mga nilalaman ng iyong mga inline na form sa mga utility kung kinakailangan.

<nav class="navbar navbar-light bg-light justify-content-between">
  <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>

Gumagana rin ang mga pangkat ng 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>

Sinusuportahan din ang iba't ibang mga button bilang bahagi ng mga form na ito ng navbar. Isa rin itong magandang paalala na ang mga utility ng vertical alignment ay maaaring gamitin upang ihanay ang iba't ibang laki ng mga 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>

Text

Ang mga Navbar ay maaaring maglaman ng mga piraso ng teksto sa tulong ng .navbar-text. Inaayos ng klase na ito ang vertical alignment at horizontal spacing para sa mga string ng text.

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

Paghaluin at pagtugmain ang iba pang mga bahagi at kagamitan kung kinakailangan.

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

Mga scheme ng kulay

Ang pag-theming sa navbar ay hindi kailanman naging mas madali salamat sa kumbinasyon ng mga klase sa pag-theming at mga background-colorutility. Pumili mula .navbar-lightsa para sa paggamit sa mga matingkad na kulay ng background, o .navbar-darkpara sa madilim na mga kulay ng background. Pagkatapos, i-customize gamit ang .bg-*mga utility.

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

Mga lalagyan

Bagama't hindi ito kinakailangan, maaari mong i-wrap ang isang navbar sa isang .containerupang igitna ito sa isang pahina o magdagdag ng isa sa loob upang isentro lamang ang mga nilalaman ng isang nakapirming o static na tuktok na navbar .

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

Kapag ang lalagyan ay nasa loob ng iyong navbar, ang pahalang na padding nito ay aalisin sa mga breakpoint na mas mababa kaysa sa iyong tinukoy na .navbar-expand{-sm|-md|-lg|-xl}klase. Tinitiyak nito na hindi kami nagdodoble sa padding nang hindi kinakailangan sa mas mababang viewport kapag na-collapse ang iyong navbar.

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

Paglalagay

Gamitin ang aming mga kagamitan sa posisyon upang ilagay ang mga navbar sa mga hindi static na posisyon. Pumili mula sa naayos hanggang sa itaas, naayos hanggang sa ibaba, o nakadikit sa itaas (nag-scroll gamit ang pahina hanggang sa maabot nito ang tuktok, pagkatapos ay mananatili doon). Ang mga nakapirming navbar ay gumagamit ng position: fixed, ibig sabihin ay nakuha ang mga ito mula sa normal na daloy ng DOM at maaaring mangailangan ng custom na CSS (hal., padding-topsa <body>) upang maiwasan ang pag-overlap sa iba pang mga elemento.

Tandaan din na .sticky-topgumagamit ng position: sticky, na hindi ganap na sinusuportahan sa bawat 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>

Mga tumutugon na pag-uugali

Maaaring gamitin ng mga Navbar ang .navbar-toggler, .navbar-collapse, at .navbar-expand{-sm|-md|-lg|-xl}mga klase upang magbago kapag nag-collapse ang kanilang nilalaman sa likod ng isang button. Sa kumbinasyon ng iba pang mga utility, madali mong mapipili kung kailan ipapakita o itatago ang mga partikular na elemento.

Para sa mga navbar na hindi kailanman bumagsak, idagdag ang .navbar-expandklase sa navbar. Para sa mga navbar na palaging nagko-collapse, huwag magdagdag ng anumang .navbar-expandklase.

Toggler

Ang mga toggler ng Navbar ay naka-left-align bilang default, ngunit kung susundin nila ang elementong magkakapatid tulad ng .navbar-brand, awtomatiko silang maili-align sa dulong kanan. Kapag binaligtad ang iyong markup, mababaligtad ang pagkakalagay ng toggler. Nasa ibaba ang mga halimbawa ng iba't ibang istilo ng toggle.

Nang walang .navbar-brandipinapakita sa pinakamababang 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="#">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>

Sa isang pangalan ng tatak na ipinapakita sa kaliwa at toggler sa kanan:

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

May toggler sa kaliwa at brand name sa kanan:

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

Panlabas na nilalaman

Minsan gusto mong gamitin ang collapse plugin upang ma-trigger ang nakatagong content sa ibang lugar sa page. Dahil ang aming plugin ay gumagana sa idat data-targettumutugma, iyon ay madaling gawin!

Collapsed content

Toggleable via the navbar brand.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <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>