Source

Navbar

Dokumentasyon ug mga pananglitan alang sa gamhanan, responsive nga navigation header sa Bootstrap, ang navbar. Naglakip sa suporta alang sa branding, nabigasyon, ug uban pa, lakip ang suporta alang sa among pagkahugno plugin.

Giunsa kini paglihok

Ania ang kinahanglan nimong mahibal-an sa dili pa magsugod sa navbar:

Ang mga Navbar nanginahanglan usa ka pagputos .navbaralang .navbar-expand{-sm|-md|-lg|-xl}sa mga responsive collapsing ug color scheme nga mga klase.
Ang mga Navbar ug ang mga sulod niini kay fluid sa default. Gamita ang opsyonal nga mga sudlanan aron limitahan ang ilang pinahigda nga gilapdon.
Gamita ang among spacing ug flex utility classes para sa pagkontrolar sa spacing ug alignment sulod sa navbars.
Ang mga Navbars responsive sa default, apan dali nimo kini usbon aron mabag-o kana. Ang responsive nga kinaiya nagdepende sa among Collapse JavaScript plugin.
Ang mga Navbar gitago sa default kung nag-imprinta. Pugsa kini nga maimprinta pinaagi sa pagdugang .d-printsa .navbar. Tan-awa ang klase sa display utility.
Siguruha ang pagka-access pinaagi sa paggamit sa usa ka <nav>elemento o, kung mogamit usa ka labi ka generic nga elemento sama sa usa ka <div>, pagdugang usa role="navigation"sa matag navbar aron klaro nga mailhan kini ingon usa ka timaan nga rehiyon alang sa mga tiggamit sa mga teknolohiya nga makatabang.

Ang epekto sa animation niini nga sangkap nagdepende sa prefers-reduced-motionpangutana sa media. Tan-awa ang gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .

Ipadayon ang pagbasa alang sa usa ka pananglitan ug lista sa gisuportahan nga mga sub-sangkap.

Gisuportahan nga sulud

Ang mga Navbar adunay built-in nga suporta alang sa pipila ka mga sub-sangkap. Pagpili gikan sa mosunod kon gikinahanglan:

.navbar-brandalang sa imong kompanya, produkto, o ngalan sa proyekto.
.navbar-navalang sa bug-os nga gitas-on ug gaan nga nabigasyon (lakip ang suporta alang sa mga dropdown).
.navbar-togglerpara gamiton sa among collapse plugin ug uban pang navigation toggling behaviors.
.form-inlinealang sa bisan unsang porma nga kontrol ug aksyon.
.navbar-textalang sa pagdugang sa vertically centered strings sa teksto.
.collapse.navbar-collapsealang sa paggrupo ug pagtago sa mga sulod sa navbar pinaagi sa usa ka breakpoint sa ginikanan.

Ania ang usa ka pananglitan sa tanan nga mga sub-sangkap nga gilakip sa usa ka responsive nga light-themed navbar nga awtomatikong nahugno sa lg(dako) nga 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>

Kini nga pananglitan naggamit sa kolor ( bg-light) ug gilay-on ( my-2, my-lg-0, mr-sm-0, my-sm-0) mga klase sa utility.

Brand

Ang .navbar-brandmahimong magamit sa kadaghanan nga mga elemento, apan ang usa ka angkla labing maayo tungod kay ang pipila nga mga elemento mahimo’g magkinahanglan mga klase sa utility o naandan nga mga 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 pagdugang sa mga imahe sa .navbar-brandlagmit kanunay nga nanginahanglan mga kostumbre nga istilo o mga gamit sa husto nga gidak-on. Ania ang pipila ka mga pananglitan nga ipakita.

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

Ang Nav

Ang mga link sa navigation sa Navbar nagtukod sa among .navmga kapilian gamit ang ilang kaugalingon nga klase sa modifier ug nanginahanglan sa paggamit sa mga toggler nga klase alang sa husto nga pagtubag nga istilo. Ang pag-navigate sa mga navbar motubo usab aron maokupar ang daghang pinahigda nga wanang kutob sa mahimo aron mapadayon ang imong mga sulud sa navbar nga luwas nga na-align.

Aktibo nga estado-nga adunay .active-sa pagpakita sa kasamtangan nga panid mahimong magamit direkta ngadto sa .nav-links o sa ilang diha-diha nga ginikanan .nav-items.

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

Ug tungod kay naggamit kami og mga klase alang sa among mga nav, mahimo nimong malikayan ang lista-based nga pamaagi sa hingpit kung gusto nimo.

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

Mahimo usab nimong gamiton ang mga dropdown sa imong navbar nav. Ang mga dropdown nga menu nanginahanglan usa ka elemento sa pagputos alang sa pagposisyon, busa siguroha ang paggamit sa bulag ug nested nga mga elemento alang sa .nav-itemug .nav-linkingon sa gipakita sa ubos.

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

Mga porma

Ibutang ang lainlaing mga kontrol sa porma ug mga sangkap sulod sa usa ka navbar nga adunay .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>

Diha-diha nga mga bata nga mga elemento sa .navbarpaggamit sa flex layout ug mahimong default sa justify-content: between. Paggamit og dugang nga mga flex utilities kung gikinahanglan aron ma-adjust kini nga kinaiya.

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

Ang mga grupo sa input nagtrabaho, usab:

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

Gisuportahan usab ang lainlaing mga buton ingon bahin sa kini nga mga porma sa navbar. Usa usab kini ka maayong pahinumdom nga ang mga utilities sa vertical alignment mahimong magamit sa pag-align sa lain-laing gidak-on nga 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 mahimong adunay mga piraso sa teksto sa tabang sa .navbar-text. Kini nga klase nag-adjust sa bertikal nga paglinya ug pinahigda nga gilay-on alang sa mga string sa teksto.

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

Pagsagol ug pagpares sa ubang mga sangkap ug mga gamit kung gikinahanglan.

<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 laraw sa kolor

Ang pag-theming sa navbar dili gyud kadali salamat sa kombinasyon sa mga klase sa tema ug mga background-colorgamit. Pagpili gikan .navbar-lightsa alang sa paggamit sa kahayag nga mga kolor sa background, o .navbar-darkalang sa itom nga mga kolor sa background. Unya, ipasibo sa mga .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>

Mga sudlanan

Bisag wala kini gikinahanglan, mahimo nimong i-wrap ang usa ka navbar sa usa .containeraron isentro kini sa usa ka panid o idugang ang usa sa sulod aron masentro lamang ang mga sulod sa usa ka fixed o static top navbar .

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

Kung ang sudlanan naa sa sulod sa imong navbar, ang pinahigda nga padding makuha sa mga breakpoint nga mas ubos kaysa sa imong gitakda nga .navbar-expand{-sm|-md|-lg|-xl}klase. Kini nagsiguro nga kami dili magdoble sa padding nga dili kinahanglan sa ubos nga viewports kung ang imong navbar nahugno.

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

Pagpahimutang

Gamita ang among mga gamit sa posisyon aron ibutang ang mga navbar sa dili statik nga mga posisyon. Pagpili gikan sa fixed ngadto sa ibabaw, fixed ngadto sa ubos, o idikit sa ibabaw (scrolls uban sa panid hangtud kini moabut sa ibabaw, unya magpabilin didto). Ang giayo nga mga navbar naggamit sa position: fixed, nagpasabut nga kini gikuha gikan sa normal nga dagan sa DOM ug mahimong magkinahanglan og custom nga CSS (pananglitan, padding-topsa<body> ) aron malikayan ang pagsapaw sa ubang mga elemento.

Timan-i usab nga ang mga .sticky-topgamit position: sticky, nga dili hingpit nga gisuportahan sa matag 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>

Responsive nga mga kinaiya

Mahimong gamiton sa mga Navbar ang .navbar-toggler, .navbar-collapse, ug .navbar-expand{-sm|-md|-lg|-xl}mga klase aron usbon kung mahugno ang ilang sulod luyo sa buton. Sa kombinasyon sa ubang mga utilities, dali ka makapili kung kanus-a ipakita o itago ang mga partikular nga elemento.

Para sa mga navbar nga dili gyud mahugno, idugang ang .navbar-expandklase sa navbar. Alang sa mga navbar nga kanunay nahugno, ayaw pagdugang bisan unsa.navbar-expand klase.

Toggler

Ang mga toggler sa Navbar kay gilinya sa wala pinaagi sa default, apan kon mosunod sila sa elemento sa igsuon sama sa .navbar-brand, awtomatik sila nga ma-align sa halayong tuo. Ang pag-usab sa imong markup mobaliskad sa pagbutang sa toggler. Sa ubos mao ang mga pananglitan sa lainlaing mga istilo sa toggle.

Sa walay .navbar-brandgipakita sa pinakaubos nga 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>

Uban sa usa ka brand name nga gipakita sa wala ug toggler sa tuo:

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

Uban ang toggler sa wala ug brand name sa tuo:

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

Panggawas nga sulod

Usahay gusto nimong gamiton ang collapse plugin aron ma-trigger ang tinago nga sulud sa ubang lugar sa panid. Tungod kay ang among plugin nagtrabaho sa idug data-targetpagpares, dali ra kana buhaton!

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>