Source

Navbar

Cov ntaub ntawv thiab cov piv txwv rau Bootstrap lub zog, teb cov lus taw qhia header, navbar. Xws li kev txhawb nqa rau kev tsim khoom lag luam, kev taw qhia, thiab lwm yam, suav nrog kev txhawb nqa rau peb qhov kev sib tsoo plugin.

Nws ua haujlwm li cas

Nov yog yam koj yuav tsum paub ua ntej pib nrog navbar:

  • Navbars xav tau kev qhwv .navbarnrog .navbar-expand{-sm|-md|-lg|-xl}rau kev sib tsoo thiab cov chav kawm xim xim .
  • Navbars thiab lawv cov ntsiab lus yog kua los ntawm lub neej ntawd. Siv cov thawv xaiv los txwv lawv txoj kab rov tav dav.
  • Siv peb qhov sib nrug thiab cov chav kawm siv hluav taws xob yooj yim rau kev tswj qhov sib nrug thiab sib dhos hauv navbars .
  • Navbars teb los ntawm lub neej ntawd, tab sis koj tuaj yeem hloov kho tau yooj yim los hloov qhov ntawd. Tus cwj pwm teb nyob ntawm peb Collapse JavaScript plugin.
  • Navbars tau muab zais los ntawm lub neej ntawd thaum luam ntawv. yuam kom lawv luam tawm los ntawm kev ntxiv .d-printrau lub .navbar. Saib cov chav kawm siv hluav taws xob.
  • Xyuas kom nkag mus tau los ntawm kev siv lub <nav>ntsiab lus lossis, yog tias siv cov khoom siv ntau dua xws li a <div>, ntxiv role="navigation"rau txhua tus navbar kom qhia meej meej tias nws yog thaj chaw thaj chaw rau cov neeg siv cov cuab yeej pabcuam.

Cov nyhuv animation ntawm cov khoom siv no yog nyob ntawm cov prefers-reduced-motionlus nug xov xwm. Saib qhov txo qis ntawm peb cov ntaub ntawv nkag mus tau .

Nyeem rau ua piv txwv thiab cov npe ntawm cov khoom siv txhawb nqa.

Txhawb cov ntsiab lus

Navbars tuaj nrog kev txhawb nqa rau ib qho me me ntawm cov khoom sib txuas. Xaiv los ntawm cov hauv qab no raws li xav tau:

  • .navbar-brandrau koj lub tuam txhab, khoom, lossis lub npe qhov project.
  • .navbar-navrau qhov siab tag nrho thiab lub teeb yuag navigation (nrog rau kev txhawb nqa rau kev poob qis).
  • .navbar-togglerrau siv nrog peb lub cev qhuav dej plugin thiab lwm yam navigation toggling cwj pwm.
  • .form-inlinerau txhua daim ntawv tswj thiab ua.
  • .navbar-textrau ntxiv vertically centered hlua ntawm cov ntawv nyeem.
  • .collapse.navbar-collapserau pab pawg thiab zais cov ntsiab lus navbar los ntawm niam txiv breakpoint.

Ntawm no yog ib qho piv txwv ntawm tag nrho cov sub-components muaj nyob rau hauv lub teb lub teeb-themed navbar uas cia li ntog ntawm lub lg(loj) 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>

Qhov piv txwv no siv xim ( bg-light) thiab qhov sib nrug ( my-2, my-lg-0, mr-sm-0, my-sm-0) cov chav kawm siv hluav taws xob.

Hom

Cov .navbar-brandtuaj yeem siv rau ntau lub ntsiab lus, tab sis lub thauj tog rau nkoj ua haujlwm zoo tshaj plaws vim qee lub ntsiab lus yuav xav tau cov chav kawm siv hluav taws xob lossis cov qauv kev cai.

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

Ntxiv cov duab rau qhov .navbar-brandyuav ib txwm xav tau cov qauv kev cai lossis kev siv hluav taws xob kom loj. Nov yog qee qhov piv txwv los ua qauv qhia.

<!-- 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 navigation txuas tsim los ntawm peb cov .navkev xaiv nrog lawv tus kheej hloov kho chav kawm thiab xav tau kev siv cov chav kawm toggler rau kev ua haujlwm zoo. Kev taw qhia hauv navbars kuj tseem yuav loj hlob kom nyob hauv qhov chaw kab rov tav ntau li ntau tau kom koj cov ntsiab lus navbar ruaj ntseg zoo sib xws.

Cov xeev nquag-nrog-los .activeqhia cov nplooj ntawv tam sim no tuaj yeem siv ncaj qha rau .nav-links lossis lawv niam txiv tam sim ntawd .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>

Thiab vim tias peb siv cov chav kawm rau peb cov navs, koj tuaj yeem zam cov npe raws li txoj hauv kev yog tias koj nyiam.

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

Koj kuj tseem tuaj yeem siv cov dropdowns hauv koj lub navbar nav. Dropdown menus xav tau lub ntsiab lus qhwv rau qhov chaw, yog li nco ntsoov siv cov khoom sib cais thiab zes rau .nav-itemthiab .nav-linkraws li qhia hauv qab no.

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

Cov ntawv

Muab ntau daim ntawv tswj thiab cov khoom hauv ib lub navbar nrog .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>

Cov me nyuam tam sim ntawd cov ntsiab lus hauv .navbarkev siv flex layout thiab yuav ua rau justify-content: space-between. Siv cov khoom siv flex ntxiv raws li xav tau los kho tus cwj pwm no.

<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 pab pawg ua haujlwm, ib yam nkaus:

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

Ntau cov nyees khawm raug txhawb los ua ib feem ntawm cov ntawv navbar no, ib yam nkaus. Qhov no kuj yog ib qho kev ceeb toom zoo tias cov khoom siv hluav taws xob ntsug tuaj yeem siv los ua kom cov ntsiab lus sib txawv.

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

Ntawv nyeem

Navbars yuav muaj cov ntawv me me nrog kev pab ntawm .navbar-text. Cov chav kawm no kho cov kab ntsug ntsug thiab kab rov tav qhov sib txawv rau cov hlua ntawm cov ntawv nyeem.

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

Sib tov thiab sib xyaw nrog lwm cov khoom siv thiab cov khoom siv raws li xav tau.

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

Xim schemes

Theming lub navbar yeej tsis tau yooj yim dua ua tsaug rau kev sib xyaw ntawm cov chav kawm thiab background-colorcov khoom siv hluav taws xob. Xaiv los ntawm .navbar-lightkev siv nrog lub teeb tom qab xim, lossis .navbar-darkrau xim tom qab tsaus. Tom qab ntawd, kho nrog .bg-*cov khoom siv hluav taws xob.

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

Ntim

Txawm hais tias nws tsis tas yuav tsum tau, koj tuaj yeem qhwv lub navbar rau hauv .containernruab nrab ntawm nplooj ntawv lossis ntxiv ib qho rau hauv tsuas yog nruab nrab ntawm cov ntsiab lus ntawm qhov ruaj khov lossis zoo li qub navbar .

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

Thaum lub thawv nyob rau hauv koj lub navbar, nws kab rov tav padding raug tshem tawm ntawm breakpoints qis dua koj teev .navbar-expand{-sm|-md|-lg|-xl}. Qhov no ua kom peb tsis txhob ua ob npaug ntawm padding yam tsis tsim nyog ntawm cov chaw saib qis dua thaum koj lub navbar tawg.

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

Qhov chaw

Siv peb txoj haujlwm kev siv hluav taws xob los tso navbars hauv txoj haujlwm tsis zoo li qub. Xaiv los ntawm tsau mus rau sab saum toj, tsau rau hauv qab, lossis nplaum rau sab saum toj (scrolls nrog nplooj ntawv kom txog rau thaum nws mus txog rau sab saum toj, ces nyob ntawd). Tsau navbars siv position: fixed, txhais tau tias lawv tau rub los ntawm qhov qub ntws ntawm DOM thiab tej zaum yuav xav tau kev cai CSS (xws li, padding-topntawm lub <body>) txhawm rau tiv thaiv kev sib tshooj nrog lwm cov ntsiab lus.

Tsis tas li ntawd nco ntsoov tias .sticky-topsiv position: sticky, uas tsis txaus siab rau txhua qhov 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>

Teb tus cwj pwm

Navbars tuaj yeem siv .navbar-toggler, .navbar-collapse, thiab .navbar-expand{-sm|-md|-lg|-xl}cov chav kawm hloov pauv thaum lawv cov ntsiab lus tsoo tom qab lub pob. Ua ke nrog lwm cov khoom siv hluav taws xob, koj tuaj yeem yooj yim xaiv thaum twg los qhia lossis zais cov ntsiab lus tshwj xeeb.

Rau navbars uas yeej tsis tawg, ntxiv cov .navbar-expandchav kawm ntawm tus navbar. Rau navbars uas ib txwm vau, tsis txhob ntxiv ib .navbar-expandchav kawm.

Toggler

Navbar togglers yog sab laug-tsim los ntawm lub neej ntawd, tab sis yog tias lawv ua raws li cov kwv tij txheeb ze .navbar-brand, lawv yuav cia li ua raws li txoj cai nyob deb. Reversing koj markup yuav thim rov qab qhov chaw ntawm lub toggler. Hauv qab no yog cov piv txwv ntawm txawv toggle styles.

Nrog tsis .navbar-brandpom nyob rau hauv qis tshaj 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>

Nrog rau lub npe hom pom nyob rau sab laug thiab toggler ntawm sab xis:

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

Nrog lub toggler ntawm sab laug thiab lub npe hom ntawm sab xis:

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

Cov ntsiab lus sab nraud

Qee lub sij hawm koj xav siv lub vaum plugin los ua kom cov ntsiab lus zais lwm qhov ntawm nplooj ntawv. Vim tias peb lub plugin ua haujlwm ntawm qhov idsib data-targettxuam, qhov ntawd yooj yim ua tiav!

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