Source

Navbar

Zolemba ndi zitsanzo zamutu wamphamvu wa Bootstrap, womvera, navbar. Mulinso kuthandizira pakuyika chizindikiro, kusakatula, ndi zina zambiri, kuphatikiza kuthandizira pulogalamu yowonjezera yathu kugwa.

Momwe zimagwirira ntchito

Izi ndi zomwe muyenera kudziwa musanayambe ndi navbar:

Ma Navbar amafunikira kukulunga .navbarndi makalasi .navbar-expand{-sm|-md|-lg|-xl}akugwa komanso masinthidwe amitundu .
Navbar ndi zomwe zili mkati mwake ndi zamadzimadzi mwachisawawa. Gwiritsani ntchito zotengera zomwe mukufuna kuti muchepetse m'lifupi mwake.
Gwiritsani ntchito makalasi athu otalikirana komanso osinthika kuti muwongolere katayanidwe ndi kuyanjanitsa mkati mwa navbar.
Ma Navbars amayankha mwachisawawa, koma mutha kuwasintha mosavuta kuti asinthe. Kuyankha kumadalira pulagi yathu ya Collapse JavaScript.
Ma Navbar amabisika mwachisawawa mukasindikiza. Akakamiza kuti asindikizidwe powonjezera .d-printku .navbar. Onani kalasi yothandiza yowonetsera .
Onetsetsani kupezeka pogwiritsa ntchito <nav>chinthu kapena, ngati mukugwiritsa ntchito chinthu chodziwika bwino monga a <div>, onjezani a role="navigation"pa navbar iliyonse kuti muwonetsere kuti ndi gawo lodziwika bwino kwa ogwiritsa ntchito matekinoloje othandizira.

Werengani mwachitsanzo ndi mndandanda wa zigawo zing'onozing'ono zothandizira.

Zothandizira

Ma Navbars amabwera ndi chithandizo chomangidwira chamagulu ang'onoang'ono. Sankhani kuchokera pazifukwa zotsatirazi:

.navbar-brandza kampani yanu, malonda, kapena dzina la polojekiti.
.navbar-navpakuyenda kwautali komanso kopepuka (kuphatikiza kuthandizira kutsika).
.navbar-togglerkuti mugwiritse ntchito ndi pulagi yathu yakugwa ndi machitidwe ena osinthira ma navigation .
.form-inlinekwa maulamuliro amtundu uliwonse ndi zochita.
.navbar-textpowonjezera zingwe zolunjika pakati pa mawu.
.collapse.navbar-collapsepakuyika m'magulu ndi kubisa zomwe zili pa navbar potsata kholo lotha.

Nachi chitsanzo cha zigawo zonse zazing'ono zomwe zikuphatikizidwa mu navbar yoyankhidwa yopepuka yomwe imangogwera pamalo lg(aakulu).

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

Chitsanzochi chimagwiritsa ntchito makalasi amtundu ( bg-light) ndi masitayilo ( my-2, my-lg-0, mr-sm-0) othandiza.my-sm-0

Mtundu

Itha .navbar-brandkugwiritsidwa ntchito pazinthu zambiri, koma nangula amagwira ntchito bwino chifukwa zinthu zina zingafunike makalasi othandizira kapena masitayilo achikhalidwe.

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

Kuwonjezera zithunzi .navbar-brandkumafuna masitayelo anthawi zonse kapena zofunikira kuti zikule bwino. Nazi zitsanzo zowonetsera.

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

Nav

Maulalo oyenda pa Navbar amamanga pazosankha zathu .navndi kalasi yawo yosinthira ndipo amafuna kugwiritsa ntchito makalasi owongolera pamakongoletsedwe oyenera. Kuyenda m'ma navbar kudzakulanso kukhala malo opingasa momwe mungathere kuti zomwe zili mu navbar yanu zigwirizane bwino.

Mayiko omwe akugwira ntchito - ndi .active-kuwonetsa tsamba lomwe lilipo lingagwiritsidwe ntchito mwachindunji kwa .nav-links kapena makolo awo .nav-itemapamtima.

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

Ndipo chifukwa timagwiritsa ntchito makalasi pama navs athu, mutha kupewa njira yozikidwa pamndandanda ngati mukufuna.

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

Mutha kugwiritsanso ntchito zotsitsa mu navbar yanu. Mindandanda yotsitsa imafunikira chinthu chomangirira kuti muyike, chifukwa chake onetsetsani kuti mukugwiritsa ntchito zinthu zosiyana ndi zomwe zili m'malo .nav-itemndi .nav-linkmonga momwe ziliri pansipa.

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

Mafomu

Ikani zowongolera mafomu osiyanasiyana ndi zida mkati mwa navbar ndi .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>

Zinthu zapanthawi yomweyo za ana zomwe zimagwiritsa .navbarntchito masinthidwe osinthika ndipo zidzasintha kukhala justify-content: between. Gwiritsani ntchito zowonjezera zosinthika ngati pakufunika kusintha izi.

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

Magulu olowetsa amagwiranso ntchito:

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

Mabatani osiyanasiyana amathandizidwa ngati gawo la mawonekedwe a navbar, nawonso. Ichinso ndi chikumbutso chachikulu kuti zida zoyankhulirana zoyima zitha kugwiritsidwa ntchito kugwirizanitsa zinthu zazikuluzikulu zosiyanasiyana.

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

Mawu

Navbars ikhoza kukhala ndi tinthu tating'ono ta mawu mothandizidwa ndi .navbar-text. Kalasiyi imasintha mizere yoyima ndi mipata yopingasa pamawu amtundu uliwonse.

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

Sakanizani ndikugwirizanitsa ndi zigawo zina ndi zofunikira ngati mukufunikira.

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

Mitundu yamitundu

Kupanga navbar sikunakhale kosavuta chifukwa cha kuphatikiza makalasi amitu ndi background-colorzofunikira. Sankhani kuchokera .navbar-lightkuti mugwiritse ntchito ndi mitundu yowala yakumbuyo, kapena .navbar-darkmitundu yakuda yakumbuyo. Kenako, sinthani ndi .bg-*zofunikira.

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

Zotengera

Ngakhale sikofunikira, mutha kukulunga navbar kuti muyike .containerpakati pa tsamba kapena kuwonjezera imodzi mkati mwazolemba zapamtunda zokhazikika kapena zokhazikika .

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

Chidebecho chikakhala mkati mwa navbar yanu, padding yake yopingasa imachotsedwa pamalo otsika kuposa .navbar-expand{-sm|-md|-lg|-xl}kalasi yomwe mwasankha. Izi zimatsimikizira kuti sitikuchulukirachulukira pazipata mopanda chifukwa pamawonekedwe apansi pomwe navbar yanu yagwa.

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

Kuyika

Gwiritsani ntchito zida zathu kuti muyike ma navbar m'malo osakhazikika. Sankhani kuchokera ku zokhazikika mpaka pamwamba, zokhazikika pansi, kapena zomamatira pamwamba (mipukutu ndi tsamba mpaka ifike pamwamba, ndiye khalani pamenepo). Ma navbar okhazikika amagwiritsa ntchito position: fixed, kutanthauza kuti amachotsedwa mumayendedwe wamba a DOM ndipo angafunike CSS yokhazikika (mwachitsanzo, padding-toppa <body>) kuti apewe kuphatikizika ndi zinthu zina.

Komanso dziwani kuti .sticky-topntchito position: sticky, zomwe sizimathandizidwa mokwanira mu msakatuli aliyense .

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

Makhalidwe omvera

Ma Navbars amatha kugwiritsa ntchito .navbar-toggler, .navbar-collapse, ndi .navbar-expand{-sm|-md|-lg|-xl}makalasi kuti asinthe zomwe zomwe zili zikugwera kuseri kwa batani. Kuphatikiza ndi zida zina, mutha kusankha mosavuta nthawi yowonetsera kapena kubisa zinthu zina.

Kwa ma navbar omwe samagwa, onjezani .navbar-expandkalasi pa navbar. Pa ma navbar omwe amagwa nthawi zonse, musawonjezere .navbar-expandkalasi iliyonse.

Toggler

Ma Navbar togglers amalumikizidwa kumanzere mwachisawawa, koma akatsatira chinthu cha m'bale ngati a .navbar-brand, amangoyanjanitsidwa kumanja kwakutali. Kutembenuza chizindikiro chanu kudzasintha kuyika kwa chowongolera. M'munsimu muli zitsanzo za masitayelo osiyanasiyana osinthira.

Popanda .navbar-brandkuwonetsedwa pagawo lotsika kwambiri:

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

Ndi dzina la mtundu lomwe likuwonetsedwa kumanzere ndi chosinthira kumanja:

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

Ndili ndi chosinthira kumanzere ndi dzina lamtundu kumanja:

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

Zakunja

Nthawi zina mukufuna kugwiritsa ntchito pulogalamu yowonjezera ya kugwa kuti muyambitse zobisika kwinakwake patsamba. Chifukwa pulogalamu yowonjezera yathu imagwira ntchito idndikufananiza data-target, ndizovuta!

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>